TablePress – Tables in WordPress made easy / 3.0

TablePress – Tables in WordPress made easy v3.0

tablepress / admin / js / edit / table-options.js

table-options.js in TablePress – Tables in WordPress made easy 3.0, at admin/js/edit/table-options.js

233 lines 8.0 KB

Raw Download Zip

1	/**
2	* JavaScript code for the "Edit" section integration of the "Table Options".
3	*
4	* @package TablePress
5	* @subpackage Views JavaScript
6	* @author Tobias Bäthge
7	* @since 3.0.0
8	*/
9
10	/**
11	* WordPress dependencies.
12	*/
13	import {
14	CheckboxControl,
15	FormTokenField,
16	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
17	__experimentalNumberControl as NumberControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
18	SelectControl,
19	__experimentalVStack as VStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
20	} from '@wordpress/components';
21	import { createInterpolateElement } from '@wordpress/element';
22	import { __, _x } from '@wordpress/i18n';
23
24	/**
25	* Internal dependencies.
26	*/
27	import { initializeReactComponentInPortal } from '../common/react-loader';
28
29	const Section = ( { tableOptions, updateTableOptions } ) => {
30	return (
31	<VStack
32	spacing="16px"
33	style={ {
34	paddingTop: '6px',
35	} }
36	>
37	<table className="tablepress-postbox-table fixed">
38	<tbody>
39	<tr>
40	<th className="column-1" scope="row">{ __( 'Table Header', 'tablepress' ) }:</th>
41	<td className="column-2">
42	<label htmlFor="option-table_head">
43	<HStack alignment="left">
44	{
45	createInterpolateElement(
46	__( 'The first <input /> rows are the table header.', 'tablepress' ),
47	{
48	input: (
49	<NumberControl
50	id="option-table_head"
51	title={ __( 'This field must contain a non-negative number.', 'tablepress' ) }
52	isDragEnabled={ false }
53	value={ tableOptions.table_head }
54	onChange={ ( table_head ) => {
55	table_head = '' !== table_head ? parseInt( table_head, 10 ) : 0;
56	updateTableOptions( { table_head } );
57	} }
58	min={ 0 }
59	max={ 9 }
60	required={ true }
61	style={ {
62	width: '65px',
63	} }
64	/>
65	),
66	},
67	)
68	}
69	</HStack>
70	</label>
71	</td>
72	</tr>
73	<tr className="bottom-border">
74	<th className="column-1" scope="row">{ __( 'Table Footer', 'tablepress' ) }:</th>
75	<td className="column-2">
76	<label htmlFor="option-table_foot">
77	<HStack alignment="left">
78	{
79	createInterpolateElement(
80	__( 'The last <input /> rows are the table footer.', 'tablepress' ),
81	{
82	input: (
83	<NumberControl
84	id="option-table_foot"
85	title={ __( 'This field must contain a non-negative number.', 'tablepress' ) }
86	isDragEnabled={ false }
87	value={ tableOptions.table_foot }
88	onChange={ ( table_foot ) => {
89	table_foot = '' !== table_foot ? parseInt( table_foot, 10 ) : 0;
90	updateTableOptions( { table_foot } );
91	} }
92	min={ 0 }
93	max={ 9 }
94	required={ true }
95	style={ {
96	width: '65px',
97	} }
98	/>
99	),
100	},
101	)
102	}
103	</HStack>
104	</label>
105	</td>
106	</tr>
107	<tr className="top-border">
108	<th className="column-1" scope="row">{ __( 'Alternating Row Colors', 'tablepress' ) }:</th>
109	<td className="column-2">
110	<CheckboxControl
111	__nextHasNoMarginBottom
112	label={ __( 'The background colors of consecutive rows shall alternate.', 'tablepress' ) }
113	checked={ tableOptions.alternating_row_colors }
114	onChange={ ( alternating_row_colors ) => updateTableOptions( { alternating_row_colors } ) }
115	/>
116	</td>
117	</tr>
118	<tr className="bottom-border">
119	<th className="column-1" scope="row">{ __( 'Row Hover Highlighting', 'tablepress' ) }:</th>
120	<td className="column-2">
121	<CheckboxControl
122	__nextHasNoMarginBottom
123	label={ __( 'Highlight a row while the mouse cursor hovers above it by changing its background color.', 'tablepress' ) }
124	checked={ tableOptions.row_hover }
125	onChange={ ( row_hover ) => updateTableOptions( { row_hover } ) }
126	/>
127	</td>
128	</tr>
129	<tr className="top-border">
130	<th className="column-1" scope="row">{ __( 'Print Table Name', 'tablepress' ) }:</th>
131	<td className="column-2">
132	<CheckboxControl
133	__nextHasNoMarginBottom
134	className="checkbox-select-in-label"
135	label={
136	createInterpolateElement(
137	_x( 'Show the table name <select /> the table.', 'position (above or below)', 'tablepress' ),
138	{
139	select: (
140	<SelectControl
141	__nextHasNoMarginBottom
142	value={ tableOptions.print_name_position }
143	disabled={ ! tableOptions.print_name }
144	onChange={ ( print_name_position ) => updateTableOptions( { print_name_position } ) }
145	options={ [
146	{ label: __( 'above', 'tablepress' ), value: 'above' },
147	{ label: __( 'below', 'tablepress' ), value: 'below' },
148	] }
149	/>
150	),
151	},
152	)
153	}
154	checked={ tableOptions.print_name }
155	onChange={ ( print_name ) => updateTableOptions( { print_name } ) }
156	/>
157	</td>
158	</tr>
159	<tr className="bottom-border">
160	<th className="column-1" scope="row">{ __( 'Print Table Description', 'tablepress' ) }:</th>
161	<td className="column-2">
162	<CheckboxControl
163	__nextHasNoMarginBottom
164	className="checkbox-select-in-label"
165	label={
166	createInterpolateElement(
167	_x( 'Show the table description <select /> the table.', 'position (above or below)', 'tablepress' ),
168	{
169	select: (
170	<SelectControl
171	__nextHasNoMarginBottom
172	value={ tableOptions.print_description_position }
173	disabled={ ! tableOptions.print_description }
174	onChange={ ( print_description_position ) => updateTableOptions( { print_description_position } ) }
175	options={ [
176	{ label: __( 'above', 'tablepress' ), value: 'above' },
177	{ label: __( 'below', 'tablepress' ), value: 'below' },
178	] }
179	/>
180	),
181	},
182	)
183	}
184	checked={ tableOptions.print_description }
185	onChange={ ( print_description ) => updateTableOptions( { print_description } ) }
186	/>
187	</td>
188	</tr>
189	<tr className="top-border">
190	<th className="column-1 top-align" scope="row"><label htmlFor="option-extra_css_classes">{ __( 'Extra CSS Classes', 'tablepress' ) }:</label></th>
191	<td className="column-2">
192	<VStack>
193	<FormTokenField
194	__nextHasNoMarginBottom
195	id="option-extra_css_classes"
196	label=""
197	className="code"
198	title={ __( 'This field can only contain letters, numbers, spaces, hyphens (-), underscores (_), and colons (:).', 'tablepress' ) }
199	pattern="[A-Za-z0-9 _:\-]*"
200	onChange={ ( extra_css_classes ) => updateTableOptions( { extra_css_classes: extra_css_classes.join( ' ' ).trim().replace( /[^A-Za-z0-9 _:-]/g, '' ) } ) }
201	value={ '' !== tableOptions.extra_css_classes ? tableOptions.extra_css_classes.split( ' ' ) : [] }
202	tokenizeOnBlur={ true }
203	tokenizeOnSpace={ true }
204	__experimentalShowHowTo={ false }
205	/>
206	<span style={ {
207	fontSize: '12px',
208	color: '#757575',
209	} }>
210	{
211	createInterpolateElement(
212	__( 'Additional CSS classes for styling purposes can be entered here.', 'tablepress' ) + ' ' + __( 'This is NOT the place to enter <a>Custom CSS</a> code!', 'tablepress' ),
213	{
214	a: <a href={ tp.screen_options.optionsUrl } />, // eslint-disable-line jsx-a11y/anchor-has-content
215	},
216	)
217	}
218	</span>
219	</VStack>
220	</td>
221	</tr>
222	</tbody>
223	</table>
224	</VStack>
225	);
226	};
227
228	initializeReactComponentInPortal(
229	'table-options',
230	'edit',
231	Section,
232	);
233