tablepress / admin / js / add / screen.jsx

screen.jsx in TablePress – Tables in WordPress made easy 3.0, at admin/js/add/screen.jsx

136 lines 3.5 KB

Raw Download Zip

1	/**
2	* JavaScript code for the "Add New Screen" component.
3	*
4	* @package TablePress
5	* @subpackage Add New Screen
6	* @author Tobias Bäthge
7	* @since 3.0.0
8	*/
9
10	/**
11	* WordPress dependencies.
12	*/
13	import { useState } from 'react';
14	import {
15	Button,
16	Card,
17	CardBody,
18	CardHeader,
19	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
20	__experimentalNumberControl as NumberControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
21	TextareaControl,
22	TextControl,
23	__experimentalVStack as VStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
24	} from '@wordpress/components';
25	import { __ } from '@wordpress/i18n';
26
27	/**
28	* Returns the "Add New Screen" component's JSX markup.
29	*
30	* @return {Object} Add New Screen component.
31	*/
32	const Screen = () => {
33	const [ screenData, setScreenData ] = useState( {
34	name: '',
35	description: '',
36	rows: 5,
37	columns: 5,
38	} );
39
40	/**
41	* Handles screen data state changes.
42	*
43	* @param {Object} updatedScreenData Data in the screen data state that should be updated.
44	*/
45	const updateScreenData = ( updatedScreenData ) => {
46	setScreenData( ( currentScreenData ) => ( {
47	...currentScreenData,
48	...updatedScreenData,
49	} ) );
50	};
51
52	return (
53	<div style={ {
54	border: '1px solid #e0e0e0',
55	} }>
56	<Card>
57	<CardHeader>
58	<h2>{ __( 'Add New Table', 'tablepress' ) }</h2>
59	</CardHeader>
60	<CardBody>
61	<VStack
62	spacing="20px"
63	style={ {
64	maxWidth: '500px',
65	} }
66	>
67	<TextControl
68	__nextHasNoMarginBottom
69	name="table[name]"
70	label={ __( 'Table Name', 'tablepress' ) }
71	help={ __( 'The name or title of your table.', 'tablepress' ) }
72	value={ screenData.name }
73	onChange={ ( name ) => updateScreenData( { name } ) }
74	/>
75	<TextareaControl
76	__nextHasNoMarginBottom
77	name="table[description]"
78	label={ __( 'Description', 'tablepress' ) + ' ' + __( '(optional)', 'tablepress' ) }
79	help={ __( 'A description of the contents of your table.', 'tablepress' ) }
80	value={ screenData.description }
81	onChange={ ( description ) => updateScreenData( { description } ) }
82	rows="4"
83	/>
84	<HStack
85	alignment="left"
86	spacing="20px"
87	>
88	<div style={ {
89	width: '150px',
90	} }>
91	<NumberControl
92	name="table[rows]"
93	label={ __( 'Number of Rows', 'tablepress' ) }
94	help={ __( 'The number of rows in your table.', 'tablepress' ) }
95	title={ __( 'This field must contain a positive number.', 'tablepress' ) }
96	isDragEnabled={ false }
97	value={ screenData.rows }
98	onChange={ ( rows ) => updateScreenData( { rows } ) }
99	min={ 1 }
100	max={ 99999 }
101	required={ true }
102	/>
103	</div>
104	<div style={ {
105	width: '150px',
106	} }>
107	<NumberControl
108	name="table[columns]"
109	label={ __( 'Number of Columns', 'tablepress' ) }
110	help={ __( 'The number of columns in your table.', 'tablepress' ) }
111	title={ __( 'This field must contain a positive number.', 'tablepress' ) }
112	isDragEnabled={ false }
113	value={ screenData.columns }
114	onChange={ ( columns ) => updateScreenData( { columns } ) }
115	min={ 1 }
116	max={ 99999 }
117	required={ true }
118	/>
119	</div>
120	</HStack>
121	<HStack>
122	<Button
123	variant="primary"
124	type="submit"
125	text={ __( 'Add Table', 'tablepress' ) }
126	/>
127	</HStack>
128	</VStack>
129	</CardBody>
130	</Card>
131	</div>
132	);
133	};
134
135	export default Screen;
136