← All changes | classes/Visualizer/Gutenberg/src/Components/Sidebar/TableSettings.js +185 -65 3.1.1 → 3.4.10 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,11 @@
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	+ const library = this.props.chart['visualizer-chart-library'];
	29	+
24	30	return (
25	31	<PanelBody
26	32	title={ __( 'Table Settings' ) }
27	33	initialOpen={ false }
		@@ -27,78 +33,192 @@
27	33	initialOpen={ false }
28	34	className="visualizer-advanced-panel"
29	35	>
30	36
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		- />
	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	+ />
44	51
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		- />
	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	+ />
55	63
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		- />
	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	+ />
69	81
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		- />
	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	+ />
80	94
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		- />
	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	+ ) }
90	108
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		- />
	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	+ />
100	121
	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.page ? settings.page : 'disable' }
	154	+ options={ [
	155	+ { label: __( 'Enable' ), value: 'enable' },
	156	+ { label: __( 'Disable' ), value: 'disable' }
	157	+ ] }
	158	+ onChange={ e => {
	159	+ settings.page = e;
	160	+ this.props.edit( settings );
	161	+ } }
	162	+ />
	163	+
	164	+ <TextControl
	165	+ label={ __( 'Number of rows per page' ) }
	166	+ help={ __( 'The number of rows in each page, when paging is enabled.' ) }
	167	+ type="number"
	168	+ value={ settings.pageSize }
	169	+ onChange={ e => {
	170	+ settings.pageSize = e;
	171	+ this.props.edit( settings );
	172	+ } }
	173	+ />
	174	+
	175	+ <SelectControl
	176	+ label={ __( 'Disable Sort' ) }
	177	+ help={ __( 'To disable sorting on columns.' ) }
	178	+ value={ settings.sort ? settings.sort : 'enable' }
	179	+ options={ [
	180	+ { label: __( 'Enable' ), value: 'enable' },
	181	+ { label: __( 'Disable' ), value: 'disable' }
	182	+ ] }
	183	+ onChange={ e => {
	184	+ settings.sort = e;
	185	+ this.props.edit( settings );
	186	+ } }
	187	+ />
	188	+
	189	+ <TextControl
	190	+ label={ __( 'Freeze Columns' ) }
	191	+ help={ __( 'The number of columns from the left that will be frozen.' ) }
	192	+ type="number"
	193	+ value={ settings.frozenColumns }
	194	+ onChange={ e => {
	195	+ settings.frozenColumns = e;
	196	+ this.props.edit( settings );
	197	+ } }
	198	+ />
	199	+
	200	+ <CheckboxControl
	201	+ label={ __( 'Allow HTML' ) }
	202	+ help={ __( 'If enabled, formatted values of cells that include HTML tags will be rendered as HTML.' ) }
	203	+ checked={ Number( settings.allowHtml ) }
	204	+ onChange={ e => {
	205	+ settings.allowHtml = ! Number( settings.allowHtml );
	206	+ this.props.edit( settings );
	207	+ } }
	208	+ />
	209	+
	210	+ <CheckboxControl
	211	+ label={ __( 'Right to Left table' ) }
	212	+ help={ __( 'Adds basic support for right-to-left languages.' ) }
	213	+ checked={ Number( settings.rtlTable ) }
	214	+ onChange={ e => {
	215	+ settings.rtlTable = ! Number( settings.rtlTable );
	216	+ this.props.edit( settings );
	217	+ } }
	218	+ />
	219	+ </Fragment>
	220	+ ) }
101	221	</PanelBody>
102	222	);
103	223	}
104	224	}