← All changes | includes/frontend/blocks/src/post-count/controls.js +168 -152 4.3.1 → 4.5.1 View file →

		@@ -15,9 +15,8 @@
15	15	ToggleControl,
16	16	Popover,
17	17	DatePicker,
18	18	TextareaControl,
19		- __experimentalText as Text,
20	19	} from '@wordpress/components';
21	20	import { __ } from '@wordpress/i18n';
22	21	import { useState } from '@wordpress/element';
23	22
		@@ -24,9 +23,9 @@
24	23	import { svgOptions } from './components/svg';
25	24	import PaddingControl from './components/padding-control';
26	25	import UnitControl from './components/unit-control';
27	26
28		-const Controls = ({ attributes, setAttributes }) => {
	27	+const Controls = ( { attributes, setAttributes } ) => {
29	28	const {
30	29	textAlign,
31	30	counter,
32	31	fromDate,
		@@ -40,40 +39,41 @@
40	39	svgIconLocation,
41	40	svgIconSize,
42	41	svgIconSizeUnit,
43	42	} = attributes;
44		- const [isFromDatePickerVisible, setIsFromDatePickerVisible] =
45		- useState(false);
46		- const [isToDatePickerVisible, setIsToDatePickerVisible] = useState(false);
47		- const [isSvgModalOpen, setIsSvgModalOpen] = useState(false);
	43	+ const [ isFromDatePickerVisible, setIsFromDatePickerVisible ] =
	44	+ useState( false );
	45	+ const [ isToDatePickerVisible, setIsToDatePickerVisible ] =
	46	+ useState( false );
	47	+ const [ isSvgModalOpen, setIsSvgModalOpen ] = useState( false );
48	48
49		- const formatDate = (date) => {
50		- if (!date) {
	49	+ const formatDate = ( date ) => {
	50	+ if ( ! date ) {
51	51	return '';
52	52	}
53		- const d = new Date(date);
54		- return d.toISOString().split('T')[0];
	53	+ const d = new Date( date );
	54	+ return d.toISOString().split( 'T' )[ 0 ];
55	55	};
56	56
57		- const handleDateChange = (date, isFromDate) => {
58		- const formattedDate = formatDate(date);
59		- setAttributes({
60		- [isFromDate ? 'fromDate' : 'toDate']: formattedDate,
61		- });
62		- setIsFromDatePickerVisible(false);
63		- setIsToDatePickerVisible(false);
	57	+ const handleDateChange = ( date, isFromDate ) => {
	58	+ const formattedDate = formatDate( date );
	59	+ setAttributes( {
	60	+ [ isFromDate ? 'fromDate' : 'toDate' ]: formattedDate,
	61	+ } );
	62	+ setIsFromDatePickerVisible( false );
	63	+ setIsToDatePickerVisible( false );
64	64	};
65	65
66		- const clearDate = (isFromDate) => {
67		- setAttributes({ [isFromDate ? 'fromDate' : 'toDate']: '' });
	66	+ const clearDate = ( isFromDate ) => {
	67	+ setAttributes( { [ isFromDate ? 'fromDate' : 'toDate' ]: '' } );
68	68	};
69	69
70		- const handleSvgSelection = (selectedSvg) => {
71		- setAttributes({ svgCode: selectedSvg });
72		- setIsSvgModalOpen(false);
	70	+ const handleSvgSelection = ( selectedSvg ) => {
	71	+ setAttributes( { svgCode: selectedSvg } );
	72	+ setIsSvgModalOpen( false );
73	73	};
74	74	const clearSvg = () => {
75		- setAttributes({ svgCode: '' });
	75	+ setAttributes( { svgCode: '' } );
76	76	};
77	77
78	78	return (
79	79	<>
		@@ -78,230 +78,243 @@
78	78	return (
79	79	<>
80	80	<BlockControls group="block">
81	81	<AlignmentControl
82		- value={textAlign}
83		- onChange={(nextAlign) => {
84		- setAttributes({ textAlign: nextAlign });
85		- }}
	82	+ value={ textAlign }
	83	+ onChange={ ( nextAlign ) => {
	84	+ setAttributes( { textAlign: nextAlign } );
	85	+ } }
86	86	/>
87	87	</BlockControls>
88	88	<InspectorControls>
89	89	<PanelBody
90		- title={__('Counter Settings', 'top-10')}
91		- initialOpen={true}
	90	+ title={ __( 'Counter Settings', 'top-10' ) }
	91	+ initialOpen={ true }
92	92	>
93	93	<SelectControl
94		- label={__('Counter Type', 'top-10')}
95		- value={counter}
96		- options={[
97		- { label: __('Total', 'top-10'), value: 'total' },
98		- { label: __('Daily', 'top-10'), value: 'daily' },
99		- ]}
100		- onChange={(value) => setAttributes({ counter: value })}
	94	+ label={ __( 'Counter Type', 'top-10' ) }
	95	+ value={ counter }
	96	+ options={ [
	97	+ { label: __( 'Total', 'top-10' ), value: 'total' },
	98	+ { label: __( 'Daily', 'top-10' ), value: 'daily' },
	99	+ ] }
	100	+ onChange={ ( value ) =>
	101	+ setAttributes( { counter: value } )
	102	+ }
101	103	/>
102		- {counter === 'daily' && (
	104	+ { counter === 'daily' && (
103	105	<>
104	106	<div className="tptn-date-picker-container">
105		- <Text>{__('From', 'top-10')}</Text>
	107	+ <span className="tptn-date-picker-label">
	108	+ { __( 'From', 'top-10' ) }
	109	+ </span>
106	110	<Button
107		- onClick={() =>
	111	+ onClick={ () =>
108	112	setIsFromDatePickerVisible(
109		- (state) => !state
	113	+ ( state ) => ! state
110	114	)
111	115	}
112	116	variant="secondary"
113	117	>
114		- {fromDate ||
115		- __('Select From Date', 'top-10')}
	118	+ { fromDate ||
	119	+ __( 'Select From Date', 'top-10' ) }
116	120	</Button>
117		- {fromDate && (
	121	+ { fromDate && (
118	122	<Button
119		- onClick={() => clearDate(true)}
	123	+ onClick={ () => clearDate( true ) }
120	124	variant="link"
121	125	isDestructive
122	126	>
123		- {__('Clear', 'top-10')}
	127	+ { __( 'Clear', 'top-10' ) }
124	128	</Button>
125		- )}
126		- {isFromDatePickerVisible && (
	129	+ ) }
	130	+ { isFromDatePickerVisible && (
127	131	<Popover
128		- onClose={() =>
129		- setIsFromDatePickerVisible(false)
	132	+ onClose={ () =>
	133	+ setIsFromDatePickerVisible( false )
130	134	}
131	135	>
132	136	<DatePicker
133		- currentDate={fromDate}
134		- onChange={(date) =>
135		- handleDateChange(date, true)
	137	+ currentDate={ fromDate }
	138	+ onChange={ ( date ) =>
	139	+ handleDateChange( date, true )
136	140	}
137	141	/>
138	142	</Popover>
139		- )}
	143	+ ) }
140	144	</div>
141	145
142	146	<div className="tptn-date-picker-container">
143		- <Text>{__('To', 'top-10')}</Text>
	147	+ <span className="tptn-date-picker-label">
	148	+ { __( 'To', 'top-10' ) }
	149	+ </span>
144	150	<Button
145		- onClick={() =>
	151	+ onClick={ () =>
146	152	setIsToDatePickerVisible(
147		- (state) => !state
	153	+ ( state ) => ! state
148	154	)
149	155	}
150	156	variant="secondary"
151	157	>
152		- {toDate || __('Select To Date', 'top-10')}
	158	+ { toDate ||
	159	+ __( 'Select To Date', 'top-10' ) }
153	160	</Button>
154		- {toDate && (
	161	+ { toDate && (
155	162	<Button
156		- onClick={() => clearDate(false)}
	163	+ onClick={ () => clearDate( false ) }
157	164	variant="link"
158	165	isDestructive
159	166	>
160		- {__('Clear', 'top-10')}
	167	+ { __( 'Clear', 'top-10' ) }
161	168	</Button>
162		- )}
163		- {isToDatePickerVisible && (
	169	+ ) }
	170	+ { isToDatePickerVisible && (
164	171	<Popover
165		- onClose={() =>
166		- setIsToDatePickerVisible(false)
	172	+ onClose={ () =>
	173	+ setIsToDatePickerVisible( false )
167	174	}
168	175	>
169	176	<DatePicker
170		- currentDate={toDate}
171		- onChange={(date) =>
172		- handleDateChange(date, false)
	177	+ currentDate={ toDate }
	178	+ onChange={ ( date ) =>
	179	+ handleDateChange( date, false )
173	180	}
174	181	/>
175	182	</Popover>
176		- )}
	183	+ ) }
177	184	</div>
178	185	</>
179		- )}
	186	+ ) }
180	187	<ToggleControl
181		- label={__('Number Formatting', 'top-10')}
182		- checked={numberFormat}
183		- onChange={(value) =>
184		- setAttributes({ numberFormat: value })
	188	+ label={ __( 'Number Formatting', 'top-10' ) }
	189	+ checked={ numberFormat }
	190	+ onChange={ ( value ) =>
	191	+ setAttributes( { numberFormat: value } )
185	192	}
186	193	/>
187	194	</PanelBody>
188	195
189	196	<PanelBody
190		- title={__('Text Customization', 'top-10')}
191		- initialOpen={true}
	197	+ title={ __( 'Text Customization', 'top-10' ) }
	198	+ initialOpen={ true }
192	199	>
193	200	<ToggleControl
194		- label={__('Advanced Mode', 'top-10')}
195		- checked={advancedMode}
196		- onChange={(value) =>
197		- setAttributes({ advancedMode: value })
	201	+ label={ __( 'Advanced Mode', 'top-10' ) }
	202	+ checked={ advancedMode }
	203	+ onChange={ ( value ) =>
	204	+ setAttributes( { advancedMode: value } )
198	205	}
199	206	/>
200	207
201		- {!advancedMode && (
	208	+ { ! advancedMode && (
202	209	<>
203	210	<TextControl
204		- label={__('Text Before Count', 'top-10')}
205		- value={textBefore}
206		- onChange={(value) =>
207		- setAttributes({ textBefore: value })
	211	+ label={ __( 'Text Before Count', 'top-10' ) }
	212	+ value={ textBefore }
	213	+ onChange={ ( value ) =>
	214	+ setAttributes( { textBefore: value } )
208	215	}
209	216	/>
210	217	<TextControl
211		- label={__('Text After Count', 'top-10')}
212		- value={textAfter}
213		- onChange={(value) =>
214		- setAttributes({ textAfter: value })
	218	+ label={ __( 'Text After Count', 'top-10' ) }
	219	+ value={ textAfter }
	220	+ onChange={ ( value ) =>
	221	+ setAttributes( { textAfter: value } )
215	222	}
216	223	/>
217	224	</>
218		- )}
	225	+ ) }
219	226
220		- {advancedMode && (
	227	+ { advancedMode && (
221	228	<TextareaControl
222		- label={__('Advanced Text', 'top-10')}
223		- value={textAdvanced}
224		- onChange={(value) =>
225		- setAttributes({ textAdvanced: value })
	229	+ label={ __( 'Advanced Text', 'top-10' ) }
	230	+ value={ textAdvanced }
	231	+ onChange={ ( value ) =>
	232	+ setAttributes( { textAdvanced: value } )
226	233	}
227		- help={__(
	234	+ // translators: %totalcount% and %dailycount% are literal block placeholders.
	235	+ help={ __(
228	236	'Use %totalcount% or %dailycount% as placeholders for the count value.',
229	237	'top-10'
230		- )}
	238	+ ) }
231	239	/>
232		- )}
	240	+ ) }
233	241	</PanelBody>
234	242
235		- <PanelBody title={__('Icon', 'top-10')} initialOpen={true}>
	243	+ <PanelBody
	244	+ title={ __( 'Icon', 'top-10' ) }
	245	+ initialOpen={ true }
	246	+ >
236	247	<div
237		- style={{
	248	+ style={ {
238	249	display: 'flex',
239	250	alignItems: 'center',
240		- }}
	251	+ } }
241	252	>
242	253	<TextControl
243		- label={__('Icon SVG HTML', 'top-10')}
244		- value={svgCode}
245		- onChange={(value) =>
246		- setAttributes({ svgCode: value })
	254	+ label={ __( 'Icon SVG HTML', 'top-10' ) }
	255	+ value={ svgCode }
	256	+ onChange={ ( value ) =>
	257	+ setAttributes( { svgCode: value } )
247	258	}
248	259	/>
249	260	</div>
250	261	<div
251		- style={{
	262	+ style={ {
252	263	display: 'flex',
253	264	justifyContent: 'space-between',
254	265	marginBottom: '10px',
255		- }}
	266	+ } }
256	267	>
257	268	<Button
258		- onClick={() => setIsSvgModalOpen(true)}
	269	+ onClick={ () => setIsSvgModalOpen( true ) }
259	270	variant="secondary"
260	271	>
261		- {__('Select SVG', 'top-10')}
	272	+ { __( 'Select SVG', 'top-10' ) }
262	273	</Button>
263	274	<Button
264		- onClick={clearSvg}
	275	+ onClick={ clearSvg }
265	276	variant="secondary"
266	277	isDestructive
267	278	>
268		- {__('Clear', 'top-10')}
	279	+ { __( 'Clear', 'top-10' ) }
269	280	</Button>
270		- {svgCode && (
	281	+ { svgCode && (
271	282	<div
272		- style={{
	283	+ style={ {
273	284	marginRight: '10px',
274	285	width: '30px',
275	286	height: '30px',
276		- }}
277		- dangerouslySetInnerHTML={{ __html: svgCode }}
	287	+ } }
	288	+ dangerouslySetInnerHTML={ { __html: svgCode } }
278	289	/>
279		- )}
	290	+ ) }
280	291	</div>
281	292	<SvgSelectionModal
282		- isOpen={isSvgModalOpen}
283		- onClose={() => setIsSvgModalOpen(false)}
284		- onSelect={handleSvgSelection}
	293	+ isOpen={ isSvgModalOpen }
	294	+ onClose={ () => setIsSvgModalOpen( false ) }
	295	+ onSelect={ handleSvgSelection }
285	296	/>
286	297
287		- {svgCode && (
	298	+ { svgCode && (
288	299	<>
289	300	<SelectControl
290		- label={__('Icon Location', 'top-10')}
291		- value={svgIconLocation}
292		- options={[
	301	+ label={ __( 'Icon Location', 'top-10' ) }
	302	+ value={ svgIconLocation }
	303	+ options={ [
293	304	{
294	305	value: 'before',
295		- label: __('Before Text', 'top-10'),
	306	+ label: __( 'Before Text', 'top-10' ),
296	307	},
297	308	{
298	309	value: 'after',
299		- label: __('After Text', 'top-10'),
	310	+ label: __( 'After Text', 'top-10' ),
300	311	},
301		- ]}
302		- onChange={(newValue) =>
303		- setAttributes({ svgIconLocation: newValue })
	312	+ ] }
	313	+ onChange={ ( newValue ) =>
	314	+ setAttributes( {
	315	+ svgIconLocation: newValue,
	316	+ } )
304	317	}
305	318	help={
306	319	svgIconLocation === 'after'
307	320	? __(
		@@ -306,32 +319,32 @@
306	319	svgIconLocation === 'after'
307	320	? __(
308	321	'Icon will be placed after the text.',
309	322	'top-10'
310		- )
	323	+ )
311	324	: __(
312	325	'Icon will be placed before the text.',
313	326	'top-10'
314		- )
	327	+ )
315	328	}
316	329	/>
317	330	<UnitControl
318		- label={__('Icon Size', 'top-10')}
319		- value={svgIconSize}
320		- unit={svgIconSizeUnit}
321		- onValueChange={(value) =>
322		- setAttributes({ svgIconSize: value })
	331	+ label={ __( 'Icon Size', 'top-10' ) }
	332	+ value={ svgIconSize }
	333	+ unit={ svgIconSizeUnit }
	334	+ onValueChange={ ( value ) =>
	335	+ setAttributes( { svgIconSize: value } )
323	336	}
324		- onUnitChange={(unit) =>
325		- setAttributes({ svgIconSizeUnit: unit })
	337	+ onUnitChange={ ( unit ) =>
	338	+ setAttributes( { svgIconSizeUnit: unit } )
326	339	}
327	340	/>
328	341	<PaddingControl
329		- attributes={attributes}
330		- setAttributes={setAttributes}
	342	+ attributes={ attributes }
	343	+ setAttributes={ setAttributes }
331	344	/>
332	345	</>
333		- )}
	346	+ ) }
334	347	</PanelBody>
335	348	</InspectorControls>
336	349	</>
337	350	);
		@@ -338,24 +351,27 @@
338	351	};
339	352
340	353	export default Controls;
341	354
342		-const SvgSelectionModal = ({ isOpen, onClose, onSelect }) => {
	355	+const SvgSelectionModal = ( { isOpen, onClose, onSelect } ) => {
343	356	return isOpen ? (
344		- <Modal title={__('Select an SVG', 'top-10')} onRequestClose={onClose}>
	357	+ <Modal
	358	+ title={ __( 'Select an SVG', 'top-10' ) }
	359	+ onRequestClose={ onClose }
	360	+ >
345	361	<div
346		- style={{
	362	+ style={ {
347	363	display: 'grid',
348	364	gridTemplateColumns: 'repeat(auto-fill, minmax(25px, 1fr))',
349	365	gap: '2px',
350	366	padding: '1px',
351		- }}
	367	+ } }
352	368	>
353		- {svgOptions.map((svg, index) => (
	369	+ { svgOptions.map( ( svg, index ) => (
354	370	<Button
355		- key={index}
356		- onClick={() => onSelect(svg.code)}
357		- style={{
	371	+ key={ index }
	372	+ onClick={ () => onSelect( svg.code ) }
	373	+ style={ {
358	374	padding: '1px',
359	375	border: '0px solid #ddd',
360	376	display: 'flex',
361	377	justifyContent: 'center',
		@@ -360,19 +376,19 @@
360	376	display: 'flex',
361	377	justifyContent: 'center',
362	378	alignItems: 'center',
363	379	height: '25px',
364		- }}
365		- title={svg.name}
	380	+ } }
	381	+ title={ svg.name }
366	382	>
367	383	<svg
368	384	viewBox="0 0 100 100"
369	385	xmlns="http://www.w3.org/2000/svg"
370		- style={{ width: '100%', height: '100%' }}
371		- dangerouslySetInnerHTML={{ __html: svg.code }}
	386	+ style={ { width: '100%', height: '100%' } }
	387	+ dangerouslySetInnerHTML={ { __html: svg.code } }
372	388	/>
373	389	</Button>
374		- ))}
	390	+ ) ) }
375	391	</div>
376	392	</Modal>
377	393	) : null;
378	394	};