Scrollsequence – Cinematic Scroll Image Animation Plugin / 1.5.5

Scrollsequence – Cinematic Scroll Image Animation Plugin v1.5.5

scrollsequence / includes / carbonfields / htmlburger / carbon-fields / packages / blocks / fields / complex / index.js

index.js in Scrollsequence – Cinematic Scroll Image Animation Plugin 1.5.5, at includes/carbonfields/htmlburger/carbon-fields/packages/blocks/fields/complex/index.js

326 lines 6.5 KB

Raw Download Zip

1	/**
2	* External dependencies.
3	*/
4	import produce from 'immer';
5	import { Component } from '@wordpress/element';
6	import { addFilter } from '@wordpress/hooks';
7	import {
8	get,
9	set,
10	find,
11	omit,
12	assign,
13	mapKeys,
14	without,
15	cloneDeep,
16	findIndex
17	} from 'lodash';
18
19	/**
20	* Carbon Fields dependencies.
21	*/
22	import { uniqueId } from '@carbon-fields/core';
23
24	/**
25	* Internal dependencies.
26	*/
27	import './style.scss';
28	import Field from '../../components/field';
29
30	class ComplexField extends Component {
31	/**
32	* Local state.
33	*
34	* @type {Object}
35	*/
36	state = {
37	collapsedGroups: this.props.value.reduce( ( accumulator, { _id, _type } ) => {
38	const group = find( this.props.field.groups, [ 'name', _type ] );
39
40	if ( ! group.collapsed ) {
41	return accumulator;
42	}
43
44	return accumulator.concat( _id );
45	}, [] )
46	};
47
48	/**
49	* Returns a list of group values.
50	*
51	* @return {Array}
52	*/
53	getGroupValues() {
54	return this.props.value.map( ( group ) => {
55	const values = mapKeys( omit( group, [ '_id', '_type' ] ), ( value, key ) => key.replace( /\-/g, '_' ) );
56
57	return [ group._type, values ];
58	} );
59	}
60
61	/**
62	* Handles adding of group.
63	*
64	* @param {Object} group
65	* @param {Function} callback
66	* @return {void}
67	*/
68	handleAddGroup = ( group, callback ) => {
69	const {
70	id,
71	value,
72	onChange
73	} = this.props;
74
75	const data = {};
76
77	data._id = uniqueId();
78	data._type = group.name;
79
80	group.fields.reduce( ( accumulator, field ) => {
81	accumulator[ field.base_name ] = field.default_value;
82
83	return accumulator;
84	}, data );
85
86	onChange( id, value.concat( data ) );
87
88	callback( data );
89	}
90
91	/**
92	* Handles cloning of group.
93	*
94	* @param {Object} group
95	* @param {Function} callback
96	* @return {void}
97	*/
98	handleCloneGroup = ( group, callback ) => {
99	const {
100	id,
101	value,
102	onChange
103	} = this.props;
104
105	const index = value.indexOf( group );
106	const clonedGroup = cloneDeep( group );
107
108	clonedGroup._id = uniqueId();
109
110	onChange( id, produce( value, ( draft ) => {
111	draft.splice( index + 1, 0, clonedGroup );
112	} ) );
113
114	callback( clonedGroup );
115	}
116
117	/**
118	* Handles removing of group.
119	*
120	* @param {Object} group
121	* @return {void}
122	*/
123	handleRemoveGroup = ( group ) => {
124	const {
125	id,
126	value,
127	onChange
128	} = this.props;
129
130	const groupIndex = findIndex( value, [ '_id', group._id ] );
131
132	onChange( id, produce( value, ( draft ) => {
133	draft.splice( groupIndex, 1 );
134	} ) );
135
136	this.setState( ( { collapsedGroups } ) => ( {
137	collapsedGroups: without( collapsedGroups, group._id )
138	} ) );
139	}
140
141	/**
142	* Handles expanding/collapsing of group.
143	*
144	* @param {string} groupId
145	* @return {void}
146	*/
147	handleToggleGroup = ( groupId ) => {
148	this.setState( ( { collapsedGroups } ) => {
149	if ( collapsedGroups.indexOf( groupId ) > -1 ) {
150	collapsedGroups = without( collapsedGroups, groupId );
151	} else {
152	collapsedGroups = [ ...collapsedGroups, groupId ];
153	}
154
155	return { collapsedGroups };
156	} );
157	}
158
159	/**
160	* Handles expanding/collapsing of all groups.
161	*
162	* @return {void}
163	*/
164	handleToggleAllGroups = () => {
165	const { value } = this.props;
166
167	this.setState( ( { collapsedGroups } ) => {
168	if ( collapsedGroups.length !== value.length ) {
169	collapsedGroups = value.map( ( group ) => group._id );
170	} else {
171	collapsedGroups = [];
172	}
173
174	return { collapsedGroups };
175	} );
176	}
177
178	/**
179	* Handles setuping of group.
180	*
181	* @param {Object} group
182	* @param {Object} props
183	* @return {Object}
184	*/
185	handleGroupSetup = ( group, props ) => {
186	const fields = get( find( this.props.field.groups, [ 'name', group._type ] ), 'fields', [] );
187	const values = omit( group, [ '_id', '_type' ] );
188
189	return assign( {}, props, {
190	id: group._id,
191	fields: fields,
192	collapsed: this.state.collapsedGroups.indexOf( group._id ) > -1,
193	context: 'block',
194	values
195	} );
196	}
197
198	/**
199	* Handles setuping of group's field.
200	*
201	* @param {Object} field
202	* @param {Object} props
203	* @param {Object} groupProps
204	* @return {Array}
205	*/
206	handleGroupFieldSetup = ( field, props, groupProps ) => {
207	const { blockId } = this.props;
208	const id = `${ this.props.id }__${ groupProps.id }__${ field.base_name }`;
209	const value = get( groupProps, `values.${ field.base_name }` );
210
211	return [ Field, assign( {}, props, {
212	key: id,
213	id: id,
214	name: field.base_name,
215	containerId: this.props.containerId,
216	blockId,
217	field,
218	value,
219	onChange: this.handleGroupFieldChange
220	} ) ];
221	}
222
223	/**
224	* Handles the change of group field.
225	*
226	* @param {string} fieldId
227	* @param {mixed} fieldValue
228	* @return {void}
229	*/
230	handleGroupFieldChange = ( fieldId, fieldValue ) => {
231	const {
232	id,
233	value,
234	onChange
235	} = this.props;
236
237	onChange( id, produce( value, ( draft ) => {
238	const path = fieldId.split( '__' );
239	const fieldName = path.pop();
240	const group = find( draft, [ '_id', path.pop() ] );
241
242	set( group, fieldName, fieldValue );
243	} ) );
244	}
245
246	/**
247	* Renders the component.
248	*
249	* @return {Object}
250	*/
251	render() {
252	const {
253	handleGroupSetup,
254	handleGroupFieldSetup,
255	handleAddGroup,
256	handleCloneGroup,
257	handleRemoveGroup,
258	handleToggleGroup,
259	handleToggleAllGroups
260	} = this;
261
262	const { value, children } = this.props;
263
264	const groupValues = this.getGroupValues();
265	const allGroupsAreCollapsed = this.state.collapsedGroups.length === value.length;
266
267	return children( {
268	groupValues,
269	allGroupsAreCollapsed,
270	handleGroupSetup,
271	handleGroupFieldSetup,
272	handleAddGroup,
273	handleCloneGroup,
274	handleRemoveGroup,
275	handleToggleGroup,
276	handleToggleAllGroups
277	} );
278	}
279	}
280
281	addFilter( 'carbon-fields.complex.block', 'carbon-fields/blocks', ( OriginalComplexField ) => ( props ) => {
282	const {
283	id,
284	name,
285	value,
286	error,
287	field
288	} = props;
289
290	return (
291	<ComplexField { ...props }>
292	{ ( {
293	groupValues,
294	allGroupsAreCollapsed,
295	handleGroupSetup,
296	handleGroupFieldSetup,
297	handleAddGroup,
298	handleCloneGroup,
299	handleRemoveGroup,
300	handleToggleGroup,
301	handleToggleAllGroups
302	} ) => (
303	<OriginalComplexField
304	groupIdKey="_id"
305	groupFilterKey="_type"
306	id={ id }
307	name={ name }
308	value={ value }
309	error={ error }
310	field={ field }
311	groupValues={ groupValues }
312	allGroupsAreCollapsed={ allGroupsAreCollapsed }
313	onGroupSetup={ handleGroupSetup }
314	onGroupFieldSetup={ handleGroupFieldSetup }
315	onAddGroup={ handleAddGroup }
316	onCloneGroup={ handleCloneGroup }
317	onRemoveGroup={ handleRemoveGroup }
318	onToggleGroup={ handleToggleGroup }
319	onToggleAllGroups={ handleToggleAllGroups }
320	onChange={ props.onChange }
321	/>
322	) }
323	</ComplexField>
324	);
325	} );
326