CartFlows – Funnel Builder & Checkout Plugin for WooCommerce / 3.3.0

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

cartflows / modules / gutenberg / src / components / presets / index.js

index.js in CartFlows – Funnel Builder & Checkout Plugin for WooCommerce 3.3.0, at modules/gutenberg/src/components/presets/index.js

215 lines 6.0 KB

Raw Download Zip

1	import { SelectControl } from '@wordpress/components';
2	import { __ } from '@wordpress/i18n';
3	import { useState } from '@wordpress/element';
4	import styles from './editor.lazy.scss';
5	import React, { useLayoutEffect } from 'react';
6	import { select, dispatch } from '@wordpress/data';
7	import classnames from 'classnames';
8	import UAGReset from '../reset';
9
10	const UAGPresets = ( props ) => {
11
12	// Add and remove the CSS on the drop and remove of the component.
13	useLayoutEffect( () => {
14	styles.use();
15	return () => {
16	styles.unuse();
17	};
18	}, [] );
19
20	const {
21	setAttributes,
22	presets,
23	presetInputType,
24	label,
25	className
26	} = props;
27
28	const resetAttributes = [];
29
30	if ( presets ) {
31	presets.map( ( preset ) => {
32	if ( preset?.attributes ) {
33	for ( const attribute of preset?.attributes ) {
34	if ( ! resetAttributes.includes( attribute?.label ) ) {
35	resetAttributes.push( attribute?.label );
36	}
37	}
38	}
39
40	return preset;
41	} );
42	}
43
44	const [ selectedPresetState, setPreset ] = useState( '' );
45
46	const onReset = () => {
47	setPreset( '' );
48	resetChildBlockAttributes();
49	};
50
51	const updatePresets = ( selectedPreset ) => {
52
53	setPreset( selectedPreset );
54	if ( presets ) {
55	presets.map( ( preset ) => {
56	if ( preset.value ) {
57	if ( 'default' !== selectedPreset && 'default' === preset.value && preset.attributes ) {
58	preset.attributes.map( ( presetItem ) => {
59	setAttributes( { [presetItem.label]: presetItem.value } )
60	return presetItem;
61	} );
62	}
63	if ( preset.value && preset.value === selectedPreset && preset.attributes ) {
64
65	presets[1]?.defaultPresetAttributes?.map( ( presetItem ) => {
66	setAttributes( { [presetItem.label]: presets[0]?.defaultAttributes[presetItem.label]?.default } )
67	return presetItem;
68	} );
69	preset.attributes.map( ( presetItem ) => {
70	setAttributes( { [presetItem.label]: presetItem.value } )
71	return presetItem;
72	} );
73
74	if ( preset.childAttributes ) {
75	updateChildBlockAttributes( preset );
76	}
77	}
78	}
79	return preset;
80	} );
81	}
82	}
83
84	const updateChildBlockAttributes = ( preset ) => {
85
86	const { getSelectedBlock } = select( 'core/block-editor' );
87
88	let childBlocks = [];
89
90	if ( getSelectedBlock().innerBlocks ) {
91	childBlocks = getSelectedBlock().innerBlocks;
92	}
93
94	const childBlocksClientIds = [];
95
96	childBlocks.map( ( childBlock ) => {
97	if ( childBlock.clientId ) {
98	childBlocksClientIds.push( childBlock.clientId );
99	}
100	return childBlock;
101	} );
102
103	const childBlocksAttributes = {};
104
105	preset.childAttributes.map( ( attr ) => {
106	childBlocksAttributes[attr.label] = attr.value;
107	return attr;
108	} );
109
110	childBlocksClientIds.map( ( clientId ) => {
111	dispatch( 'core/block-editor' ).updateBlockAttributes( clientId, childBlocksAttributes );
112	return clientId;
113	} );
114	}
115
116	const resetChildBlockAttributes = () => {
117	const { getSelectedBlock } = select( 'core/block-editor' );
118
119	let childBlocks = [];
120
121	if ( getSelectedBlock().innerBlocks ) {
122	childBlocks = getSelectedBlock().innerBlocks;
123	}
124
125	const childBlocksClientIds = [];
126
127	childBlocks.map( ( childBlock ) => {
128	if ( childBlock.clientId ) {
129	childBlocksClientIds.push( childBlock.clientId );
130	}
131	return childBlock;
132	} );
133
134	const childBlocksAttributes = {};
135
136	presets.map( ( preset ) => {
137	if ( preset?.childAttributes ) {
138	preset?.childAttributes.map( ( attr ) => {
139	if ( presets[1]?.defaultChildAttributes && presets[1]?.defaultChildAttributes[attr.label] && undefined !== presets[1]?.defaultChildAttributes[attr.label].default ) {
140	childBlocksAttributes[attr.label] = presets[1]?.defaultChildAttributes[attr.label].default;
141	}
142	return attr;
143	} );
144	}
145	return preset;
146	} );
147
148	childBlocksClientIds.map( ( clientId ) => {
149	dispatch( 'core/block-editor' ).updateBlockAttributes( clientId, childBlocksAttributes );
150	return clientId;
151	} );
152	}
153	const presetRadioImageOptions = presets.map( ( preset ) => {
154	if ( ! preset.value ) {
155	return '';
156	}
157
158	const key = preset.value;
159	const checked = selectedPresetState === key ? true : false;
160	return (
161	<>
162	<input key={key} className="uag-presets-radio-input" type="radio" value={key} checked={checked} onChange={() => updatePresets( key )} onClick={() => updatePresets( key )}/>
163
164	<label htmlFor={key} className="uag-presets-radio-input-label" dangerouslySetInnerHTML={{// eslint-disable-line
165	__html: preset.icon
166	}} onClick={() => updatePresets( key )}>
167	</label>
168	</>
169	);
170	} );
171
172	const presetDropdown = (
173	<SelectControl
174	className='uagb-presets-dropdown'
175	onChange={ updatePresets }
176	options={ presets }
177	label={ label }
178	/>
179	);
180
181	const presetRadioImage = (
182	<>
183	<div className='uagb-presets-radio-image-wrap'>
184	{presetRadioImageOptions}
185	</div>
186	</>
187	);
188
189	return (
190	<div className={ classnames(
191	className,
192	'uagb-presets-main-wrap',
193	'components-base-control'
194	) }>
195	<div className='uagb-presets-label-reset-wrap'>
196	<label htmlFor="uag-presets-label" className="uag-presets-label">{label}</label>
197	<UAGReset
198	attributeNames = {resetAttributes}
199	setAttributes={ setAttributes }
200	onReset={onReset}
201	/>
202	</div>
203	{ 'dropdown' === presetInputType && presetDropdown }
204	{ 'radioImage' === presetInputType && presetRadioImage }
205	</div>
206	);
207	}
208
209	UAGPresets.defaultProps = {
210	presetInputType: 'dropdown',
211	label: __( 'Select Preset', 'ultimate-addons-for-gutenberg' )
212	};
213
214	export default React.memo( UAGPresets );
215