Block Animations, Motion & Scroll Effects – Ghost Kit / 2.25.0

Block Animations, Motion & Scroll Effects – Ghost Kit v2.25.0

ghostkit / gutenberg / blocks / form / fields / name / edit.js

edit.js in Block Animations, Motion & Scroll Effects – Ghost Kit 2.25.0, at gutenberg/blocks/form/fields/name/edit.js

200 lines 6.7 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4	import classnames from 'classnames/dedupe';
5
6	/**
7	* Internal dependencies
8	*/
9	import FieldLabel from '../../field-label';
10	import FieldDescription from '../../field-description';
11	import { getFieldAttributes, FieldDefaultSettings } from '../../field-attributes';
12
13	/**
14	* WordPress dependencies
15	*/
16	const { __ } = wp.i18n;
17
18	const { applyFilters } = wp.hooks;
19
20	const { Component, Fragment } = wp.element;
21
22	const { PanelBody, TextControl, SelectControl } = wp.components;
23
24	const { InspectorControls, RichText } = wp.blockEditor;
25
26	/**
27	* Block Edit Class.
28	*/
29	class BlockEdit extends Component {
30	render() {
31	const { attributes, setAttributes } = this.props;
32
33	const {
34	description,
35	nameFields,
36	descriptionLast,
37	placeholderLast,
38	defaultLast,
39	descriptionMiddle,
40	placeholderMiddle,
41	defaultMiddle,
42	} = attributes;
43
44	let { className = '' } = this.props;
45
46	className = classnames(
47	'ghostkit-form-field ghostkit-form-field-name',
48	nameFields === 'first-middle-last' \|\| nameFields === 'first-last'
49	? 'ghostkit-form-field-name-with-last'
50	: '',
51	nameFields === 'first-middle-last' ? 'ghostkit-form-field-name-with-middle' : '',
52	className
53	);
54
55	className = applyFilters('ghostkit.editor.className', className, this.props);
56
57	return (
58	<Fragment>
59	<InspectorControls>
60	<PanelBody>
61	<FieldDefaultSettings {...this.props} />
62	</PanelBody>
63	<PanelBody title={__('Name Fields', 'ghostkit')}>
64	<SelectControl
65	options={[
66	{
67	label: 'First',
68	value: 'first',
69	},
70	{
71	label: 'First Last',
72	value: 'first-last',
73	},
74	{
75	label: 'First Middle Last',
76	value: 'first-middle-last',
77	},
78	]}
79	value={nameFields}
80	onChange={(val) => {
81	if (val === 'first-last') {
82	setAttributes({
83	nameFields: val,
84	description: description \|\| __('First', 'ghostkit'),
85	descriptionLast: descriptionLast \|\| __('Last', 'ghostkit'),
86	});
87	} else if (val === 'first-middle-last') {
88	setAttributes({
89	nameFields: val,
90	description: description \|\| __('First', 'ghostkit'),
91	descriptionLast: descriptionLast \|\| __('Last', 'ghostkit'),
92	descriptionMiddle: descriptionMiddle \|\| __('Middle', 'ghostkit'),
93	});
94	} else {
95	setAttributes({ nameFields: val });
96	}
97	}}
98	/>
99	{nameFields === 'first-middle-last' ? (
100	<Fragment>
101	<TextControl
102	label={__('Middle Placeholder', 'ghostkit')}
103	value={placeholderMiddle}
104	onChange={(val) => setAttributes({ placeholderMiddle: val })}
105	/>
106	<TextControl
107	label={__('Middle Default', 'ghostkit')}
108	value={defaultMiddle}
109	onChange={(val) => setAttributes({ defaultMiddle: val })}
110	/>
111	</Fragment>
112	) : (
113	''
114	)}
115	{nameFields === 'first-middle-last' \|\| nameFields === 'first-last' ? (
116	<Fragment>
117	<TextControl
118	label={__('Last Placeholder', 'ghostkit')}
119	value={placeholderLast}
120	onChange={(val) => setAttributes({ placeholderLast: val })}
121	/>
122	<TextControl
123	label={__('Last Default', 'ghostkit')}
124	value={defaultLast}
125	onChange={(val) => setAttributes({ defaultLast: val })}
126	/>
127	</Fragment>
128	) : (
129	''
130	)}
131	</PanelBody>
132	</InspectorControls>
133	<div className={className}>
134	<FieldLabel {...this.props} />
135
136	{nameFields === 'first-middle-last' \|\| nameFields === 'first-last' ? (
137	<div className="ghostkit-form-field-row">
138	<div className="ghostkit-form-field-name-first">
139	<TextControl type="email" {...getFieldAttributes(attributes)} />
140	<FieldDescription {...this.props} />
141	</div>
142	{nameFields === 'first-middle-last' ? (
143	<div className="ghostkit-form-field-name-middle">
144	<TextControl
145	type="email"
146	{...getFieldAttributes({
147	slug: attributes.slug ? `${attributes.slug}-middle` : null,
148	placeholder: attributes.placeholderMiddle,
149	default: attributes.defaultMiddle,
150	required: attributes.required,
151	})}
152	/>
153	<RichText
154	tagName="small"
155	className="ghostkit-form-field-description"
156	value={descriptionMiddle}
157	placeholder={__('Write description…', 'ghostkit')}
158	onChange={(val) => setAttributes({ descriptionMiddle: val })}
159	/>
160	</div>
161	) : (
162	''
163	)}
164	{nameFields === 'first-middle-last' \|\| nameFields === 'first-last' ? (
165	<div className="ghostkit-form-field-name-last">
166	<TextControl
167	type="email"
168	{...getFieldAttributes({
169	slug: attributes.slug ? `${attributes.slug}-last` : null,
170	placeholder: attributes.placeholderLast,
171	default: attributes.defaultLast,
172	required: attributes.required,
173	})}
174	/>
175	<RichText
176	tagName="small"
177	className="ghostkit-form-field-description"
178	value={descriptionLast}
179	placeholder={__('Write description…', 'ghostkit')}
180	onChange={(val) => setAttributes({ descriptionLast: val })}
181	/>
182	</div>
183	) : (
184	''
185	)}
186	</div>
187	) : (
188	<Fragment>
189	<TextControl type="email" {...getFieldAttributes(attributes)} />
190	<FieldDescription {...this.props} />
191	</Fragment>
192	)}
193	</div>
194	</Fragment>
195	);
196	}
197	}
198
199	export default BlockEdit;
200