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

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

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

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

339 lines 7.7 KB

Raw Download Zip

1	/**
2	* WordPress dependencies
3	*/
4	const { __ } = wp.i18n;
5
6	const { Component } = wp.element;
7
8	const { ColorPalette } = wp.editor;
9
10	const {
11	BaseControl,
12	PanelBody,
13	TextControl
14	} = wp.components;
15
16	class RowCellSettings extends Component {
17	constructor() {
18	super( ...arguments );
19	}
20
21	render() {
22
23	const settings = this.props.chart['visualizer-settings'];
24
25	return (
26	<PanelBody
27	title={ __( 'Row/Cell Settings' ) }
28	initialOpen={ false }
29	className="visualizer-advanced-panel"
30	>
31
32	<PanelBody
33	title={ __( 'Header Row' ) }
34	className="visualizer-inner-sections"
35	initialOpen={ false }
36	>
37
38	<BaseControl
39	label={ __( 'Background Color' ) }
40	>
41	<ColorPalette
42	value={ settings.customcss.headerRow['background-color'] }
43	onChange={ e => {
44	settings.customcss.headerRow['background-color'] = e;
45	this.props.edit( settings );
46	} }
47	/>
48	</BaseControl>
49
50	<BaseControl
51	label={ __( 'Color' ) }
52	>
53	<ColorPalette
54	value={ settings.customcss.headerRow.color }
55	onChange={ e => {
56	settings.customcss.headerRow.color = e;
57	this.props.edit( settings );
58	} }
59	/>
60	</BaseControl>
61
62	<TextControl
63	label={ __( 'Text Orientation' ) }
64	help={ __( 'In degrees.' ) }
65	type="number"
66	value={ settings.customcss.headerRow.transform }
67	onChange={ e => {
68	settings.customcss.headerRow.transform = e;
69	this.props.edit( settings );
70	} }
71	/>
72
73	</PanelBody>
74
75	<PanelBody
76	title={ __( 'Table Row' ) }
77	className="visualizer-inner-sections"
78	initialOpen={ false }
79	>
80
81	<BaseControl
82	label={ __( 'Background Color' ) }
83	>
84	<ColorPalette
85	value={ settings.customcss.tableRow['background-color'] }
86	onChange={ e => {
87	settings.customcss.tableRow['background-color'] = e;
88	this.props.edit( settings );
89	} }
90	/>
91	</BaseControl>
92
93	<BaseControl
94	label={ __( 'Color' ) }
95	>
96	<ColorPalette
97	value={ settings.customcss.tableRow.color }
98	onChange={ e => {
99	settings.customcss.tableRow.color = e;
100	this.props.edit( settings );
101	} }
102	/>
103	</BaseControl>
104
105	<TextControl
106	label={ __( 'Text Orientation' ) }
107	help={ __( 'In degrees.' ) }
108	type="number"
109	value={ settings.customcss.tableRow.transform }
110	onChange={ e => {
111	settings.customcss.tableRow.transform = e;
112	this.props.edit( settings );
113	} }
114	/>
115
116	</PanelBody>
117
118	<PanelBody
119	title={ __( 'Odd Table Row' ) }
120	className="visualizer-inner-sections"
121	initialOpen={ false }
122	>
123
124	<BaseControl
125	label={ __( 'Background Color' ) }
126	>
127	<ColorPalette
128	value={ settings.customcss.oddTableRow['background-color'] }
129	onChange={ e => {
130	settings.customcss.oddTableRow['background-color'] = e;
131	this.props.edit( settings );
132	} }
133	/>
134	</BaseControl>
135
136	<BaseControl
137	label={ __( 'Color' ) }
138	>
139	<ColorPalette
140	value={ settings.customcss.oddTableRow.color }
141	onChange={ e => {
142	settings.customcss.oddTableRow.color = e;
143	this.props.edit( settings );
144	} }
145	/>
146	</BaseControl>
147
148	<TextControl
149	label={ __( 'Text Orientation' ) }
150	help={ __( 'In degrees.' ) }
151	type="number"
152	value={ settings.customcss.oddTableRow.transform }
153	onChange={ e => {
154	settings.customcss.oddTableRow.transform = e;
155	this.props.edit( settings );
156	} }
157	/>
158
159	</PanelBody>
160
161	<PanelBody
162	title={ __( 'Selected Table Row' ) }
163	className="visualizer-inner-sections"
164	initialOpen={ false }
165	>
166
167	<BaseControl
168	label={ __( 'Background Color' ) }
169	>
170	<ColorPalette
171	value={ settings.customcss.selectedTableRow['background-color'] }
172	onChange={ e => {
173	settings.customcss.selectedTableRow['background-color'] = e;
174	this.props.edit( settings );
175	} }
176	/>
177	</BaseControl>
178
179	<BaseControl
180	label={ __( 'Color' ) }
181	>
182	<ColorPalette
183	value={ settings.customcss.selectedTableRow.color }
184	onChange={ e => {
185	settings.customcss.selectedTableRow.color = e;
186	this.props.edit( settings );
187	} }
188	/>
189	</BaseControl>
190
191	<TextControl
192	label={ __( 'Text Orientation' ) }
193	help={ __( 'In degrees.' ) }
194	type="number"
195	value={ settings.customcss.selectedTableRow.transform }
196	onChange={ e => {
197	settings.customcss.selectedTableRow.transform = e;
198	this.props.edit( settings );
199	} }
200	/>
201
202	</PanelBody>
203
204	<PanelBody
205	title={ __( 'Hover Table Row' ) }
206	className="visualizer-inner-sections"
207	initialOpen={ false }
208	>
209
210	<BaseControl
211	label={ __( 'Background Color' ) }
212	>
213	<ColorPalette
214	value={ settings.customcss.hoverTableRow['background-color'] }
215	onChange={ e => {
216	settings.customcss.hoverTableRow['background-color'] = e;
217	this.props.edit( settings );
218	} }
219	/>
220	</BaseControl>
221
222	<BaseControl
223	label={ __( 'Color' ) }
224	>
225	<ColorPalette
226	value={ settings.customcss.hoverTableRow.color }
227	onChange={ e => {
228	settings.customcss.hoverTableRow.color = e;
229	this.props.edit( settings );
230	} }
231	/>
232	</BaseControl>
233
234	<TextControl
235	label={ __( 'Text Orientation' ) }
236	help={ __( 'In degrees.' ) }
237	type="number"
238	value={ settings.customcss.hoverTableRow.transform }
239	onChange={ e => {
240	settings.customcss.hoverTableRow.transform = e;
241	this.props.edit( settings );
242	} }
243	/>
244
245	</PanelBody>
246
247	<PanelBody
248	title={ __( 'Header Cell' ) }
249	className="visualizer-inner-sections"
250	initialOpen={ false }
251	>
252
253	<BaseControl
254	label={ __( 'Background Color' ) }
255	>
256	<ColorPalette
257	value={ settings.customcss.headerCell['background-color'] }
258	onChange={ e => {
259	settings.customcss.headerCell['background-color'] = e;
260	this.props.edit( settings );
261	} }
262	/>
263	</BaseControl>
264
265	<BaseControl
266	label={ __( 'Color' ) }
267	>
268	<ColorPalette
269	value={ settings.customcss.headerCell.color }
270	onChange={ e => {
271	settings.customcss.headerCell.color = e;
272	this.props.edit( settings );
273	} }
274	/>
275	</BaseControl>
276
277	<TextControl
278	label={ __( 'Text Orientation' ) }
279	help={ __( 'In degrees.' ) }
280	type="number"
281	value={ settings.customcss.headerCell.transform }
282	onChange={ e => {
283	settings.customcss.headerCell.transform = e;
284	this.props.edit( settings );
285	} }
286	/>
287
288	</PanelBody>
289
290	<PanelBody
291	title={ __( 'Table Cell' ) }
292	className="visualizer-inner-sections"
293	initialOpen={ false }
294	>
295
296	<BaseControl
297	label={ __( 'Background Color' ) }
298	>
299	<ColorPalette
300	value={ settings.customcss.tableCell['background-color'] }
301	onChange={ e => {
302	settings.customcss.tableCell['background-color'] = e;
303	this.props.edit( settings );
304	} }
305	/>
306	</BaseControl>
307
308	<BaseControl
309	label={ __( 'Color' ) }
310	>
311	<ColorPalette
312	value={ settings.customcss.tableCell.color }
313	onChange={ e => {
314	settings.customcss.tableCell.color = e;
315	this.props.edit( settings );
316	} }
317	/>
318	</BaseControl>
319
320	<TextControl
321	label={ __( 'Text Orientation' ) }
322	help={ __( 'In degrees.' ) }
323	type="number"
324	value={ settings.customcss.tableCell.transform }
325	onChange={ e => {
326	settings.customcss.tableCell.transform = e;
327	this.props.edit( settings );
328	} }
329	/>
330
331	</PanelBody>
332
333	</PanelBody>
334	);
335	}
336	}
337
338	export default RowCellSettings;
339