← All changes | classes/Visualizer/Gutenberg/src/Components/Sidebar/TableSettings.js +184 -65 3.1.0 → 3.4.4 View file →

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