GutSlider – All in One Slider and Carousel Blocks for Gutenberg / 2.11.1

GutSlider – All in One Slider and Carousel Blocks for Gutenberg v2.11.1

slider-blocks / src / controls / boxshadow-control / index.js

index.js in GutSlider – All in One Slider and Carousel Blocks for Gutenberg 2.11.1, at src/controls/boxshadow-control/index.js

292 lines 15.6 KB

Raw Download Zip

1	/**
2	* WordPress dependencies
3	*/
4	import { Button, Flex, FlexItem, FlexBlock, Popover, ColorIndicator, ColorPicker, RangeControl } from '@wordpress/components';
5
6	import { withInstanceId } from '@wordpress/compose';
7	import { useState } from '@wordpress/element';
8	import { __ } from '@wordpress/i18n';
9
10	/**
11	* Internal dependencies
12	*/
13	import ResetButton from '../reset-btn';
14	import ButtonsGroupControl from '../buttons-group';
15	import { BOX_SHADOW_POSITION } from '../../constants';
16	import ResLabelControl from '../res-label-control';
17
18	const BoxShadowControl = ({ instanceId, label, controlName, objAttrs }) => {
19	const [boxshadowPanel, setBoxshadowPanel] = useState(false);
20	const [colorpanel, setColorpanel] = useState(false);
21
22	const colors = wp.data.select('core/editor').getEditorSettings().colors;
23
24	const id = `boxshadow-control-${instanceId}`;
25
26	const { attributes, setAttributes } = objAttrs;
27
28	const {
29	[`${controlName}BoxShadowPosition`]: boxShadowPosition = 'outset',
30	[`${controlName}BoxShadowColor`]: boxShadowColor,
31	[`${controlName}BoxShadowHorizontal`]: boxShadowHorizontal,
32	[`${controlName}BoxShadowVertical`]: boxShadowVertical,
33	[`${controlName}BoxShadowBlur`]: boxShadowBlur,
34	[`${controlName}BoxShadowSpread`]: boxShadowSpread
35	} = attributes;
36
37	return (
38	<div className="gkits-control-container box-shadow-control">
39	<Flex>
40	<FlexBlock>
41	<ResLabelControl
42	label={label}
43	requiredProps={{
44	id,
45	setAttributes
46	}}
47	noResBtns={true}
48	/>
49	</FlexBlock>
50	<FlexItem>
51	<Button
52	icon="image-rotate"
53	label={__('Reset', 'slider-blocks')}
54	onClick={() => {
55	setAttributes({
56	[`${controlName}BoxShadowPosition`]: 'outset',
57	[`${controlName}BoxShadowColor`]: '',
58	[`${controlName}BoxShadowHorizontal`]: '',
59	[`${controlName}BoxShadowVertical`]: '',
60	[`${controlName}BoxShadowBlur`]: '',
61	[`${controlName}BoxShadowSpread`]: ''
62	});
63	}}
64	className={`gkits-reset-button range-btn ${
65	boxShadowColor \|\| boxShadowHorizontal \|\| boxShadowVertical \|\| boxShadowSpread \|\| boxShadowBlur
66	? 'gkits-reset-button'
67	: 'disabled'
68	}`}
69	/>
70	<Button className="shadow-indicator" onClick={() => setBoxshadowPanel(true)} icon="admin-appearance" />
71	{boxshadowPanel && (
72	<Popover position="bottom right" onFocusOutside={() => setBoxshadowPanel(false)} offset={10}>
73	<div className="gkits-shadow-panel">
74	<div className="position">
75	<div className="gkits-mb-8">
76	<ResLabelControl
77	label={__('Position', 'slider-blocks')}
78	requiredProps={{
79	id,
80	setAttributes
81	}}
82	noResBtns={true}
83	/>
84	</div>
85	<ButtonsGroupControl
86	value={boxShadowPosition}
87	onChange={data =>
88	setAttributes({
89	[`${controlName}BoxShadowPosition`]: data
90	})
91	}
92	options={BOX_SHADOW_POSITION}
93	hasIcons={false}
94	/>
95	</div>
96	<div className="box-shadow-color-picker">
97	<Flex>
98	<FlexBlock>
99	<div className="gkits-mb-8">
100	<ResLabelControl
101	label={__('Color', 'slider-blocks')}
102	requiredProps={{
103	id,
104	setAttributes
105	}}
106	noResBtns={true}
107	/>
108	</div>
109	</FlexBlock>
110	<FlexItem>
111	<Button
112	icon="image-rotate"
113	label={__('Reset', 'slider-blocks')}
114	onClick={() =>
115	setAttributes({
116	[`${controlName}BoxShadowColor`]: ''
117	})
118	}
119	className={`gkits-reset-button ${boxShadowColor ? 'active' : 'disabled'}`}
120	/>
121	</FlexItem>
122	<FlexItem>
123	<button className="color-indicator" onClick={() => setColorpanel(true)}>
124	<ColorIndicator colorValue={boxShadowColor} />
125	</button>
126	</FlexItem>
127	</Flex>
128
129	{colorpanel && (
130	<Popover onFocusOutside={() => setColorpanel(false)} position="bottom center" offset={5}>
131	<ColorPicker
132	color={boxShadowColor}
133	onChangeComplete={value =>
134	setAttributes({
135	[`${controlName}BoxShadowColor`]: value.hex
136	})
137	}
138	disableAlpha={false}
139	/>
140	<div className="gkits-colors-palette">
141	<label className="gkits-label gkits-mb-8" htmlFor="gkits-colors-palette">
142	{__('Theme Colors', 'slider-blocks')}
143	</label>
144	<div id="gkits-colors-palette">
145	{colors &&
146	colors.map((paletteColor, index) => {
147	return (
148	<ColorIndicator
149	className={`gkits-color-indicator ${
150	paletteColor.color === boxShadowColor ? 'active' : ''
151	}`}
152	title={paletteColor.name}
153	key={index}
154	colorValue={paletteColor.color}
155	onClick={() =>
156	setAttributes({
157	[`${controlName}BoxShadowColor`]: paletteColor.color
158	})
159	}
160	/>
161	);
162	})}
163	</div>
164	</div>
165	</Popover>
166	)}
167	</div>
168	<div className="gkits-mb-16">
169	<ResLabelControl
170	label={__('Horizontal', 'slider-blocks')}
171	requiredProps={{
172	id,
173	setAttributes
174	}}
175	noResBtns={true}
176	/>
177	<ResetButton
178	onReset={() =>
179	setAttributes({
180	[`${controlName}BoxShadowHorizontal`]: ''
181	})
182	}
183	value={boxShadowHorizontal}
184	>
185	<RangeControl
186	value={boxShadowHorizontal}
187	onChange={data =>
188	setAttributes({
189	[`${controlName}BoxShadowHorizontal`]: data
190	})
191	}
192	min={-100}
193	max={100}
194	/>
195	</ResetButton>
196	</div>
197	<div className="gkits-mb-16">
198	<ResLabelControl
199	label={__('Vertical', 'slider-blocks')}
200	requiredProps={{
201	id,
202	setAttributes
203	}}
204	noResBtns={true}
205	/>
206	<ResetButton
207	onReset={() =>
208	setAttributes({
209	[`${controlName}BoxShadowVertical`]: ''
210	})
211	}
212	value={boxShadowVertical}
213	>
214	<RangeControl
215	value={boxShadowVertical}
216	onChange={data =>
217	setAttributes({
218	[`${controlName}BoxShadowVertical`]: data
219	})
220	}
221	min={-100}
222	max={100}
223	/>
224	</ResetButton>
225	</div>
226	<div className="gkits-mb-16">
227	<ResLabelControl
228	label={__('Blur', 'slider-blocks')}
229	requiredProps={{
230	id,
231	setAttributes
232	}}
233	noResBtns={true}
234	/>
235	<ResetButton
236	onReset={() =>
237	setAttributes({
238	[`${controlName}BoxShadowBlur`]: ''
239	})
240	}
241	value={boxShadowBlur}
242	>
243	<RangeControl
244	value={boxShadowBlur}
245	onChange={data =>
246	setAttributes({
247	[`${controlName}BoxShadowBlur`]: data
248	})
249	}
250	min={0}
251	max={100}
252	/>
253	</ResetButton>
254	</div>
255	<ResLabelControl
256	label={__('Spread', 'slider-blocks')}
257	requiredProps={{
258	id,
259	setAttributes
260	}}
261	noResBtns={true}
262	/>
263	<ResetButton
264	onReset={() =>
265	setAttributes({
266	[`${controlName}BoxShadowSpread`]: ''
267	})
268	}
269	value={boxShadowSpread}
270	>
271	<RangeControl
272	value={boxShadowSpread}
273	onChange={data =>
274	setAttributes({
275	[`${controlName}BoxShadowSpread`]: data
276	})
277	}
278	min={0}
279	max={100}
280	/>
281	</ResetButton>
282	</div>
283	</Popover>
284	)}
285	</FlexItem>
286	</Flex>
287	</div>
288	);
289	};
290
291	export default withInstanceId(BoxShadowControl);
292