PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.9.6
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.9.6
4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 3.10.4 All 148 releases
visualizer / classes / Visualizer / Gutenberg / src / Components / Sidebar / RowCellSettings.js

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

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