CartFlows – Funnel Builder & Checkout Plugin for WooCommerce / 3.1.1

CartFlows – Funnel Builder & Checkout Plugin for WooCommerce v3.1.1

cartflows / modules / gutenberg / src / components / multi-buttons-control / index.js

index.js in CartFlows – Funnel Builder & Checkout Plugin for WooCommerce 3.1.1, at modules/gutenberg/src/components/multi-buttons-control/index.js

285 lines 7.4 KB

Raw Download Zip

1	/**
2	* WordPress dependencies
3	*/
4	import { Button, ButtonGroup } from '@wordpress/components';
5	import { __ } from '@wordpress/i18n';
6	import { useDeviceType } from '@Controls/getPreviewType';
7	import ResponsiveToggle from '../responsive-toggle';
8	/**
9	* Import Css
10	*/
11	import styles from './editor.lazy.scss';
12	import { blocksAttributes } from '@Attributes/getBlocksDefaultAttributes';
13	import React, { useLayoutEffect, useState } from 'react';
14	import { select } from '@wordpress/data';
15
16	const MultiButtonsControl = ( props ) => {
17	// Add and remove the CSS on the drop and remove of the component.
18	useLayoutEffect( () => {
19	styles.use();
20	return () => {
21	styles.unuse();
22	};
23	}, [] );
24	const {
25	data,
26	label,
27	options,
28	showIcons,
29	setAttributes,
30	responsive,
31	onChange,
32	colorVariant = 'primary',
33	layoutVariant = 'full',
34	} = props;
35
36	const { getSelectedBlock } = select( 'core/block-editor' );
37	const selectedBlock = getSelectedBlock()?.name.split( '/' ).pop(); // eslint-disable-line @wordpress/no-unused-vars-before-return
38	const [
39	buttonPrimaryStateDesktop,
40	setbuttonPrimaryStateDesktop,
41	] = useState( true );
42	const [ buttonPrimaryStateTablet, setbuttonPrimaryStateTablet ] = useState(
43	true
44	);
45	const [ buttonPrimaryStateMobile, setbuttonPrimaryStateMobile ] = useState(
46	true
47	);
48
49	const deviceType = useDeviceType();
50	const iconsClass = showIcons ? 'uag-multibutton-icons' : '';
51
52	if ( ! options ) {
53	return __(
54	'Please add a option props to MultiButtonsControl',
55	'ultimate-addons-for-gutenberg'
56	);
57	}
58
59	if ( responsive ) {
60	const output = {};
61
62	output.Desktop = (
63	<ButtonGroup
64	className={ `uagb-multi-button-button-group` }
65	aria-label={ label }
66	>
67	{ options.map( ( option ) => (
68	<Button
69	key={ `option-${ option.value }` }
70	className={ `uagb-multi-button` }
71	isLarge
72	isSecondary={
73	data.desktop.value !== option.value \|\|
74	! buttonPrimaryStateDesktop
75	}
76	isPrimary={
77	data.desktop.value === option.value &&
78	buttonPrimaryStateDesktop
79	}
80	aria-pressed={ data.desktop.value === option.value }
81	onClick={ () => {
82	setbuttonPrimaryStateDesktop( true );
83	if (
84	option.value === data.desktop.value &&
85	buttonPrimaryStateDesktop
86	) {
87	setbuttonPrimaryStateDesktop( false );
88	setAttributes( {
89	[ data.desktop.label ]:
90	blocksAttributes[ selectedBlock ][
91	data.desktop.label
92	].default,
93	} );
94	return;
95	}
96	setAttributes( {
97	[ data.desktop.label ]: option.value,
98	} );
99	} }
100	aria-label={ option.tooltip }
101	label={ option.tooltip }
102	showTooltip={ option.tooltip ? true : false }
103	>
104	{ showIcons ? option.icon : option.label }
105	</Button>
106	) ) }
107	</ButtonGroup>
108	);
109	output.Tablet = (
110	<ButtonGroup
111	className={ `uagb-multi-button-button-group` }
112	aria-label={ label }
113	>
114	{ options.map( ( option ) => (
115	<Button
116	key={ `option-${ option.value }` }
117	className={ `uagb-multi-button` }
118	isLarge
119	isSecondary={
120	data.tablet.value !== option.value \|\|
121	! buttonPrimaryStateTablet
122	}
123	isPrimary={
124	data.tablet.value === option.value &&
125	buttonPrimaryStateTablet
126	}
127	aria-pressed={ data.tablet.value === option.value }
128	onClick={ () => {
129	setbuttonPrimaryStateTablet( true );
130
131	if (
132	option.value === data.tablet.value &&
133	buttonPrimaryStateTablet
134	) {
135	setbuttonPrimaryStateTablet( false );
136	setAttributes( {
137	[ data.tablet.label ]:
138	blocksAttributes[ selectedBlock ][
139	data.tablet.label
140	].default,
141	} );
142	return;
143	}
144	setAttributes( {
145	[ data.tablet.label ]: option.value,
146	} );
147	} }
148	aria-label={ option.tooltip }
149	label={ option.tooltip }
150	showTooltip={ option.tooltip ? true : false }
151	>
152	{ showIcons ? option.icon : option.label }
153	</Button>
154	) ) }
155	</ButtonGroup>
156	);
157	output.Mobile = (
158	<ButtonGroup
159	className={ `uagb-multi-button-button-group` }
160	aria-label={ label }
161	>
162	{ options.map( ( option ) => (
163	<Button
164	key={ `option-${ option.value }` }
165	className={ `uagb-multi-button` }
166	isLarge
167	isSecondary={
168	data.mobile.value !== option.value \|\|
169	! buttonPrimaryStateMobile
170	}
171	isPrimary={
172	data.mobile.value === option.value &&
173	buttonPrimaryStateMobile
174	}
175	aria-pressed={ data.mobile.value === option.value }
176	onClick={ () => {
177	setbuttonPrimaryStateMobile( true );
178
179	if (
180	option.value === data.mobile.value &&
181	buttonPrimaryStateMobile
182	) {
183	setbuttonPrimaryStateMobile( false );
184	setAttributes( {
185	[ data.mobile.label ]:
186	blocksAttributes[ selectedBlock ][
187	data.mobile.label
188	].default,
189	} );
190	return;
191	}
192	setAttributes( {
193	[ data.mobile.label ]: option.value,
194	} );
195	} }
196	aria-label={ option.tooltip }
197	label={ option.tooltip }
198	showTooltip={ option.tooltip ? true : false }
199	>
200	{ showIcons ? option.icon : option.label }
201	</Button>
202	) ) }
203	</ButtonGroup>
204	);
205	return (
206	<div
207	className={ `components-base-control uagb-multi-buttons-control ${ iconsClass } spectra-multi-buttons__color-scheme--${ colorVariant } spectra-multi-buttons__layout--${ layoutVariant }` }
208	>
209	<div className="uagb-control__header uagb-size-type-field-tabs">
210	<ResponsiveToggle
211	label={ label }
212	responsive={ responsive }
213	/>
214	</div>
215	{ output[ deviceType ] ? output[ deviceType ] : output.Desktop }
216	{ props.help && (
217	<p className="uag-control-help-notice">{ props.help }</p>
218	) }
219	</div>
220	);
221	}
222
223	const onClickHandler = ( value ) => {
224	setbuttonPrimaryStateDesktop( true );
225	if ( onChange ) {
226	onChange( value );
227	}
228
229	if ( value === data.value && buttonPrimaryStateDesktop ) {
230	setbuttonPrimaryStateDesktop( false );
231	setAttributes( {
232	[ data.label ]:
233	blocksAttributes[ selectedBlock ][ data.label ].default,
234	} );
235
236	return;
237	}
238
239	setAttributes( {
240	[ data.label ]: value,
241	} );
242	};
243	return (
244	<div
245	className={ `components-base-control uagb-multi-buttons-control ${ iconsClass } spectra-multi-buttons__color-scheme--${ colorVariant } spectra-multi-buttons__layout--${ layoutVariant }` }
246	>
247	<div className="uagb-multi-buttons-control__label uag-control-label">
248	{ label }
249	</div>
250	<ButtonGroup
251	className={ `uagb-multi-button-button-group` }
252	aria-label={ label }
253	>
254	{ options.map( ( option ) => (
255	<Button
256	key={ `option-${ option.value }` }
257	className={ `uagb-multi-button` }
258	isLarge
259	isSecondary={
260	data.value !== option.value \|\|
261	! buttonPrimaryStateDesktop
262	}
263	isPrimary={
264	data.value === option.value &&
265	buttonPrimaryStateDesktop
266	}
267	aria-pressed={ data.value === option.value }
268	onClick={ () => onClickHandler( option.value ) }
269	aria-label={ option.tooltip }
270	label={ option.tooltip }
271	showTooltip={ option.tooltip ? true : false }
272	>
273	{ showIcons ? option.icon : option.label }
274	</Button>
275	) ) }
276	</ButtonGroup>
277	{ props.help && (
278	<p className="uag-control-help-notice">{ props.help }</p>
279	) }
280	</div>
281	);
282	};
283
284	export default MultiButtonsControl;
285