PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.4.0
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.4.0
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.4.0, at classes/Visualizer/Gutenberg/src/Components/Sidebar/RowCellSettings.js

483 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
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