tablepress / admin / js / add / screen.jsx

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

135 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	<Card>
54	<CardHeader>
55	<h2>{ __( 'Add New Table', 'tablepress' ) }</h2>
56	</CardHeader>
57	<CardBody>
58	<VStack
59	spacing="20px"
60	style={ {
61	maxWidth: '500px',
62	} }
63	>
64	<TextControl
65	__nextHasNoMarginBottom
66	__next40pxDefaultSize
67	name="table[name]"
68	label={ __( 'Table Name', 'tablepress' ) }
69	help={ __( 'The name or title of your table.', 'tablepress' ) }
70	value={ screenData.name }
71	onChange={ ( name ) => updateScreenData( { name } ) }
72	/>
73	<TextareaControl
74	__nextHasNoMarginBottom
75	name="table[description]"
76	label={ __( 'Description', 'tablepress' ) + ' ' + __( '(optional)', 'tablepress' ) }
77	help={ __( 'A description of the contents of your table.', 'tablepress' ) }
78	value={ screenData.description }
79	onChange={ ( description ) => updateScreenData( { description } ) }
80	rows="4"
81	/>
82	<HStack
83	alignment="left"
84	spacing="20px"
85	>
86	<div style={ {
87	width: '150px',
88	} }>
89	<NumberControl
90	__next40pxDefaultSize
91	name="table[rows]"
92	label={ __( 'Number of Rows', 'tablepress' ) }
93	help={ __( 'The number of rows in your table.', 'tablepress' ) }
94	title={ __( 'This field must contain a positive number.', 'tablepress' ) }
95	isDragEnabled={ false }
96	value={ screenData.rows }
97	onChange={ ( rows ) => updateScreenData( { rows } ) }
98	min={ 1 }
99	max={ 99999 }
100	required={ true }
101	/>
102	</div>
103	<div style={ {
104	width: '150px',
105	} }>
106	<NumberControl
107	__next40pxDefaultSize
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	);
132	};
133
134	export default Screen;
135