TablePress – Tables in WordPress made easy / 3.3

TablePress – Tables in WordPress made easy v3.3

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

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

240 lines 8.2 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	size="compact"
51	id="option-table_head"
52	title={ __( 'This field must contain a non-negative number.', 'tablepress' ) }
53	isDragEnabled={ false }
54	value={ tableOptions.table_head }
55	onChange={ ( table_head ) => {
56	table_head = '' !== table_head ? parseInt( table_head, 10 ) : 0;
57	updateTableOptions( { table_head } );
58	} }
59	min={ 0 }
60	max={ 9 }
61	required={ true }
62	style={ {
63	width: '65px',
64	} }
65	/>
66	),
67	},
68	)
69	}
70	</HStack>
71	</label>
72	</td>
73	</tr>
74	<tr className="bottom-border">
75	<th className="column-1" scope="row">{ __( 'Table Footer', 'tablepress' ) }:</th>
76	<td className="column-2">
77	<label htmlFor="option-table_foot">
78	<HStack alignment="left">
79	{
80	createInterpolateElement(
81	__( 'The last <input /> rows are the table footer.', 'tablepress' ),
82	{
83	input: (
84	<NumberControl
85	size="compact"
86	id="option-table_foot"
87	title={ __( 'This field must contain a non-negative number.', 'tablepress' ) }
88	isDragEnabled={ false }
89	value={ tableOptions.table_foot }
90	onChange={ ( table_foot ) => {
91	table_foot = '' !== table_foot ? parseInt( table_foot, 10 ) : 0;
92	updateTableOptions( { table_foot } );
93	} }
94	min={ 0 }
95	max={ 9 }
96	required={ true }
97	style={ {
98	width: '65px',
99	} }
100	/>
101	),
102	},
103	)
104	}
105	</HStack>
106	</label>
107	</td>
108	</tr>
109	<tr className="top-border">
110	<th className="column-1" scope="row">{ __( 'Alternating Row Colors', 'tablepress' ) }:</th>
111	<td className="column-2">
112	<CheckboxControl
113	__nextHasNoMarginBottom
114	label={ __( 'The background colors of consecutive rows shall alternate.', 'tablepress' ) }
115	checked={ tableOptions.alternating_row_colors }
116	onChange={ ( alternating_row_colors ) => updateTableOptions( { alternating_row_colors } ) }
117	/>
118	</td>
119	</tr>
120	<tr className="bottom-border">
121	<th className="column-1" scope="row">{ __( 'Row Hover Highlighting', 'tablepress' ) }:</th>
122	<td className="column-2">
123	<CheckboxControl
124	__nextHasNoMarginBottom
125	label={ __( 'Highlight a row while the mouse cursor hovers above it by changing its background color.', 'tablepress' ) }
126	checked={ tableOptions.row_hover }
127	onChange={ ( row_hover ) => updateTableOptions( { row_hover } ) }
128	/>
129	</td>
130	</tr>
131	<tr className="top-border">
132	<th className="column-1" scope="row">{ __( 'Print Table Name', 'tablepress' ) }:</th>
133	<td className="column-2">
134	<CheckboxControl
135	__nextHasNoMarginBottom
136	className="checkbox-select-in-label"
137	label={
138	createInterpolateElement(
139	_x( 'Show the table name <select /> the table.', 'position (above or below)', 'tablepress' ),
140	{
141	select: (
142	<SelectControl
143	__nextHasNoMarginBottom
144	size="compact"
145	variant="minimal"
146	value={ tableOptions.print_name_position }
147	disabled={ ! tableOptions.print_name }
148	onChange={ ( print_name_position ) => updateTableOptions( { print_name_position } ) }
149	options={ [
150	{ label: __( 'above', 'tablepress' ), value: 'above' },
151	{ label: __( 'below', 'tablepress' ), value: 'below' },
152	] }
153	/>
154	),
155	},
156	)
157	}
158	checked={ tableOptions.print_name }
159	onChange={ ( print_name ) => updateTableOptions( { print_name } ) }
160	/>
161	</td>
162	</tr>
163	<tr className="bottom-border">
164	<th className="column-1" scope="row">{ __( 'Print Table Description', 'tablepress' ) }:</th>
165	<td className="column-2">
166	<CheckboxControl
167	__nextHasNoMarginBottom
168	className="checkbox-select-in-label"
169	label={
170	createInterpolateElement(
171	_x( 'Show the table description <select /> the table.', 'position (above or below)', 'tablepress' ),
172	{
173	select: (
174	<SelectControl
175	__nextHasNoMarginBottom
176	size="compact"
177	variant="minimal"
178	value={ tableOptions.print_description_position }
179	disabled={ ! tableOptions.print_description }
180	onChange={ ( print_description_position ) => updateTableOptions( { print_description_position } ) }
181	options={ [
182	{ label: __( 'above', 'tablepress' ), value: 'above' },
183	{ label: __( 'below', 'tablepress' ), value: 'below' },
184	] }
185	/>
186	),
187	},
188	)
189	}
190	checked={ tableOptions.print_description }
191	onChange={ ( print_description ) => updateTableOptions( { print_description } ) }
192	/>
193	</td>
194	</tr>
195	<tr className="top-border">
196	<th className="column-1 top-align" scope="row"><label htmlFor="option-extra_css_classes">{ __( 'Extra CSS Classes', 'tablepress' ) }:</label></th>
197	<td className="column-2">
198	<VStack>
199	<FormTokenField
200	__nextHasNoMarginBottom
201	__next40pxDefaultSize
202	id="option-extra_css_classes"
203	label=""
204	className="code"
205	title={ __( 'This field can only contain letters, numbers, spaces, hyphens (-), underscores (_), and colons (:).', 'tablepress' ) }
206	pattern="[A-Za-z0-9 _:\-]*"
207	onChange={ ( extra_css_classes ) => updateTableOptions( { extra_css_classes: extra_css_classes.join( ' ' ).trim().replace( /[^A-Za-z0-9 _:-]/g, '' ) } ) }
208	value={ '' !== tableOptions.extra_css_classes ? tableOptions.extra_css_classes.split( ' ' ) : [] }
209	tokenizeOnBlur={ true }
210	tokenizeOnSpace={ true }
211	__experimentalShowHowTo={ false }
212	/>
213	<span style={ {
214	fontSize: '12px',
215	color: '#757575',
216	} }>
217	{
218	createInterpolateElement(
219	__( 'Additional CSS classes for styling purposes can be entered here.', 'tablepress' ) + ' ' + __( 'This is NOT the place to enter <a>Custom CSS</a> code!', 'tablepress' ),
220	{
221	a: <a href={ tp.screenOptions.optionsUrl } />, // eslint-disable-line jsx-a11y/anchor-has-content
222	},
223	)
224	}
225	</span>
226	</VStack>
227	</td>
228	</tr>
229	</tbody>
230	</table>
231	</VStack>
232	);
233	};
234
235	initializeReactComponentInPortal(
236	'table-options',
237	'edit',
238	Section,
239	);
240