Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.3.1

Visualizer – Tables & Charts Manager with Built-in AI Generator v3.3.1

visualizer / classes / Visualizer / Gutenberg / src / Components / Sidebar / RowCellSettings.js

RowCellSettings.js in Visualizer – Tables & Charts Manager with Built-in AI Generator 3.3.1, at classes/Visualizer/Gutenberg/src/Components/Sidebar/RowCellSettings.js

483 lines 11.7 KB

Raw Download Zip

1	/**
2	* WordPress dependencies
3	*/
4	const { __ } = wp.i18n;
5
6	const {
7	Component,
8	Fragment
9	} = wp.element;
10
11	const { ColorPalette } = wp.editor;
12
13	const {
14	BaseControl,
15	PanelBody,
16	TextControl
17	} = wp.components;
18
19	class RowCellSettings extends Component {
20	constructor() {
21	super( ...arguments );
22	}
23
24	render() {
25
26	const settings = this.props.chart['visualizer-settings'];
27
28	const type = this.props.chart['visualizer-chart-type'];
29
30	return (
31	<PanelBody
32	title={ __( 'Row/Cell Settings' ) }
33	initialOpen={ false }
34	className="visualizer-advanced-panel"
35	>
36
37	{ ( 'dataTable' === type ) ? (
38	<Fragment>
39
40	<PanelBody
41	title={ __( 'Odd Table Row' ) }
42	className="visualizer-inner-sections"
43	initialOpen={ false }
44	>
45
46	<BaseControl
47	label={ __( 'Background Color' ) }
48	>
49	<ColorPalette
50	value={ settings.customcss.oddTableRow['background-color'] }
51	onChange={ e => {
52	settings.customcss.oddTableRow['background-color'] = e;
53	this.props.edit( settings );
54	} }
55	/>
56	</BaseControl>
57
58	<BaseControl
59	label={ __( 'Color' ) }
60	>
61	<ColorPalette
62	value={ settings.customcss.oddTableRow.color }
63	onChange={ e => {
64	settings.customcss.oddTableRow.color = e;
65	this.props.edit( settings );
66	} }
67	/>
68	</BaseControl>
69
70	<TextControl
71	label={ __( 'Text Orientation' ) }
72	help={ __( 'In degrees.' ) }
73	type="number"
74	value={ settings.customcss.oddTableRow.transform }
75	onChange={ e => {
76	settings.customcss.oddTableRow.transform = e;
77	this.props.edit( settings );
78	} }
79	/>
80
81	</PanelBody>
82
83	<PanelBody
84	title={ __( 'Even Table Row' ) }
85	className="visualizer-inner-sections"
86	initialOpen={ false }
87	>
88
89	<BaseControl
90	label={ __( 'Background Color' ) }
91	>
92	<ColorPalette
93	value={ settings.customcss.evenTableRow['background-color'] }
94	onChange={ e => {
95	settings.customcss.evenTableRow['background-color'] = e;
96	this.props.edit( settings );
97	} }
98	/>
99	</BaseControl>
100
101	<BaseControl
102	label={ __( 'Color' ) }
103	>
104	<ColorPalette
105	value={ settings.customcss.evenTableRow.color }
106	onChange={ e => {
107	settings.customcss.evenTableRow.color = e;
108	this.props.edit( settings );
109	} }
110	/>
111	</BaseControl>
112
113	<TextControl
114	label={ __( 'Text Orientation' ) }
115	help={ __( 'In degrees.' ) }
116	type="number"
117	value={ settings.customcss.evenTableRow.transform }
118	onChange={ e => {
119	settings.customcss.evenTableRow.transform = e;
120	this.props.edit( settings );
121	} }
122	/>
123
124	</PanelBody>
125
126	<PanelBody
127	title={ __( 'Table Cell' ) }
128	className="visualizer-inner-sections"
129	initialOpen={ false }
130	>
131
132	<BaseControl
133	label={ __( 'Background Color' ) }
134	>
135	<ColorPalette
136	value={ settings.customcss.tableCell['background-color'] }
137	onChange={ e => {
138	settings.customcss.tableCell['background-color'] = e;
139	this.props.edit( settings );
140	} }
141	/>
142	</BaseControl>
143
144	<BaseControl
145	label={ __( 'Color' ) }
146	>
147	<ColorPalette
148	value={ settings.customcss.tableCell.color }
149	onChange={ e => {
150	settings.customcss.tableCell.color = e;
151	this.props.edit( settings );
152	} }
153	/>
154	</BaseControl>
155
156	<TextControl
157	label={ __( 'Text Orientation' ) }
158	help={ __( 'In degrees.' ) }
159	type="number"
160	value={ settings.customcss.tableCell.transform }
161	onChange={ e => {
162	settings.customcss.tableCell.transform = e;
163	this.props.edit( settings );
164	} }
165	/>
166
167	</PanelBody>
168
169	</Fragment>
170	) : (
171	<Fragment>
172
173	<PanelBody
174	title={ __( 'Header Row' ) }
175	className="visualizer-inner-sections"
176	initialOpen={ false }
177	>
178
179	<BaseControl
180	label={ __( 'Background Color' ) }
181	>
182	<ColorPalette
183	value={ settings.customcss.headerRow['background-color'] }
184	onChange={ e => {
185	settings.customcss.headerRow['background-color'] = e;
186	this.props.edit( settings );
187	} }
188	/>
189	</BaseControl>
190
191	<BaseControl
192	label={ __( 'Color' ) }
193	>
194	<ColorPalette
195	value={ settings.customcss.headerRow.color }
196	onChange={ e => {
197	settings.customcss.headerRow.color = e;
198	this.props.edit( settings );
199	} }
200	/>
201	</BaseControl>
202
203	<TextControl
204	label={ __( 'Text Orientation' ) }
205	help={ __( 'In degrees.' ) }
206	type="number"
207	value={ settings.customcss.headerRow.transform }
208	onChange={ e => {
209	settings.customcss.headerRow.transform = e;
210	this.props.edit( settings );
211	} }
212	/>
213
214	</PanelBody>
215
216	<PanelBody
217	title={ __( 'Table Row' ) }
218	className="visualizer-inner-sections"
219	initialOpen={ false }
220	>
221
222	<BaseControl
223	label={ __( 'Background Color' ) }
224	>
225	<ColorPalette
226	value={ settings.customcss.tableRow['background-color'] }
227	onChange={ e => {
228	settings.customcss.tableRow['background-color'] = e;
229	this.props.edit( settings );
230	} }
231	/>
232	</BaseControl>
233
234	<BaseControl
235	label={ __( 'Color' ) }
236	>
237	<ColorPalette
238	value={ settings.customcss.tableRow.color }
239	onChange={ e => {
240	settings.customcss.tableRow.color = e;
241	this.props.edit( settings );
242	} }
243	/>
244	</BaseControl>
245
246	<TextControl
247	label={ __( 'Text Orientation' ) }
248	help={ __( 'In degrees.' ) }
249	type="number"
250	value={ settings.customcss.tableRow.transform }
251	onChange={ e => {
252	settings.customcss.tableRow.transform = e;
253	this.props.edit( settings );
254	} }
255	/>
256
257	</PanelBody>
258
259	<PanelBody
260	title={ __( 'Odd Table Row' ) }
261	className="visualizer-inner-sections"
262	initialOpen={ false }
263	>
264
265	<BaseControl
266	label={ __( 'Background Color' ) }
267	>
268	<ColorPalette
269	value={ settings.customcss.oddTableRow['background-color'] }
270	onChange={ e => {
271	settings.customcss.oddTableRow['background-color'] = e;
272	this.props.edit( settings );
273	} }
274	/>
275	</BaseControl>
276
277	<BaseControl
278	label={ __( 'Color' ) }
279	>
280	<ColorPalette
281	value={ settings.customcss.oddTableRow.color }
282	onChange={ e => {
283	settings.customcss.oddTableRow.color = e;
284	this.props.edit( settings );
285	} }
286	/>
287	</BaseControl>
288
289	<TextControl
290	label={ __( 'Text Orientation' ) }
291	help={ __( 'In degrees.' ) }
292	type="number"
293	value={ settings.customcss.oddTableRow.transform }
294	onChange={ e => {
295	settings.customcss.oddTableRow.transform = e;
296	this.props.edit( settings );
297	} }
298	/>
299
300	</PanelBody>
301
302	<PanelBody
303	title={ __( 'Selected Table Row' ) }
304	className="visualizer-inner-sections"
305	initialOpen={ false }
306	>
307
308	<BaseControl
309	label={ __( 'Background Color' ) }
310	>
311	<ColorPalette
312	value={ settings.customcss.selectedTableRow['background-color'] }
313	onChange={ e => {
314	settings.customcss.selectedTableRow['background-color'] = e;
315	this.props.edit( settings );
316	} }
317	/>
318	</BaseControl>
319
320	<BaseControl
321	label={ __( 'Color' ) }
322	>
323	<ColorPalette
324	value={ settings.customcss.selectedTableRow.color }
325	onChange={ e => {
326	settings.customcss.selectedTableRow.color = e;
327	this.props.edit( settings );
328	} }
329	/>
330	</BaseControl>
331
332	<TextControl
333	label={ __( 'Text Orientation' ) }
334	help={ __( 'In degrees.' ) }
335	type="number"
336	value={ settings.customcss.selectedTableRow.transform }
337	onChange={ e => {
338	settings.customcss.selectedTableRow.transform = e;
339	this.props.edit( settings );
340	} }
341	/>
342
343	</PanelBody>
344
345	<PanelBody
346	title={ __( 'Hover Table Row' ) }
347	className="visualizer-inner-sections"
348	initialOpen={ false }
349	>
350
351	<BaseControl
352	label={ __( 'Background Color' ) }
353	>
354	<ColorPalette
355	value={ settings.customcss.hoverTableRow['background-color'] }
356	onChange={ e => {
357	settings.customcss.hoverTableRow['background-color'] = e;
358	this.props.edit( settings );
359	} }
360	/>
361	</BaseControl>
362
363	<BaseControl
364	label={ __( 'Color' ) }
365	>
366	<ColorPalette
367	value={ settings.customcss.hoverTableRow.color }
368	onChange={ e => {
369	settings.customcss.hoverTableRow.color = e;
370	this.props.edit( settings );
371	} }
372	/>
373	</BaseControl>
374
375	<TextControl
376	label={ __( 'Text Orientation' ) }
377	help={ __( 'In degrees.' ) }
378	type="number"
379	value={ settings.customcss.hoverTableRow.transform }
380	onChange={ e => {
381	settings.customcss.hoverTableRow.transform = e;
382	this.props.edit( settings );
383	} }
384	/>
385
386	</PanelBody>
387
388	<PanelBody
389	title={ __( 'Header Cell' ) }
390	className="visualizer-inner-sections"
391	initialOpen={ false }
392	>
393
394	<BaseControl
395	label={ __( 'Background Color' ) }
396	>
397	<ColorPalette
398	value={ settings.customcss.headerCell['background-color'] }
399	onChange={ e => {
400	settings.customcss.headerCell['background-color'] = e;
401	this.props.edit( settings );
402	} }
403	/>
404	</BaseControl>
405
406	<BaseControl
407	label={ __( 'Color' ) }
408	>
409	<ColorPalette
410	value={ settings.customcss.headerCell.color }
411	onChange={ e => {
412	settings.customcss.headerCell.color = e;
413	this.props.edit( settings );
414	} }
415	/>
416	</BaseControl>
417
418	<TextControl
419	label={ __( 'Text Orientation' ) }
420	help={ __( 'In degrees.' ) }
421	type="number"
422	value={ settings.customcss.headerCell.transform }
423	onChange={ e => {
424	settings.customcss.headerCell.transform = e;
425	this.props.edit( settings );
426	} }
427	/>
428
429	</PanelBody>
430
431	<PanelBody
432	title={ __( 'Table Cell' ) }
433	className="visualizer-inner-sections"
434	initialOpen={ false }
435	>
436
437	<BaseControl
438	label={ __( 'Background Color' ) }
439	>
440	<ColorPalette
441	value={ settings.customcss.tableCell['background-color'] }
442	onChange={ e => {
443	settings.customcss.tableCell['background-color'] = e;
444	this.props.edit( settings );
445	} }
446	/>
447	</BaseControl>
448
449	<BaseControl
450	label={ __( 'Color' ) }
451	>
452	<ColorPalette
453	value={ settings.customcss.tableCell.color }
454	onChange={ e => {
455	settings.customcss.tableCell.color = e;
456	this.props.edit( settings );
457	} }
458	/>
459	</BaseControl>
460
461	<TextControl
462	label={ __( 'Text Orientation' ) }
463	help={ __( 'In degrees.' ) }
464	type="number"
465	value={ settings.customcss.tableCell.transform }
466	onChange={ e => {
467	settings.customcss.tableCell.transform = e;
468	this.props.edit( settings );
469	} }
470	/>
471
472	</PanelBody>
473
474	</Fragment>
475	) }
476
477	</PanelBody>
478	);
479	}
480	}
481
482	export default RowCellSettings;
483