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 / components / block-edit / index.js

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

316 lines 6.7 KB

Raw Download Zip

1	/**
2	* External dependencies.
3	*/
4	import cx from 'classnames';
5	import { Component, Fragment } from '@wordpress/element';
6	import { ToolbarGroup, PanelBody } from '@wordpress/components';
7	import {
8	InnerBlocks,
9	BlockControls,
10	InspectorControls
11	} from '@wordpress/editor';
12	import { withSelect } from '@wordpress/data';
13	import { __ } from '@wordpress/i18n';
14	import {
15	get,
16	map,
17	find
18	} from 'lodash';
19
20	/**
21	* Carbon Fields dependencies.
22	*/
23	import { getFieldType } from '@carbon-fields/core';
24
25	/**
26	* Internal dependencies.
27	*/
28	import './style.scss';
29	import Field from '../field';
30	import ServerSideRender from '../server-side-render';
31
32	class BlockEdit extends Component {
33	/**
34	* Local state.
35	*
36	* @type {Object}
37	*/
38	state = {
39	mode: this.props.container.settings.mode,
40	currentTab: this.props.supportsTabs
41	? Object.keys( this.props.container.settings.tabs )[ 0 ]
42	: null
43	};
44
45	/**
46	* Handles the change of the field's value.
47	*
48	* @param {string} fieldId
49	* @param {mixed} value
50	* @return {void}
51	*/
52	handleFieldChange = ( fieldId, value ) => {
53	const { attributes, setAttributes } = this.props;
54
55	const fieldName = fieldId.replace( /^.+__(.+)?$/, '$1' );
56
57	setAttributes( {
58	data: {
59	...attributes.data,
60	[ fieldName ]: value
61	}
62	} );
63	}
64
65	/**
66	* Handles changing of the mode.
67	*
68	* @return {void}
69	*/
70	handleModeChange = () => {
71	this.setState( {
72	mode: this.isInEditMode ? 'preview' : 'edit'
73	} );
74	}
75
76	/**
77	* Handles changing on the tabs.
78	*
79	* @param {string} tab
80	* @return {void}
81	*/
82	handleTabChange = ( tab ) => {
83	this.setState( {
84	currentTab: tab
85	} );
86	}
87
88	/**
89	* Returns whether the block is in edit mode.
90	*
91	* @return {boolean}
92	*/
93	get isInEditMode() {
94	return this.state.mode === 'edit';
95	}
96
97	/**
98	* Returns whether the block is in edit mode.
99	*
100	* @return {boolean}
101	*/
102	get isInPreviewMode() {
103	return this.state.mode === 'preview';
104	}
105
106	/**
107	* Renders a field.
108	*
109	* @param {Object} field
110	* @param {number} index
111	* @return {Object}
112	*/
113	renderField = ( field, index ) => {
114	const {
115	clientId,
116	container,
117	attributes
118	} = this.props;
119
120	const FieldEdit = getFieldType( field.type, 'block' );
121
122	if ( ! FieldEdit ) {
123	return null;
124	}
125
126	const id = `cf-${ clientId }__${ field.base_name }`;
127	const value = get( attributes.data, field.base_name, field.default_value );
128
129	return (
130	<Field
131	key={ index }
132	id={ id }
133	field={ field }
134	>
135	<FieldEdit
136	id={ id }
137	containerId={ container.id }
138	blockId={ clientId }
139	value={ value }
140	field={ field }
141	name={ field.base_name }
142	onChange={ this.handleFieldChange }
143	/>
144	</Field>
145	);
146	}
147
148	/**
149	* Renders the fields in tabs.
150	*
151	* @param {string[]} fieldNames
152	* @return {Object[]}
153	*/
154	renderTabbedFields( fieldNames ) {
155	const { fields } = this.props;
156
157	return map( fieldNames, ( fieldName, index ) => {
158	const field = find( fields, [ 'name', fieldName ] );
159
160	return this.renderField( field, index );
161	} );
162	}
163
164	/**
165	* Renders the fields that aren't in tabs.
166	*
167	* @return {Object}
168	*/
169	renderNonTabbedFields() {
170	return (
171	<div className="cf-block__fields">
172	{ this.props.fields.map( this.renderField ) }
173	</div>
174	);
175	}
176
177	/**
178	* Render the component.
179	*
180	* @return {Object}
181	*/
182	render() {
183	const { currentTab } = this.state;
184
185	const {
186	clientId,
187	container,
188	supportsTabs,
189	supportsPreview,
190	supportsInnerBlocks
191	} = this.props;
192
193	const innerBlocks = ( ( supportsInnerBlocks && this.isInEditMode ) && (
194	<div className="cf-block__inner-blocks">
195	<InnerBlocks
196	template={ container.settings.inner_blocks.template }
197	templateLock={ container.settings.inner_blocks.template_lock }
198	allowedBlocks={ container.settings.inner_blocks.allowed_blocks }
199	/>
200	</div>
201	) );
202
203	return (
204	<Fragment>
205	{ container.settings.inner_blocks.position === 'above' && innerBlocks }
206
207	{ supportsPreview && (
208	<BlockControls>
209	<ToolbarGroup label="Options" controls={ [ {
210	icon: this.isInEditMode
211	? 'visibility'
212	: 'hidden',
213	title: this.isInEditMode
214	? __( 'Show preview', 'carbon-fields-ui' )
215	: __( 'Hide preview', 'carbon-fields-ui' ),
216	onClick: this.handleModeChange
217	} ] } />
218	</BlockControls>
219	) }
220
221	{ ( this.isInEditMode && supportsTabs ) && (
222	<div className="cf-block__tabs">
223	<ul className="cf-block__tabs-list">
224	{ map( container.settings.tabs, ( fieldNames, tabName ) => {
225	const classes = cx(
226	'cf-block__tabs-item',
227	{
228	'cf-block__tabs-item--current': tabName === currentTab
229	}
230	);
231
232	return (
233	<li
234	key={ tabName }
235	className={ classes }
236	onClick={ () => this.handleTabChange( tabName ) }
237	>
238	{ tabName }
239	</li>
240	);
241	} ) }
242	</ul>
243	</div>
244	) }
245
246	{ this.isInEditMode && (
247	supportsTabs
248	? (
249	map( container.settings.tabs, ( fieldNames, tabName ) => {
250	return (
251	<div className="cf-block__fields" key={ tabName } hidden={ tabName !== currentTab }>
252	{ this.renderTabbedFields( fieldNames ) }
253	</div>
254	);
255	} )
256	)
257	: (
258	this.renderNonTabbedFields()
259	)
260	) }
261
262	{ this.isInPreviewMode && (
263	<div className="cf-block__preview">
264	<ServerSideRender clientId={ clientId } />
265	</div>
266	) }
267
268	{ container.settings.inner_blocks.position === 'below' && innerBlocks }
269
270	{ this.isInPreviewMode && (
271	<InspectorControls>
272	{
273	supportsTabs
274	? (
275	map( container.settings.tabs, ( fieldNames, tabName ) => {
276	return (
277	<PanelBody key={ tabName } title={ tabName }>
278	<div className="cf-block__fields">
279	{ this.renderTabbedFields( fieldNames ) }
280	</div>
281	</PanelBody>
282	);
283	} )
284	)
285	: (
286	<PanelBody title={ __( 'Fields', 'carbon-fields-ui' ) }>
287	{ this.renderNonTabbedFields() }
288	</PanelBody>
289	)
290	}
291	</InspectorControls>
292	) }
293	</Fragment>
294	);
295	}
296	}
297
298	export default withSelect( ( select, { clientId, name } ) => {
299	const { hasBlockSupport } = select( 'core/blocks' );
300	const { getBlockRootClientId } = select( 'core/block-editor' );
301	const {
302	getContainerDefinitionByBlockName,
303	getFieldDefinitionsByBlockName
304	} = select( 'carbon-fields/blocks' );
305
306	const rootClientId = getBlockRootClientId( clientId );
307
308	return {
309	container: getContainerDefinitionByBlockName( name ),
310	fields: getFieldDefinitionsByBlockName( name ),
311	supportsTabs: hasBlockSupport( name, 'tabs' ),
312	supportsPreview: hasBlockSupport( name, 'preview' ) && ! rootClientId,
313	supportsInnerBlocks: hasBlockSupport( name, 'innerBlocks' )
314	};
315	} )( BlockEdit );
316