← All changes | classes/Visualizer/Gutenberg/src/Components/Sidebar/TableSettings.js +65 -187 3.10.4 → 3.2.1 View file →

		@@ -2,12 +2,9 @@
2	2	* WordPress dependencies
3	3	*/
4	4	const { __ } = wp.i18n;
5	5
6		-const {
7		- Component,
8		- Fragment
9		-} = wp.element;
	6	+const { Component } = wp.element;
10	7
11	8	const {
12	9	CheckboxControl,
13	10	PanelBody,
		@@ -23,11 +20,8 @@
23	20	render() {
24	21
25	22	const settings = this.props.chart['visualizer-settings'];
26	23
27		- const type = this.props.chart['visualizer-chart-type'];
28		- const library = this.props.chart['visualizer-chart-library'];
29		-
30	24	return (
31	25	<PanelBody
32	26	title={ __( 'Table Settings' ) }
33	27	initialOpen={ false }
		@@ -33,194 +27,78 @@
33	27	initialOpen={ false }
34	28	className="visualizer-advanced-panel"
35	29	>
36	30
37		- { ( 'DataTable' === library ) ? (
38		- <Fragment>
39		- <CheckboxControl
40		- label={ __( 'Enable Pagination' ) }
41		- help={ __( 'To enable paging through the data.' ) }
42		- checked={ 'true' === settings.paging_bool ? true : false }
43		- onChange={ e => {
44		- settings.paging_bool = 'true'; // eslint-disable-line camelcase
45		- if ( ! e ) {
46		- settings.paging_bool = 'false'; // eslint-disable-line camelcase
47		- }
48		- this.props.edit( settings );
49		- } }
50		- />
	31	+ <SelectControl
	32	+ label={ __( 'Enable Pagination' ) }
	33	+ help={ __( 'To enable paging through the data.' ) }
	34	+ value={ settings.page ? settings.page : 'disable' }
	35	+ options={ [
	36	+ { label: __( 'Enable' ), value: 'enable' },
	37	+ { label: __( 'Disable' ), value: 'disable' }
	38	+ ] }
	39	+ onChange={ e => {
	40	+ settings.page = e;
	41	+ this.props.edit( settings );
	42	+ } }
	43	+ />
51	44
52		- <TextControl
53		- label={ __( 'Number of rows per page' ) }
54		- help={ __( 'The number of rows in each page, when paging is enabled.' ) }
55		- type="number"
56		- value={ settings.pageLength_int }
57		- placeholder={ 10 }
58		- onChange={ e => {
59		- settings.pageLength_int = e; // eslint-disable-line camelcase
60		- this.props.edit( settings );
61		- } }
62		- />
	45	+ <TextControl
	46	+ label={ __( 'Number of rows per page' ) }
	47	+ help={ __( 'The number of rows in each page, when paging is enabled.' ) }
	48	+ type="number"
	49	+ value={ settings.pageSize }
	50	+ onChange={ e => {
	51	+ settings.pageSize = e;
	52	+ this.props.edit( settings );
	53	+ } }
	54	+ />
63	55
64		- <SelectControl
65		- label={ __( 'Pagination type' ) }
66		- help={ __( 'Determines what type of pagination options to show.' ) }
67		- value={ settings.pagingType }
68		- options={ [
69		- { label: __( 'Page number buttons only' ), value: 'numbers' },
70		- { label: __( '\'Previous\' and \'Next\' buttons only' ), value: 'simple' },
71		- { label: __( '\'Previous\' and \'Next\' buttons, plus page numbers' ), value: 'simple_numbers' },
72		- { label: __( '\'First\', \'Previous\', \'Next\' and \'Last\' buttons' ), value: 'full' },
73		- { label: __( '\'First\', \'Previous\', \'Next\' and \'Last\' buttons, plus page numbers' ), value: 'full_numbers' },
74		- { label: __( '\'First\' and \'Last\' buttons, plus page numbers' ), value: 'first_last_numbers' }
75		- ] }
76		- onChange={ e => {
77		- settings.pagingType = e;
78		- this.props.edit( settings );
79		- } }
80		- />
	56	+ <SelectControl
	57	+ label={ __( 'Disable Sort' ) }
	58	+ help={ __( 'To disable sorting on columns.' ) }
	59	+ value={ settings.sort ? settings.sort : 'enable' }
	60	+ options={ [
	61	+ { label: __( 'Enable' ), value: 'enable' },
	62	+ { label: __( 'Disable' ), value: 'disable' }
	63	+ ] }
	64	+ onChange={ e => {
	65	+ settings.sort = e;
	66	+ this.props.edit( settings );
	67	+ } }
	68	+ />
81	69
82		- <CheckboxControl
83		- label={ __( 'Scroll Collapse' ) }
84		- help={ __( 'Allow the table to reduce in height when a limited number of rows are shown.' ) }
85		- checked={ 'true' === settings.scrollCollapse_bool ? true : false }
86		- onChange={ e => {
87		- settings.scrollCollapse_bool = 'true'; // eslint-disable-line camelcase
88		- if ( ! e ) {
89		- settings.scrollCollapse_bool = 'false'; // eslint-disable-line camelcase
90		- }
91		- this.props.edit( settings );
92		- } }
93		- />
	70	+ <TextControl
	71	+ label={ __( 'Freeze Columns' ) }
	72	+ help={ __( 'The number of columns from the left that will be frozen.' ) }
	73	+ type="number"
	74	+ value={ settings.frozenColumns }
	75	+ onChange={ e => {
	76	+ settings.frozenColumns = e;
	77	+ this.props.edit( settings );
	78	+ } }
	79	+ />
94	80
95		- { ( 'true' === settings.scrollCollapse_bool ) && (
96		- <TextControl
97		- label={ __( 'Vertical Height' ) }
98		- help={ __( 'Vertical scrolling will constrain the table to the given height.' ) }
99		- type="number"
100		- value={ settings.scrollY_int }
101		- placeholder={ 300 }
102		- onChange={ e => {
103		- settings.scrollY_int = e; // eslint-disable-line camelcase
104		- this.props.edit( settings );
105		- } }
106		- />
107		- ) }
	81	+ <CheckboxControl
	82	+ label={ __( 'Allow HTML' ) }
	83	+ help={ __( 'If enabled, formatted values of cells that include HTML tags will be rendered as HTML.' ) }
	84	+ checked={ Number( settings.allowHtml ) }
	85	+ onChange={ e => {
	86	+ settings.allowHtml = ! Number( settings.allowHtml );
	87	+ this.props.edit( settings );
	88	+ } }
	89	+ />
108	90
109		- <CheckboxControl
110		- label={ __( 'Disable Sort' ) }
111		- help={ __( 'To disable sorting on columns.' ) }
112		- checked={ 'false' === settings.ordering_bool ? true : false }
113		- onChange={ e => {
114		- settings.ordering_bool = 'true'; // eslint-disable-line camelcase
115		- if ( e ) {
116		- settings.ordering_bool = 'false'; // eslint-disable-line camelcase
117		- }
118		- this.props.edit( settings );
119		- } }
120		- />
	91	+ <CheckboxControl
	92	+ label={ __( 'Right to Left table' ) }
	93	+ help={ __( 'Adds basic support for right-to-left languages.' ) }
	94	+ checked={ Number( settings.rtlTable ) }
	95	+ onChange={ e => {
	96	+ settings.rtlTable = ! Number( settings.rtlTable );
	97	+ this.props.edit( settings );
	98	+ } }
	99	+ />
121	100
122		- <CheckboxControl
123		- label={ __( 'Freeze Header/Footer' ) }
124		- help={ __( 'Freeze the header and footer.' ) }
125		- checked={ 'true' === settings.fixedHeader_bool ? true : false }
126		- onChange={ e => {
127		- settings.fixedHeader_bool = 'true'; // eslint-disable-line camelcase
128		- if ( ! e ) {
129		- settings.fixedHeader_bool = 'false'; // eslint-disable-line camelcase
130		- }
131		- this.props.edit( settings );
132		- } }
133		- />
134		-
135		- <CheckboxControl
136		- label={ __( 'Responsive' ) }
137		- help={ __( 'Enable the table to be responsive.' ) }
138		- checked={ 'true' === settings.responsive_bool ? true : false }
139		- onChange={ e => {
140		- settings.responsive_bool = 'true'; // eslint-disable-line camelcase
141		- if ( ! e ) {
142		- settings.responsive_bool = 'false'; // eslint-disable-line camelcase
143		- }
144		- this.props.edit( settings );
145		- } }
146		- />
147		- </Fragment>
148		- ) : (
149		- <Fragment>
150		- <SelectControl
151		- label={ __( 'Enable Pagination' ) }
152		- help={ __( 'To enable paging through the data.' ) }
153		- value={ settings.pagination ? settings.pagination : 0 }
154		- options={ [
155		- { label: __( 'Enable' ), value: 1 },
156		- { label: __( 'Disable' ), value: 0 }
157		- ] }
158		- onChange={ e => {
159		- settings.pagination = e;
160		- this.props.edit( settings );
161		- } }
162		- />
163		-
164		- { '1' === settings.pagination && (
165		- <TextControl
166		- label={ __( 'Number of rows per page' ) }
167		- help={ __( 'The number of rows in each page, when paging is enabled.' ) }
168		- type="number"
169		- value={ settings.pageSize }
170		- onChange={ e => {
171		- settings.pageSize = e;
172		- this.props.edit( settings );
173		- } }
174		- />
175		- ) }
176		-
177		- <SelectControl
178		- label={ __( 'Disable Sort' ) }
179		- help={ __( 'To disable sorting on columns.' ) }
180		- value={ settings.sort ? settings.sort : 'enable' }
181		- options={ [
182		- { label: __( 'Enable' ), value: 'enable' },
183		- { label: __( 'Disable' ), value: 'disable' }
184		- ] }
185		- onChange={ e => {
186		- settings.sort = e;
187		- this.props.edit( settings );
188		- } }
189		- />
190		-
191		- <TextControl
192		- label={ __( 'Freeze Columns' ) }
193		- help={ __( 'The number of columns from the left that will be frozen.' ) }
194		- type="number"
195		- value={ settings.frozenColumns }
196		- onChange={ e => {
197		- settings.frozenColumns = e;
198		- this.props.edit( settings );
199		- } }
200		- />
201		-
202		- <CheckboxControl
203		- label={ __( 'Allow HTML' ) }
204		- help={ __( 'If enabled, formatted values of cells that include HTML tags will be rendered as HTML.' ) }
205		- checked={ Number( settings.allowHtml ) }
206		- onChange={ e => {
207		- settings.allowHtml = ! Number( settings.allowHtml );
208		- this.props.edit( settings );
209		- } }
210		- />
211		-
212		- <CheckboxControl
213		- label={ __( 'Right to Left table' ) }
214		- help={ __( 'Adds basic support for right-to-left languages.' ) }
215		- checked={ Number( settings.rtlTable ) }
216		- onChange={ e => {
217		- settings.rtlTable = ! Number( settings.rtlTable );
218		- this.props.edit( settings );
219		- } }
220		- />
221		- </Fragment>
222		- ) }
223	101	</PanelBody>
224	102	);
225	103	}
226	104	}