PluginProbe
CartFlows – Funnel Builder & Checkout Plugin for WooCommerce / 3.1.0
CartFlows – Funnel Builder & Checkout Plugin for WooCommerce v3.1.0
3.3.0 3.2.1 3.2.0 3.1.4 3.1.3 3.1.2 3.1.1 3.1.0 3.0.1 trunk 1.0.4 1.1.0 1.1.0.1 1.1.1 1.1.10 1.1.11 1.1.12 1.1.13 1.1.14 1.1.15 1.1.16 1.1.17 1.1.18 1.1.19 1.1.2 All 162 releases
cartflows / modules / gutenberg / src / components / multi-buttons-control / index.js

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

285 lines 7.4 KB
No matching file
Up and down to move Enter to open Esc to close
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