PluginProbe
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
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
post-carousel / src / blocks / table-of-content / styleTab.js

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

537 lines 12.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 import { useState } from "@wordpress/element";
2 import { Background, BoxShadow, SpColorPicker, SPToggleGroupControl, TypographyNew } from "../../components";
3 import Border from "../../components/border/border";
4 import Spacing from "../../components/spacing/spacing";
5
6 import { __ } from "@wordpress/i18n";
7 import { BgIcon, GradientIcon, TransparentIcon } from "../../components/background/svgIcon";
8 import { jsonStringify } from "../shared/helpFn";
9 import Toggle from "../../components/toggle/toggle";
10 export function StyleTab({ attributes, setAttributes }) {
11 const { TOCBorderRadius, tocPadding, tocBorderWidth, tocBg, tocBorder, tocBoxShadow, tocBoxShadowEnable } =
12 attributes;
13 const [contentAreaBgStyleType, setContentAreaBgStyleType] = useState("color");
14 return (
15 <>
16 <SPToggleGroupControl
17 attributes={contentAreaBgStyleType}
18 items={[
19 { label: "Normal", value: "color" },
20 {
21 label: "Hover",
22 value: "hover",
23 },
24 ]}
25 onClick={(val) => setContentAreaBgStyleType(val)}
26 />
27
28 <Background
29 label={__("Background Type", "smart-post-show")}
30 colorLabel="Solid Color"
31 defaultColor="#fff"
32 attributes={tocBg}
33 attributesKey={"tocBg"}
34 setAttributes={setAttributes}
35 colorType={contentAreaBgStyleType}
36 items={[
37 {
38 label: <TransparentIcon />,
39 value: "transparent",
40 tooltip: "Transparent",
41 },
42 {
43 label: <BgIcon />,
44 value: "bgColor",
45 tooltip: "Solid",
46 },
47 {
48 label: <GradientIcon />,
49 value: "gradient",
50 tooltip: "Gradient",
51 },
52 ]}
53 />
54
55 <Border
56 attributes={{
57 border: tocBorder,
58 borderWidth: tocBorderWidth,
59 }}
60 attributesKey={{
61 border: "tocBorder",
62 borderWidth: "tocBorderWidth",
63 }}
64 setAttributes={setAttributes}
65 btnType="normal"
66 />
67 <Spacing
68 label={__("Border Radius", "post-carousel")}
69 attributes={TOCBorderRadius}
70 attributesKey={"TOCBorderRadius"}
71 setAttributes={setAttributes}
72 units={["px", "%", "em"]}
73 defaultValue={{
74 unit: "px",
75 value: {
76 top: "5",
77 right: "5",
78 bottom: "5",
79 left: "5",
80 },
81 }}
82 indicator={"radius"}
83 />
84
85 <>
86 <Toggle
87 label={__("Box Shadow", "post-carousel")}
88 attributes={jsonStringify(tocBoxShadowEnable)}
89 attributesKey={"tocBoxShadowEnable"}
90 setAttributes={setAttributes}
91 />
92 {tocBoxShadowEnable && (
93 <BoxShadow
94 label={__("Box Shadow", "post-carousel")}
95 attributes={tocBoxShadow}
96 attributesKey={"tocBoxShadow"}
97 setAttributes={setAttributes}
98 />
99 )}
100 </>
101
102 <Spacing
103 label={__("Padding", "post-carousel")}
104 attributes={tocPadding}
105 attributesKey={"tocPadding"}
106 setAttributes={setAttributes}
107 units={["px", "%", "em"]}
108 defaultValue={{
109 unit: "px",
110 value: {
111 top: "8",
112 right: "8",
113 bottom: "8",
114 left: "8",
115 },
116 }}
117 />
118 </>
119 );
120 }
121
122 export function TocHeadingStyleTab({ attributes, setAttributes }) {
123 const {
124 contentBorderRadius,
125 headingLineHeight,
126 headingWordSpacing,
127 headingLetterSpacing,
128 headingFontSize,
129 headingTypography,
130 headingColor,
131 headingBg,
132 headingPadding,
133 headingBorderWidth,
134 headingBorder,
135 headingBorderRadius,
136 headingGlobalTypography,
137 } = attributes;
138 const [contentAreaBgStyleType, setContentAreaBgStyleType] = useState("color");
139 return (
140 <>
141 <TypographyNew
142 attributes={{
143 family: headingTypography,
144 familyKey: "headingTypography",
145 fontSize: headingFontSize,
146 fontSizeKey: "headingFontSize",
147 fontSpacing: headingLetterSpacing,
148 fontSpacingKey: "headingLetterSpacing",
149 lineHeight: headingLineHeight,
150 lineHeightKey: "headingLineHeight",
151 wordSpacing: headingWordSpacing,
152 wordSpacingKey: "headingWordSpacing",
153 globalTypo: headingGlobalTypography,
154 globalTypoKey: "headingGlobalTypography",
155 }}
156 setAttributes={setAttributes}
157 spacingDefaultValue={{ unit: "px", value: 0 }}
158 fontSizeDefault={{ unit: "px", value: 16 }}
159 lineDefaultValue={{ unit: "px", value: 20 }}
160 />
161
162 <SPToggleGroupControl
163 attributes={contentAreaBgStyleType}
164 items={[
165 { label: "Normal", value: "color" },
166 {
167 label: "Hover",
168 value: "hover",
169 },
170 ]}
171 onClick={(val) => setContentAreaBgStyleType(val)}
172 />
173
174 <SpColorPicker
175 label={__("Color", "post-carousel")}
176 value={contentAreaBgStyleType === "color" ? headingColor.color : headingColor.hoverColor}
177 onChange={(newColor) =>
178 setAttributes({
179 headingColor: {
180 ...headingColor,
181 ...(contentAreaBgStyleType === "color" ? { color: newColor } : { hoverColor: newColor }),
182 },
183 })
184 }
185 defaultColor="#333333"
186 />
187
188 <Background
189 label={__("Background Type", "post-carousel")}
190 colorLabel="Solid Color"
191 defaultColor="#fff"
192 attributes={headingBg}
193 attributesKey={"headingBg"}
194 setAttributes={setAttributes}
195 colorType={contentAreaBgStyleType}
196 items={[
197 {
198 label: <TransparentIcon />,
199 value: "transparent",
200 tooltip: "Transparent",
201 },
202 {
203 label: <BgIcon />,
204 value: "bgColor",
205 tooltip: "Solid",
206 },
207 {
208 label: <GradientIcon />,
209 value: "gradient",
210 tooltip: "Gradient",
211 },
212 ]}
213 />
214
215 <Border
216 attributes={{
217 border: headingBorder,
218 borderWidth: headingBorderWidth,
219 }}
220 attributesKey={{
221 border: "headingBorder",
222 borderWidth: "headingBorderWidth",
223 }}
224 setAttributes={setAttributes}
225 btnType="normal"
226 />
227 <Spacing
228 label={__("Border Radius", "post-carousel")}
229 attributes={headingBorderRadius}
230 attributesKey={"headingBorderRadius"}
231 setAttributes={setAttributes}
232 units={["px", "%", "em"]}
233 defaultValue={{
234 unit: "px",
235 value: {
236 top: "8",
237 right: "8",
238 bottom: "8",
239 left: "8",
240 },
241 }}
242 indicator={"radius"}
243 />
244
245 <Spacing
246 label={__("Padding", "post-carousel")}
247 attributes={headingPadding}
248 attributesKey={"headingPadding"}
249 setAttributes={setAttributes}
250 units={["px", "%", "em"]}
251 defaultValue={{
252 unit: "px",
253 value: {
254 top: "8",
255 right: "8",
256 bottom: "8",
257 left: "8",
258 },
259 }}
260 indicator={"padding"}
261 />
262 </>
263 );
264 }
265
266 export function TocListBodyStyleTab({ attributes, setAttributes }) {
267 const {
268 contentColor,
269 listLineHeight,
270 listWordSpacing,
271 listLetterSpacing,
272 listFontSize,
273 listTypography,
274 contentChildColor,
275 separatorColor,
276 separator,
277 itemBg,
278 preset,
279 activeLineColor,
280 listGlobalTypography,
281 } = attributes;
282 const [contentAreaBgStyleType, setContentAreaBgStyleType] = useState("color");
283 return (
284 <>
285 <TypographyNew
286 attributes={{
287 family: listTypography,
288 familyKey: "listTypography",
289 fontSize: listFontSize,
290 fontSizeKey: "listFontSize",
291 fontSpacing: listLetterSpacing,
292 fontSpacingKey: "listLetterSpacing",
293 lineHeight: listLineHeight,
294 lineHeightKey: "listLineHeight",
295 wordSpacing: listWordSpacing,
296 wordSpacingKey: "listWordSpacing",
297 globalTypo: listGlobalTypography,
298 globalTypoKey: "listGlobalTypography",
299 }}
300 typographyLabel="List Typography"
301 setAttributes={setAttributes}
302 spacingDefaultValue={{ unit: "px", value: 0 }}
303 fontSizeDefault={{ unit: "px", value: 16 }}
304 lineDefaultValue={{ unit: "px", value: 20 }}
305 />
306
307 <SPToggleGroupControl
308 attributes={contentAreaBgStyleType}
309 items={[
310 { label: "Normal", value: "color" },
311 {
312 label: "Hover & Active",
313 value: "hover",
314 },
315 ]}
316 onClick={(val) => setContentAreaBgStyleType(val)}
317 />
318
319 <SpColorPicker
320 label={__("Parent Item Color", "post-carousel")}
321 value={contentAreaBgStyleType === "color" ? contentColor.color : contentColor.hoverColor}
322 onChange={(newColor) =>
323 setAttributes({
324 contentColor: {
325 ...contentColor,
326 [contentAreaBgStyleType === "color" ? "color" : "hoverColor"]: newColor,
327 },
328 })
329 }
330 defaultColor="#333333"
331 />
332
333 <SpColorPicker
334 label={__("Child Item Color", "post-carousel")}
335 value={contentAreaBgStyleType === "color" ? contentChildColor.color : contentChildColor.hoverColor}
336 onChange={(newColor) =>
337 setAttributes({
338 contentChildColor: {
339 ...contentChildColor,
340 [contentAreaBgStyleType === "color" ? "color" : "hoverColor"]: newColor,
341 },
342 })
343 }
344 defaultColor="#333333"
345 />
346 {["presetThree", "presetFour"].includes(preset) && (
347 <SpColorPicker
348 label={__("Active Line Color", "post-carousel")}
349 value={activeLineColor}
350 onChange={(newColor) =>
351 setAttributes({
352 activeLineColor: newColor,
353 })
354 }
355 defaultColor="#1A74E4"
356 />
357 )}
358
359 {["presetTwo", "presetFive"].includes(preset) && (
360 <Background
361 label={__("Background Type", "smart-post-show")}
362 colorLabel="Solid Color"
363 defaultColor="#dddddd"
364 attributes={itemBg}
365 attributesKey={"itemBg"}
366 setAttributes={setAttributes}
367 colorType={"color"}
368 items={[
369 {
370 label: <TransparentIcon />,
371 value: "transparent",
372 tooltip: "Transparent",
373 },
374 {
375 label: <BgIcon />,
376 value: "bgColor",
377 tooltip: "Solid",
378 },
379 {
380 label: <GradientIcon />,
381 value: "gradient",
382 tooltip: "Gradient",
383 },
384 ]}
385 />
386 )}
387
388 {separator && (
389 <SpColorPicker
390 label={__("Separator Color", "post-carousel")}
391 value={separatorColor}
392 onChange={(newColor) =>
393 setAttributes({
394 separatorColor: newColor,
395 })
396 }
397 defaultColor="#333333"
398 />
399 )}
400 </>
401 );
402 }
403
404 export function TocCollapsibleStyleTab({ attributes, setAttributes }) {
405 const {
406 collapsibleColor,
407 collapsibleBg,
408 collapsibleBorderWidth,
409 collapsibleBorder,
410 collapsiblePadding,
411 collapsibleBorderRadius,
412 collapseLineHeight,
413 collapseWordSpacing,
414 collapseLetterSpacing,
415 collapseFontSize,
416 collapseTypography,
417 CollapsibleButtonType,
418 collapseGlobalTypography,
419 } = attributes;
420 return (
421 <>
422 {CollapsibleButtonType !== "icon" && (
423 <TypographyNew
424 attributes={{
425 family: collapseTypography,
426 familyKey: "collapseTypography",
427 fontSize: collapseFontSize,
428 fontSizeKey: "collapseFontSize",
429 fontSpacing: collapseLetterSpacing,
430 fontSpacingKey: "collapseLetterSpacing",
431 lineHeight: collapseLineHeight,
432 lineHeightKey: "collapseLineHeight",
433 wordSpacing: collapseWordSpacing,
434 wordSpacingKey: "collapseWordSpacing",
435 globalTypo: collapseGlobalTypography,
436 globalTypoKey: "collapseGlobalTypography",
437 }}
438 typographyLabel="Typography"
439 setAttributes={setAttributes}
440 spacingDefaultValue={{ unit: "px", value: 0 }}
441 fontSizeDefault={{ unit: "px", value: 16 }}
442 lineDefaultValue={{ unit: "px", value: 20 }}
443 />
444 )}
445
446 <SpColorPicker
447 label={__("Color", "post-carousel")}
448 value={collapsibleColor.color}
449 onChange={(newColor) =>
450 setAttributes({
451 collapsibleColor: {
452 ...collapsibleColor,
453 color: newColor,
454 },
455 })
456 }
457 defaultColor="#333333"
458 />
459
460 <Background
461 label={__("Background Type", "smart-post-show")}
462 colorLabel="Solid Color"
463 defaultColor="#fff"
464 attributes={collapsibleBg}
465 attributesKey={"collapsibleBg"}
466 setAttributes={setAttributes}
467 colorType={"color"}
468 items={[
469 {
470 label: <TransparentIcon />,
471 value: "transparent",
472 tooltip: "Transparent",
473 },
474 {
475 label: <BgIcon />,
476 value: "bgColor",
477 tooltip: "Solid",
478 },
479 {
480 label: <GradientIcon />,
481 value: "gradient",
482 tooltip: "Gradient",
483 },
484 ]}
485 />
486
487 <Border
488 attributes={{
489 border: collapsibleBorder,
490 borderWidth: collapsibleBorderWidth,
491 }}
492 attributesKey={{
493 border: "collapsibleBorder",
494 borderWidth: "collapsibleBorderWidth",
495 }}
496 setAttributes={setAttributes}
497 btnType="normal"
498 />
499 <Spacing
500 label={__("Border Radius", "post-carousel")}
501 attributes={collapsibleBorderRadius}
502 attributesKey={"collapsibleBorderRadius"}
503 setAttributes={setAttributes}
504 units={["px", "%", "em"]}
505 defaultValue={{
506 unit: "px",
507 value: {
508 top: "8",
509 right: "8",
510 bottom: "8",
511 left: "8",
512 },
513 }}
514 indicator={"radius"}
515 />
516
517 <Spacing
518 label={__("Padding", "post-carousel")}
519 attributes={collapsiblePadding}
520 attributesKey={"collapsiblePadding"}
521 setAttributes={setAttributes}
522 units={["px", "%", "em"]}
523 defaultValue={{
524 unit: "px",
525 value: {
526 top: "8",
527 right: "8",
528 bottom: "8",
529 left: "8",
530 },
531 }}
532 indicator={"padding"}
533 />
534 </>
535 );
536 }
537