PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.7
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.7
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 / column / styleTab.js

styleTab.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.7, at src/blocks/column/styleTab.js

419 lines 11.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 import { __ } from "@wordpress/i18n";
2 import { useState } from "@wordpress/element";
3 import {
4 Background,
5 Border,
6 BoxShadow,
7 Divider,
8 Spacing,
9 SPRangeControl,
10 SPToggleGroupControl,
11 Toggle,
12 } from "../../components";
13 import { allBgType, imageBlandMode, overlayTypeItems, solidGradientBgType } from "../../controls/constants";
14 import SelectField from "../../components/selectField/selectField";
15 import { useDeviceType } from "../../controls/controls";
16
17 export const ContainerColumnStyleTab = ({ attributes, setAttributes }) => {
18 const [bgState, setBgState] = useState("color");
19 // const [ shadowState, setShadowState ] = useState( 'color' );
20 const {
21 columnBg,
22 columnBgImage,
23 columnBgVideo,
24 columnBorder,
25 columnBorderWidth,
26 columnBorderWidthHover,
27 columnBorderRadius,
28 columnBorderRadiusHover,
29 columnBoxShadowEnable,
30 columnBoxShadow,
31 columnPadding,
32 columnMargin,
33 columnBgImageHover,
34 columnBoxShadowEnableHover,
35 columnBoxShadowHover,
36 columnOverlayType,
37 columnOverlayBg,
38 columnOverlayOpacity,
39 columnOverlayBlandMode,
40 columnOverlayTypeHover,
41 columnOverlayOpacityHover,
42 columnOverlayBlandModeHover,
43 } = attributes;
44 const deviceType = useDeviceType();
45
46 const columnBgBtn = bgState === "color" ? allBgType : solidGradientBgType;
47
48 const overlayTypeHandler = (newValue, key) => {
49 setAttributes({
50 [key]: newValue,
51 columnOverlayBg: {
52 ...columnOverlayBg,
53 [bgState]: {
54 ...columnOverlayBg[bgState],
55 style: newValue === "gradient-overlay" ? "gradient" : "bgColor",
56 },
57 },
58 });
59 };
60 const overlayOpacityHandler = (newValue, key) => {
61 const attr = attributes[key];
62 setAttributes({
63 [key]: {
64 ...attr,
65 device: { ...attr.device, [deviceType]: newValue.value },
66 },
67 });
68 };
69
70 return (
71 <>
72 <SPToggleGroupControl
73 attributes={bgState}
74 onClick={(value) => setBgState(value)}
75 items={[
76 {
77 label: "Normal",
78 value: "color",
79 },
80 {
81 label: "Hover",
82 value: "hover",
83 },
84 ]}
85 />
86 <Background
87 label={__("Background", "post-carousel")}
88 attributes={columnBg}
89 attributesKey={"columnBg"}
90 setAttributes={setAttributes}
91 colorType={bgState}
92 imageObj={{
93 imageKey: "columnBgImage",
94 hoverKey: "columnBgImageHover",
95 backgroundImage: columnBgImage,
96 hoverImg: columnBgImageHover,
97 }}
98 videoObj={{
99 imageKey: "columnBgVideo",
100 backgroundImage: columnBgVideo,
101 }}
102 items={columnBgBtn}
103 />
104 {"color" === bgState && (
105 <>
106 {["image", "video"].includes(columnBg.color.style) && (
107 <>
108 <SelectField
109 label={__("Overlay Type", "post-carousel")}
110 attributes={columnOverlayType}
111 attributesKey={"columnOverlayType"}
112 setAttributes={setAttributes}
113 onChange={(newValue) => overlayTypeHandler(newValue, "columnOverlayType")}
114 items={overlayTypeItems}
115 />
116 {"no-overlay" !== columnOverlayType && (
117 <>
118 <p style={{ marginBottom: "0" }}>
119 {columnOverlayBg[bgState].style === "gradient" && "Gradient Color"}
120 </p>
121 <Background
122 attributes={columnOverlayBg}
123 attributesKey={"columnOverlayBg"}
124 setAttributes={setAttributes}
125 colorType={bgState}
126 />
127 <SPRangeControl
128 label={__("Opacity", "post-carousel")}
129 attributes={columnOverlayOpacity}
130 attributesKey={"columnOverlayOpacity"}
131 setAttributes={setAttributes}
132 units={["%"]}
133 max={100}
134 defaultValue={{
135 unit: "%",
136 value: 75,
137 }}
138 customValue={columnOverlayOpacity.device?.[deviceType]}
139 onValueChange={(newValue) =>
140 overlayOpacityHandler(newValue, "columnOverlayOpacity")
141 }
142 />
143 <SelectField
144 label={__("Blend Mode", "post-carousel")}
145 attributes={columnOverlayBlandMode}
146 attributesKey={"columnOverlayBlandMode"}
147 setAttributes={setAttributes}
148 items={imageBlandMode}
149 />
150 </>
151 )}
152 </>
153 )}
154 <Border
155 label={__("Border", "post-carousel")}
156 attributes={{
157 border: columnBorder,
158 borderWidth: columnBorderWidth,
159 }}
160 attributesKey={{
161 border: "columnBorder",
162 borderWidth: "columnBorderWidth",
163 }}
164 setAttributes={setAttributes}
165 units={["px", "%", "em"]}
166 defaultValue={{ unit: "px", value: 1 }}
167 btnType={"normal"}
168 />
169 <Spacing
170 label={__("Border Radius", "post-carousel")}
171 attributes={columnBorderRadius}
172 attributesKey={"columnBorderRadius"}
173 setAttributes={setAttributes}
174 units={["px", "%", "em"]}
175 defaultValue={{
176 unit: "px",
177 value: { top: 0, right: 0, bottom: 0, left: 0 },
178 }}
179 indicator={"radius"}
180 />
181 <Toggle
182 label={__("Box Shadow", "post-carousel")}
183 attributes={columnBoxShadowEnable}
184 attributesKey={"columnBoxShadowEnable"}
185 setAttributes={setAttributes}
186 />
187 {columnBoxShadowEnable && (
188 <>
189 <BoxShadow
190 label={__("Box Shadow Value", "post-carousel")}
191 attributes={columnBoxShadow}
192 attributesKey={"columnBoxShadow"}
193 setAttributes={setAttributes}
194 />
195 </>
196 )}
197 </>
198 )}
199 {"hover" === bgState && (
200 <>
201 {"image" === columnBg.hover.style && (
202 <>
203 <SelectField
204 label={__("Overlay Type on Hover", "post-carousel")}
205 attributes={columnOverlayTypeHover}
206 attributesKey={"columnOverlayTypeHover"}
207 setAttributes={setAttributes}
208 onChange={(newValue) => overlayTypeHandler(newValue, "columnOverlayTypeHover")}
209 items={overlayTypeItems}
210 />
211 {"no-overlay" !== columnOverlayTypeHover && (
212 <>
213 <p style={{ marginBottom: "0" }}>
214 {columnOverlayBg[bgState].style === "gradient" && "Gradient Color"}
215 </p>
216 <Background
217 attributes={columnOverlayBg}
218 attributesKey={"columnOverlayBg"}
219 setAttributes={setAttributes}
220 colorType={bgState}
221 />
222 <SPRangeControl
223 label={__("Hover Opacity", "post-carousel")}
224 attributes={columnOverlayOpacityHover}
225 attributesKey={"columnOverlayOpacityHover"}
226 setAttributes={setAttributes}
227 units={["%"]}
228 max={100}
229 defaultValue={{
230 unit: "%",
231 value: 50,
232 }}
233 customValue={columnOverlayOpacityHover.device?.[deviceType]}
234 onValueChange={(newValue) =>
235 overlayOpacityHandler(newValue, "columnOverlayOpacityHover")
236 }
237 />
238 <SelectField
239 label={__("Blend Mode", "post-carousel")}
240 attributes={columnOverlayBlandModeHover}
241 attributesKey={"columnOverlayBlandModeHover"}
242 setAttributes={setAttributes}
243 items={imageBlandMode}
244 />
245 </>
246 )}
247 </>
248 )}
249 <Border
250 label={__("Border", "post-carousel")}
251 attributes={{
252 border: columnBorder,
253 borderWidth: columnBorderWidthHover,
254 }}
255 attributesKey={{
256 border: "columnBorder",
257 borderWidth: "columnBorderWidthHover",
258 }}
259 setAttributes={setAttributes}
260 units={["px", "%", "em"]}
261 defaultValue={{ unit: "px", value: "" }}
262 btnType={"hover"}
263 />
264 <Spacing
265 label={__("Border Radius", "post-carousel")}
266 attributes={columnBorderRadiusHover}
267 attributesKey={"columnBorderRadiusHover"}
268 setAttributes={setAttributes}
269 units={["px", "%", "em"]}
270 defaultValue={{
271 unit: "px",
272 value: { top: 0, right: 0, bottom: 0, left: 0 },
273 }}
274 indicator={"radius"}
275 />
276 <Toggle
277 label={__("Box Shadow on Hover", "post-carousel")}
278 attributes={columnBoxShadowEnableHover}
279 attributesKey={"columnBoxShadowEnableHover"}
280 setAttributes={setAttributes}
281 />
282 {columnBoxShadowEnableHover && (
283 <BoxShadow
284 label={__("Box Shadow Value on Hover", "post-carousel")}
285 attributes={columnBoxShadowHover}
286 attributesKey={"columnBoxShadowHover"}
287 setAttributes={setAttributes}
288 />
289 )}
290 </>
291 )}
292 <Divider position={"w-100pct bottom"} />
293 {/* <Border
294 label={ __( 'Border', 'post-carousel' ) }
295 attributes={ {
296 border: columnBorder,
297 borderWidth: columnBorderWidth,
298 } }
299 attributesKey={ {
300 border: 'columnBorder',
301 borderWidth: 'columnBorderWidth',
302 } }
303 setAttributes={ setAttributes }
304 />
305 <Spacing
306 label={ __( 'Border Radius', 'post-carousel' ) }
307 attributes={ columnBorderRadius }
308 attributesKey={ 'columnBorderRadius' }
309 setAttributes={ setAttributes }
310 units={ [ 'px', '%', 'em' ] }
311 defaultValue={ { unit: 'px', value: 0 } }
312 />
313 <SPToggleGroupControl
314 attributes={ shadowState }
315 onClick={ ( value ) => setShadowState( value ) }
316 items={ [
317 {
318 label: 'Normal',
319 value: 'color',
320 },
321 {
322 label: 'Hover',
323 value: 'hover',
324 },
325 ] }
326 />
327 { 'color' === shadowState ? (
328 <>
329 <Toggle
330 label={ __( 'Box Shadow', 'post-carousel' ) }
331 attributes={ columnBoxShadowEnable }
332 attributesKey={ 'columnBoxShadowEnable' }
333 setAttributes={ setAttributes }
334 />
335 { columnBoxShadowEnable && (
336 <BoxShadow
337 label={ __( 'Box Shadow', 'post-carousel' ) }
338 attributes={ columnBoxShadow }
339 attributesKey={ 'columnBoxShadow' }
340 setAttributes={ setAttributes }
341 />
342 ) }
343 </>
344 ) : (
345 <>
346 <Toggle
347 label={ __( 'Box Shadow', 'post-carousel' ) }
348 attributes={
349 columnBoxShadowEnableHover
350 }
351 attributesKey={ 'columnBoxShadowEnableHover' }
352 setAttributes={ setAttributes }
353 />
354 { columnBoxShadowEnableHover && (
355 <BoxShadow
356 label={ __( 'Box Shadow', 'post-carousel' ) }
357 attributes={ columnBoxShadowHover }
358 attributesKey={ 'columnBoxShadowHover' }
359 setAttributes={ setAttributes }
360 />
361 ) }
362 </>
363 ) } */}
364 <Spacing
365 label={__("Padding", "post-carousel")}
366 attributes={columnPadding}
367 attributesKey={"columnPadding"}
368 setAttributes={setAttributes}
369 units={["px", "%", "em"]}
370 defaultValue={{
371 unit: "px",
372 value: { top: 0, right: 0, bottom: 0, left: 0 },
373 }}
374 />
375 <Spacing
376 label={__("Margin", "post-carousel")}
377 attributes={columnMargin}
378 attributesKey={"columnMargin"}
379 setAttributes={setAttributes}
380 units={["px", "%", "em"]}
381 defaultValue={{
382 unit: "px",
383 value: { top: 0, right: 0, bottom: 0, left: 0 },
384 }}
385 />
386 </>
387 );
388 };
389
390 export const ColumnAdvanceVisibilityTab = ({ attributes, setAttributes }) => {
391 const { columnVisibilityHideDesktop, columnVisibilityHideTablet, columnVisibilityHideMobile } = attributes;
392
393 return (
394 <>
395 <Toggle
396 label={__("Hide on Desktop", "post-carousel")}
397 attributes={columnVisibilityHideDesktop}
398 attributesKey={"columnVisibilityHideDesktop"}
399 setAttributes={setAttributes}
400 pro={true}
401 />
402 <Toggle
403 label={__("Hide on Tablet", "post-carousel")}
404 attributes={columnVisibilityHideTablet}
405 attributesKey={"columnVisibilityHideTablet"}
406 setAttributes={setAttributes}
407 pro={true}
408 />
409 <Toggle
410 label={__("Hide on Mobile", "post-carousel")}
411 attributes={columnVisibilityHideMobile}
412 attributesKey={"columnVisibilityHideMobile"}
413 setAttributes={setAttributes}
414 pro={true}
415 />
416 </>
417 );
418 };
419