Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.8

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.8

post-carousel / src / blocks / smart-image / styleTab.js

styleTab.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/blocks/smart-image/styleTab.js

339 lines 8.9 KB

Raw Download Zip

1	import { __ } from "@wordpress/i18n";
2	import { useState } from "@wordpress/element";
3	import ToggleGroupControl from "../../components/toggleGroupControl/toggleGroupControl";
4	import {
5	Background,
6	Border,
7	BoxShadow,
8	Spacing,
9	SpColorPicker,
10	SPRangeControl,
11	Toggle,
12	TypographyNew,
13	} from "../../components";
14	import { BgIcon, GradientIcon, TransparentIcon } from "../../components/background/svgIcon";
15
16	// Smart Image Style Tab Panel
17	export const SmartImageStyleTab = ({ attributes, setAttributes }) => {
18	const {
19	enableLink,
20	linkType,
21	imageBorder,
22	imageBorderWidth,
23	imageBorderRadius,
24	imageBoxShadowEnable,
25	imageBoxShadow,
26	imageFilter,
27	imageBlur,
28	imageBrightness,
29	imageContrast,
30	imageSaturation,
31	imageHue,
32	linkBtnTypography,
33	linkBtnFontSize,
34	linkBtnLineHeight,
35	linkBtnLetterSpacing,
36	linkBtnWordSpacing,
37	linkButtonColor,
38	linkButtonBg,
39	linkButtonBorder,
40	linkBtnBorderWidth,
41	linkBtnBorderWidthHover,
42	linkBtnBorderRadius,
43	linkBtnBorderRadiusHover,
44	linkBtnBoxShadowEnable,
45	linkBtnBoxShadow,
46	linkBtnBoxShadowEnableHover,
47	linkBtnBoxShadowHover,
48	linkBtnPadding,
49	} = attributes;
50
51	const [linkTypeStyle, setLinkTypeStyle] = useState("image");
52	const [colorState, setColorState] = useState("normal");
53
54	return (
55	<>
56	{enableLink && "button" === linkType && (
57	<>
58	<ToggleGroupControl
59	attributes={linkTypeStyle}
60	attributesKey={"linkTypeStyle"}
61	onClick={(newValue) => setLinkTypeStyle(newValue)}
62	items={[
63	{ label: "Image", value: "image" },
64	{ label: "Button", value: "button" },
65	]}
66	/>
67	</>
68	)}
69	{"image" === linkTypeStyle ? (
70	<>
71	<Border
72	attributes={{
73	border: imageBorder,
74	borderWidth: imageBorderWidth,
75	}}
76	attributesKey={{
77	border: "imageBorder",
78	borderWidth: "imageBorderWidth",
79	}}
80	setAttributes={setAttributes}
81	/>
82	<Spacing
83	label={__("Border Radius", "post-carousel")}
84	attributes={imageBorderRadius}
85	attributesKey={"imageBorderRadius"}
86	setAttributes={setAttributes}
87	units={["px", "%", "em"]}
88	defaultValue={{ value: 0, unit: "%" }}
89	/>
90	<Toggle
91	label={__("Box Shadow Enable", "post-carousel")}
92	attributes={imageBoxShadowEnable}
93	attributesKey={"imageBoxShadowEnable"}
94	setAttributes={setAttributes}
95	/>
96	{imageBoxShadowEnable && (
97	<BoxShadow
98	attributes={imageBoxShadow}
99	attributesKey={"imageBoxShadow"}
100	setAttributes={setAttributes}
101	/>
102	)}
103	<Toggle
104	label={__("Image Filter", "post-carousel")}
105	attributes={imageFilter}
106	attributesKey={"imageFilter"}
107	setAttributes={setAttributes}
108	pro={true}
109	/>
110	{imageFilter && (
111	<>
112	<SPRangeControl
113	label={__("Blur", "post-carousel")}
114	attributes={imageBlur}
115	attributesKey={"imageBlur"}
116	setAttributes={setAttributes}
117	defaultValue={{ value: "" }}
118	/>
119	<SPRangeControl
120	label={__("Brightness", "post-carousel")}
121	attributes={imageBrightness}
122	attributesKey={"imageBrightness"}
123	setAttributes={setAttributes}
124	defaultValue={{ value: "" }}
125	/>
126	<SPRangeControl
127	label={__("Contrast", "post-carousel")}
128	attributes={imageContrast}
129	attributesKey={"imageContrast"}
130	setAttributes={setAttributes}
131	defaultValue={{ value: "" }}
132	/>
133	<SPRangeControl
134	label={__("Saturation", "post-carousel")}
135	attributes={imageSaturation}
136	attributesKey={"imageSaturation"}
137	setAttributes={setAttributes}
138	defaultValue={{ value: "" }}
139	/>
140	<SPRangeControl
141	label={__("Hue", "post-carousel")}
142	attributes={imageHue}
143	attributesKey={"imageHue"}
144	setAttributes={setAttributes}
145	defaultValue={{ value: "" }}
146	/>
147	</>
148	)}
149	</>
150	) : (
151	<>
152	<TypographyNew
153	attributes={{
154	family: linkBtnTypography,
155	familyKey: "linkBtnTypography",
156	fontSize: linkBtnFontSize,
157	fontSizeKey: "linkBtnFontSize",
158	lineHeight: linkBtnLineHeight,
159	lineHeightKey: "linkBtnLineHeight",
160	fontSpacing: linkBtnLetterSpacing,
161	fontSpacingKey: "linkBtnLetterSpacing",
162	wordSpacing: linkBtnWordSpacing,
163	wordSpacingKey: "linkBtnWordSpacing",
164	}}
165	setAttributes={setAttributes}
166	/>
167	<ToggleGroupControl
168	attributes={colorState}
169	onClick={(newValue) => {
170	setColorState(newValue);
171	}}
172	items={[
173	{ label: "Normal", value: "normal" },
174	{ label: "Hover", value: "hover" },
175	]}
176	/>
177	{"normal" === colorState ? (
178	<>
179	<SpColorPicker
180	label={__("Color", "post-carousel")}
181	value={linkButtonColor.color}
182	onChange={(newValue) => {
183	setAttributes({
184	linkButtonColor: {
185	...linkButtonColor,
186	color: newValue,
187	},
188	});
189	}}
190	/>
191	<Background
192	label={__("Background Type", "post-carousel")}
193	colorLabel="Background Color"
194	defaultColor="#1A74E4"
195	attributes={linkButtonBg}
196	attributesKey={"linkButtonBg"}
197	setAttributes={setAttributes}
198	colorType={"color"}
199	items={[
200	{
201	label: <TransparentIcon />,
202	value: "transparent",
203	tooltip: "Transparent",
204	},
205	{
206	label: <BgIcon />,
207	value: "bgColor",
208	tooltip: "Solid",
209	},
210	{
211	label: <GradientIcon />,
212	value: "gradient",
213	tooltip: "Gradient",
214	},
215	]}
216	/>
217	<Border
218	attributes={{
219	border: linkButtonBorder,
220	borderWidth: linkBtnBorderWidth,
221	}}
222	attributesKey={{
223	border: "linkButtonBorder",
224	borderWidth: "linkBtnBorderWidth",
225	}}
226	setAttributes={setAttributes}
227	btnType={"normal"}
228	/>
229	<Spacing
230	label={__("Border Radius", "post-carousel")}
231	attributes={linkBtnBorderRadius}
232	attributesKey={"linkBtnBorderRadius"}
233	setAttributes={setAttributes}
234	units={["px", "%", "em"]}
235	defaultValue={{ value: 0, unit: "px" }}
236	/>
237	<Toggle
238	label={__("Box Shadow Enable", "post-carousel")}
239	attributes={linkBtnBoxShadowEnable}
240	attributesKey={"linkBtnBoxShadowEnable"}
241	setAttributes={setAttributes}
242	/>
243	{linkBtnBoxShadowEnable && (
244	<BoxShadow
245	attributes={linkBtnBoxShadow}
246	attributesKey={"linkBtnBoxShadow"}
247	setAttributes={setAttributes}
248	/>
249	)}
250	</>
251	) : (
252	<>
253	<SpColorPicker
254	label={__("Color", "post-carousel")}
255	value={linkButtonColor.hover}
256	onChange={(newValue) => {
257	setAttributes({
258	linkButtonColor: {
259	...linkButtonColor,
260	hover: newValue,
261	},
262	});
263	}}
264	/>
265	<Background
266	label={__("Background Type", "post-carousel")}
267	colorLabel="Background Color"
268	defaultColor="#1A74E4"
269	attributes={linkButtonBg}
270	attributesKey={"linkButtonBg"}
271	setAttributes={setAttributes}
272	colorType={"hover"}
273	items={[
274	{
275	label: <TransparentIcon />,
276	value: "transparent",
277	tooltip: "Transparent",
278	},
279	{
280	label: <BgIcon />,
281	value: "bgColor",
282	tooltip: "Solid",
283	},
284	{
285	label: <GradientIcon />,
286	value: "gradient",
287	tooltip: "Gradient",
288	},
289	]}
290	/>
291	<Border
292	attributes={{
293	border: linkButtonBorder,
294	borderWidth: linkBtnBorderWidthHover,
295	}}
296	attributesKey={{
297	border: "linkButtonBorder",
298	borderWidth: "linkBtnBorderWidthHover",
299	}}
300	setAttributes={setAttributes}
301	btnType={"hover"}
302	/>
303	<Spacing
304	label={__("Border Radius", "post-carousel")}
305	attributes={linkBtnBorderRadiusHover}
306	attributesKey={"linkBtnBorderRadiusHover"}
307	setAttributes={setAttributes}
308	units={["px", "%", "em"]}
309	defaultValue={{ value: 0, unit: "px" }}
310	/>
311	<Toggle
312	label={__("Box Shadow Enable", "post-carousel")}
313	attributes={linkBtnBoxShadowEnableHover}
314	attributesKey={"linkBtnBoxShadowEnableHover"}
315	setAttributes={setAttributes}
316	/>
317	{linkBtnBoxShadowEnableHover && (
318	<BoxShadow
319	attributes={linkBtnBoxShadowHover}
320	attributesKey={"linkBtnBoxShadowHover"}
321	setAttributes={setAttributes}
322	/>
323	)}
324	</>
325	)}
326	<Spacing
327	label={__("Padding", "post-carousel")}
328	attributes={linkBtnPadding}
329	attributesKey={"linkBtnPadding"}
330	setAttributes={setAttributes}
331	units={["px", "%", "em"]}
332	defaultValue={{ value: 0, unit: "px" }}
333	/>
334	</>
335	)}
336	</>
337	);
338	};
339