← All changes | classes/Visualizer/Gutenberg/src/Components/Sidebar/LayoutAndChartArea.js +149 -149 3.1.1 → 3.7.9 View file →

		@@ -3,191 +3,191 @@
3	3	*/
4	4	const { __ } = wp.i18n;
5	5
6	6	const {
7		- Component,
8		- Fragment
	7	+ Component,
	8	+ Fragment
9	9	} = wp.element;
10	10
11		-const { ColorPalette } = wp.editor;
	11	+const { ColorPalette } = wp.blockEditor || wp.editor;
12	12
13	13	const {
14		- BaseControl,
15		- CheckboxControl,
16		- PanelBody,
17		- SelectControl,
18		- TextControl
	14	+ BaseControl,
	15	+ CheckboxControl,
	16	+ PanelBody,
	17	+ SelectControl,
	18	+ TextControl
19	19	} = wp.components;
20	20
21	21	class LayoutAndChartArea extends Component {
22		- constructor() {
23		- super( ...arguments );
24		- }
	22	+ constructor() {
	23	+ super( ...arguments );
	24	+ }
25	25
26		- render() {
	26	+ render() {
27	27
28		- const type = this.props.chart['visualizer-chart-type'];
	28	+ const type = this.props.chart['visualizer-chart-type'];
29	29
30		- const settings = this.props.chart['visualizer-settings'];
	30	+ const settings = this.props.chart['visualizer-settings'];
31	31
32		- return (
33		- <PanelBody
34		- title={ __( 'Layout And Chart Area' ) }
35		- initialOpen={ false }
36		- className="visualizer-advanced-panel"
37		- >
	32	+ return (
	33	+ <PanelBody
	34	+ title={ __( 'Layout And Chart Area' ) }
	35	+ initialOpen={ false }
	36	+ className="visualizer-advanced-panel"
	37	+ >
38	38
39		- <PanelBody
40		- title={ __( 'Layout' ) }
41		- className="visualizer-inner-sections"
42		- initialOpen={ false }
43		- >
	39	+ <PanelBody
	40	+ title={ __( 'Layout' ) }
	41	+ className="visualizer-inner-sections"
	42	+ initialOpen={ false }
	43	+ >
44	44
45		- <TextControl
46		- label={ __( 'Width of Chart' ) }
47		- help={ __( 'Determines the total width of the chart.' ) }
48		- value={ settings.width }
49		- onChange={ e => {
50		- settings.width = e;
51		- this.props.edit( settings );
52		- } }
53		- />
	45	+ <TextControl
	46	+ label={ __( 'Width of Chart' ) }
	47	+ help={ __( 'Determines the total width of the chart.' ) }
	48	+ value={ settings.width }
	49	+ onChange={ e => {
	50	+ settings.width = e;
	51	+ this.props.edit( settings );
	52	+ } }
	53	+ />
54	54
55		- <TextControl
56		- label={ __( 'Height of Chart' ) }
57		- help={ __( 'Determines the total height of the chart.' ) }
58		- value={ settings.height }
59		- onChange={ e => {
60		- settings.height = e;
61		- this.props.edit( settings );
62		- } }
63		- />
	55	+ <TextControl
	56	+ label={ __( 'Height of Chart' ) }
	57	+ help={ __( 'Determines the total height of the chart.' ) }
	58	+ value={ settings.height }
	59	+ onChange={ e => {
	60	+ settings.height = e;
	61	+ this.props.edit( settings );
	62	+ } }
	63	+ />
64	64
65		- { ( 0 <= [ 'geo' ].indexOf( type ) ) && (
	65	+ { ( 0 <= [ 'geo' ].indexOf( type ) ) && (
66	66
67		- <SelectControl
68		- label={ __( 'Keep Aspect Ratio' ) }
69		- help={ __( 'If yes, the map will be drawn at the largest size that can fit inside the chart area at its natural aspect ratio. If only one of the width and height options is specified, the other one will be calculated according to the aspect ratio. If no, the map will be stretched to the exact size of the chart as specified by the width and height options.' ) }
70		- value={ settings.keepAspectRatio ? settings.isStacked : '1' }
71		- options={ [
72		- { label: __( 'Yes' ), value: '1' },
73		- { label: __( 'No' ), value: '0' }
74		- ] }
75		- onChange={ e => {
76		- settings.keepAspectRatio = e;
77		- this.props.edit( settings );
78		- } }
79		- />
	67	+ <SelectControl
	68	+ label={ __( 'Keep Aspect Ratio' ) }
	69	+ help={ __( 'If yes, the map will be drawn at the largest size that can fit inside the chart area at its natural aspect ratio. If only one of the width and height options is specified, the other one will be calculated according to the aspect ratio. If no, the map will be stretched to the exact size of the chart as specified by the width and height options.' ) }
	70	+ value={ settings.keepAspectRatio ? settings.isStacked : '1' }
	71	+ options={ [
	72	+ { label: __( 'Yes' ), value: '1' },
	73	+ { label: __( 'No' ), value: '0' }
	74	+ ] }
	75	+ onChange={ e => {
	76	+ settings.keepAspectRatio = e;
	77	+ this.props.edit( settings );
	78	+ } }
	79	+ />
80	80
81		- ) }
	81	+ ) }
82	82
83		- { ( -1 >= [ 'gauge' ].indexOf( type ) ) && (
	83	+ { ( -1 >= [ 'gauge', 'tabular' ].indexOf( type ) ) && (
84	84
85		- <Fragment>
	85	+ <Fragment>
86	86
87		- <TextControl
88		- label={ __( 'Stroke Width' ) }
89		- help={ __( 'The chart border width in pixels.' ) }
90		- value={ settings.backgroundColor.strokeWidth }
91		- onChange={ e => {
92		- settings.backgroundColor.strokeWidth = e;
93		- this.props.edit( settings );
94		- } }
95		- />
	87	+ <TextControl
	88	+ label={ __( 'Stroke Width' ) }
	89	+ help={ __( 'The chart border width in pixels.' ) }
	90	+ value={ settings.backgroundColor.strokeWidth }
	91	+ onChange={ e => {
	92	+ settings.backgroundColor.strokeWidth = e;
	93	+ this.props.edit( settings );
	94	+ } }
	95	+ />
96	96
97		- <BaseControl
98		- label={ __( 'Stroke Color' ) }
99		- >
100		- <ColorPalette
101		- value={ settings.backgroundColor.stroke }
102		- onChange={ e => {
103		- settings.backgroundColor.stroke = e;
104		- this.props.edit( settings );
105		- } }
106		- />
107		- </BaseControl>
	97	+ <BaseControl
	98	+ label={ __( 'Stroke Color' ) }
	99	+ >
	100	+ <ColorPalette
	101	+ value={ settings.backgroundColor.stroke }
	102	+ onChange={ e => {
	103	+ settings.backgroundColor.stroke = e;
	104	+ this.props.edit( settings );
	105	+ } }
	106	+ />
	107	+ </BaseControl>
108	108
109		- <BaseControl
110		- label={ __( 'Background Color' ) }
111		- >
112		- <ColorPalette
113		- value={ settings.backgroundColor.fill }
114		- onChange={ e => {
115		- settings.backgroundColor.fill = e;
116		- this.props.edit( settings );
117		- } }
118		- />
119		- </BaseControl>
	109	+ <BaseControl
	110	+ label={ __( 'Background Color' ) }
	111	+ >
	112	+ <ColorPalette
	113	+ value={ settings.backgroundColor.fill }
	114	+ onChange={ e => {
	115	+ settings.backgroundColor.fill = e;
	116	+ this.props.edit( settings );
	117	+ } }
	118	+ />
	119	+ </BaseControl>
120	120
121		- <CheckboxControl
122		- label={ __( 'Transparent Background?' ) }
123		- checked={ 'transparent' === settings.backgroundColor.fill }
124		- onChange={ e => {
125		- settings.backgroundColor.fill = ( 'transparent' === settings.backgroundColor.fill ? '' : 'transparent' );
126		- this.props.edit( settings );
127		- } }
128		- />
	121	+ <CheckboxControl
	122	+ label={ __( 'Transparent Background?' ) }
	123	+ checked={ 'transparent' === settings.backgroundColor.fill }
	124	+ onChange={ e => {
	125	+ settings.backgroundColor.fill = ( 'transparent' === settings.backgroundColor.fill ? '' : 'transparent' );
	126	+ this.props.edit( settings );
	127	+ } }
	128	+ />
129	129
130		- </Fragment>
	130	+ </Fragment>
131	131
132		- ) }
	132	+ ) }
133	133
134		- </PanelBody>
	134	+ </PanelBody>
135	135
136		- { ( -1 >= [ 'geo', 'gauge' ].indexOf( type ) ) && (
	136	+ { ( -1 >= [ 'geo', 'gauge', 'tabular' ].indexOf( type ) ) && (
137	137
138		- <PanelBody
139		- title={ __( 'Chart Area' ) }
140		- className="visualizer-inner-sections"
141		- initialOpen={ false }
142		- >
	138	+ <PanelBody
	139	+ title={ __( 'Chart Area' ) }
	140	+ className="visualizer-inner-sections"
	141	+ initialOpen={ false }
	142	+ >
143	143
144		- <TextControl
145		- label={ __( 'Left Margin' ) }
146		- help={ __( 'Determines how far to draw the chart from the left border.' ) }
147		- value={ settings.chartArea.left }
148		- onChange={ e => {
149		- settings.chartArea.left = e;
150		- this.props.edit( settings );
151		- } }
152		- />
	144	+ <TextControl
	145	+ label={ __( 'Left Margin' ) }
	146	+ help={ __( 'Determines how far to draw the chart from the left border.' ) }
	147	+ value={ settings.chartArea.left }
	148	+ onChange={ e => {
	149	+ settings.chartArea.left = e;
	150	+ this.props.edit( settings );
	151	+ } }
	152	+ />
153	153
154		- <TextControl
155		- label={ __( 'Top Margin' ) }
156		- help={ __( 'Determines how far to draw the chart from the top border.' ) }
157		- value={ settings.chartArea.top }
158		- onChange={ e => {
159		- settings.chartArea.top = e;
160		- this.props.edit( settings );
161		- } }
162		- />
	154	+ <TextControl
	155	+ label={ __( 'Top Margin' ) }
	156	+ help={ __( 'Determines how far to draw the chart from the top border.' ) }
	157	+ value={ settings.chartArea.top }
	158	+ onChange={ e => {
	159	+ settings.chartArea.top = e;
	160	+ this.props.edit( settings );
	161	+ } }
	162	+ />
163	163
164		- <TextControl
165		- label={ __( 'Width Of Chart Area' ) }
166		- help={ __( 'Determines the width of the chart area.' ) }
167		- value={ settings.chartArea.width }
168		- onChange={ e => {
169		- settings.chartArea.width = e;
170		- this.props.edit( settings );
171		- } }
172		- />
	164	+ <TextControl
	165	+ label={ __( 'Width Of Chart Area' ) }
	166	+ help={ __( 'Determines the width of the chart area.' ) }
	167	+ value={ settings.chartArea.width }
	168	+ onChange={ e => {
	169	+ settings.chartArea.width = e;
	170	+ this.props.edit( settings );
	171	+ } }
	172	+ />
173	173
174		- <TextControl
175		- label={ __( 'Height Of Chart Area' ) }
176		- help={ __( 'Determines the hight of the chart area.' ) }
177		- value={ settings.chartArea.height }
178		- onChange={ e => {
179		- settings.chartArea.height = e;
180		- this.props.edit( settings );
181		- } }
182		- />
	174	+ <TextControl
	175	+ label={ __( 'Height Of Chart Area' ) }
	176	+ help={ __( 'Determines the hight of the chart area.' ) }
	177	+ value={ settings.chartArea.height }
	178	+ onChange={ e => {
	179	+ settings.chartArea.height = e;
	180	+ this.props.edit( settings );
	181	+ } }
	182	+ />
183	183
184		- </PanelBody>
	184	+ </PanelBody>
185	185
186		- ) }
	186	+ ) }
187	187
188		- </PanelBody>
189		- );
190		- }
	188	+ </PanelBody>
	189	+ );
	190	+ }
191	191	}
192	192
193	193	export default LayoutAndChartArea;