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 / live-filter / generalTab.js

generalTab.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/blocks/live-filter/generalTab.js

470 lines 10.8 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 {
3 InputControl,
4 Layouts,
5 MultiSelectDndKit,
6 SelectField,
7 SPRangeControl,
8 SPToggleGroupControl,
9 } from "../../components";
10 import { LayoutOne, LayoutTwo } from "./icons";
11 import { AlignCenter, AlignLeft, AlignRight, AlignFull } from "../../icons/icons";
12 import { useEffect, useRef } from "@wordpress/element";
13 import ProInfo from "../../components/proInfo/proInfo";
14
15 export const GeneralTab = ({ attributes, setAttributes }) => {
16 const {
17 layout,
18 fieldAlignment,
19 gap,
20 multipleFilterRelation,
21 taxonomyType,
22 selectedTerms,
23 uniqueId,
24 taxonomyStyle,
25 allTextLabel,
26 taxonomyLimit,
27 filterType,
28 allTaxonomies,
29 menuAlignment,
30 selectTermsType,
31 excludeTerms,
32 } = attributes;
33
34 let allTerms = [];
35 const taxonomyTypeList = allTaxonomies?.map((term) => ({
36 label: term.label,
37 value: term.name,
38 }));
39
40 allTaxonomies?.forEach((taxonomy) => {
41 if (taxonomyType === taxonomy.name) {
42 allTerms = [...allTerms, ...taxonomy.terms_items];
43 }
44 });
45
46 const layoutChange = (newValue) => {
47 if (newValue === layout) {
48 return;
49 }
50
51 const newData = {
52 layout: newValue,
53 };
54 setAttributes(newData);
55 };
56
57 const taxonomyRef = useRef(taxonomyType);
58
59 useEffect(() => {
60 // Only run when taxonomyType actually changes value
61 if (taxonomyRef.current !== taxonomyType) {
62 taxonomyRef.current = taxonomyType;
63
64 if (selectedTerms.length > 0) {
65 setAttributes({ selectedTerms: [] });
66 }
67 }
68 }, [taxonomyType]);
69
70 return (
71 <div className="sp-live-filter-general">
72 <Layouts
73 attributes={layout}
74 setAttributes={setAttributes}
75 attributesKey={"layout"}
76 displayActive={true}
77 grid={2}
78 label={__("Frontend Filter Presets", "post-carousel")}
79 items={[
80 {
81 icon: <LayoutOne value={layout} />,
82 value: "layoutOne",
83 type: "free"
84 },
85 {
86 icon: <LayoutTwo value={layout} />,
87 value: "layoutTwo",
88 type: "pro",
89 demoLink: "https://wpsmartpost.com/pricing/?ref=1"
90 },
91 ]}
92 onChange={layoutChange}
93 />
94
95 {layout === "layoutTwo" ? (
96 <>
97 <SPToggleGroupControl
98 attributes={filterType}
99 attributesKey={"filterType"}
100 label={__("Filter Type", "post-carousel")}
101 border={true}
102 setAttributes={setAttributes}
103 items={[
104 {
105 label: "Dropdown",
106 value: "dropdown",
107 },
108 {
109 label: "Button",
110 value: "button",
111 },
112 ]}
113 onClick={(newItem) => {
114 setAttributes({
115 filterType: newItem,
116 taxonomyStyle: "more",
117 });
118 }}
119 />
120
121 <SelectField
122 label={__("Taxonomy Type", "post-carousel")}
123 attributes={taxonomyType}
124 attributesKey={"taxonomyType"}
125 flexStyle={false}
126 setAttributes={setAttributes}
127 items={[{ label: "Select", value: "" }, ...taxonomyTypeList]}
128 />
129 <SelectField
130 label={__("Select Terms", "post-carousel")}
131 attributes={selectTermsType}
132 attributesKey={"selectTermsType"}
133 flexStyle={true}
134 setAttributes={setAttributes}
135 items={[
136 {
137 label: __("All", "post-carousel"),
138 value: "all",
139 },
140 {
141 label: __("Specific", "post-carousel"),
142 value: "specific",
143 },
144 {
145 label: __("Exclude", "post-carousel"),
146 value: "exclude",
147 },
148 ]}
149 />
150 { selectTermsType === "specific" && (
151 <MultiSelectDndKit
152 label={__("Select Terms", "post-carousel")}
153 attributes={selectedTerms}
154 uniqueId={uniqueId}
155 values={selectedTerms}
156 searchable={true}
157 onChange={(e) => setAttributes({ selectedTerms: e })}
158 items={allTerms}
159 />
160 )}
161 { selectTermsType === "exclude" && (
162 <MultiSelectDndKit
163 label={__("Select Exclude Terms", "post-carousel")}
164 attributes={excludeTerms}
165 uniqueId={uniqueId}
166 values={excludeTerms}
167 searchable={true}
168 onChange={(e) => setAttributes({ excludeTerms: e })}
169 items={allTerms}
170 />
171 )}
172
173 {filterType === "button" && (
174 <>
175 <SPRangeControl
176 label={__("Taxonomy Display Limit", "post-carousel")}
177 attributes={taxonomyLimit}
178 attributesKey={"taxonomyLimit"}
179 setAttributes={setAttributes}
180 max={9}
181 min={1}
182 defaultValue={{ unit: "", value: 3 }}
183 />
184
185 <SPToggleGroupControl
186 attributes={taxonomyStyle}
187 attributesKey={"taxonomyStyle"}
188 label={__("More Taxonomy Style", "post-carousel")}
189 border={true}
190 setAttributes={setAttributes}
191 items={[
192 {
193 label: "More Text",
194 value: "more",
195 },
196 {
197 label: "Kebab Menu",
198 value: "kebabMenu",
199 },
200 {
201 label: "Navigation",
202 value: "navigation",
203 },
204 ]}
205 />
206 </>
207 )}
208
209 <InputControl
210 label={__("“All” Text Label", "post-carousel")}
211 attributes={allTextLabel}
212 attributesKey={"allTextLabel"}
213 setAttributes={setAttributes}
214 flex={false}
215 inputType="text"
216 />
217
218 {filterType === "button" && (
219 <>
220 <SPRangeControl
221 label={__("Gap", "post-carousel")}
222 attributes={gap}
223 attributesKey={"gap"}
224 setAttributes={setAttributes}
225 max={200}
226 defaultValue={16}
227 />
228 </>
229 )}
230
231 <SPToggleGroupControl
232 attributes={menuAlignment}
233 attributesKey={"menuAlignment"}
234 label={__("Alignment", "post-carousel")}
235 border={true}
236 setAttributes={setAttributes}
237 items={[
238 {
239 label: <AlignLeft />,
240 value: "left",
241 },
242 {
243 label: <AlignCenter />,
244 value: "center",
245 },
246 {
247 label: <AlignRight />,
248 value: "right",
249 },
250 ]}
251 />
252 </>
253 ) : (
254 <>
255 <SPToggleGroupControl
256 attributes={fieldAlignment}
257 attributesKey={"fieldAlignment"}
258 label={__("Filter Alignment", "post-carousel")}
259 border={true}
260 setAttributes={setAttributes}
261 items={[
262 {
263 label: <AlignLeft />,
264 value: "left",
265 },
266 {
267 label: <AlignCenter />,
268 value: "center",
269 },
270 {
271 label: <AlignRight />,
272 value: "right",
273 },
274 {
275 label: <AlignFull />,
276 value: "full",
277 },
278 ]}
279 />
280
281 <SPRangeControl
282 label={__("Gap", "post-carousel")}
283 attributes={gap}
284 attributesKey={"gap"}
285 setAttributes={setAttributes}
286 max={100}
287 units={["px", "%"]}
288 defaultValue={{unit: "px", value: 16 }}
289 />
290 <SPToggleGroupControl
291 attributes={multipleFilterRelation}
292 attributesKey={"multipleFilterRelation"}
293 label={__("Multiple Filter Relation", "post-carousel")}
294 setAttributes={setAttributes}
295 items={[
296 {
297 label: "AND",
298 value: "and",
299 },
300 {
301 label: "OR",
302 value: "or",
303 },
304 ]}
305 />
306 </>
307 )}
308 <ProInfo>
309 <h3>Premium Only</h3>
310 <h4>Unlock advanced Filter Options, Including:</h4>
311 <ul>
312 <li>
313 — Modern filter layout
314 </li>
315 <li>
316 — Button and Dropdown filter type
317 </li>
318 <li>
319 — Choose specific categories or exclude
320 </li>
321 <li>
322 — Taxonomy display limit
323 </li>
324 <li>
325 — 3 unique taxonomy display style
326 </li>
327 <li>
328 — Show Posts counter
329 </li>
330 </ul>
331 <a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer" className="sp-smart-upgrade-btn">Upgrade to Pro</a>
332 </ProInfo>
333 </div>
334 );
335 };
336
337 export const HeadingTab = ({ attributes, setAttributes }) => {
338 const { headingStyle, headingLabel, headingTag, headingPadding, taxonomyStyle } = attributes;
339
340 const handleHeadingStyle = (newItem) => {
341 if (headingStyle === newItem) {
342 return null;
343 }
344 let newHeadingPadding = headingPadding;
345 let newTaxonomyStyle = taxonomyStyle;
346
347 switch (newItem) {
348 case "styleOne":
349 newHeadingPadding = {
350 ...headingPadding,
351 device: {
352 ...headingPadding.device,
353 Desktop: { top: 8, right: 20, bottom: 8, left: 20 },
354 Tablet: { top: 8, right: 20, bottom: 8, left: 20 },
355 Mobile: { top: 8, right: 20, bottom: 8, left: 20 },
356 },
357 };
358
359 break;
360
361 case "styleTwo":
362 newHeadingPadding = {
363 ...headingPadding,
364 device: {
365 ...headingPadding.device,
366 Desktop: { top: 8, right: 2, bottom: 8, left: 2 },
367 Tablet: { top: 8, right: 2, bottom: 8, left: 2 },
368 Mobile: { top: 8, right: 2, bottom: 8, left: 2 },
369 },
370 };
371 break;
372
373 case "styleThree":
374 newTaxonomyStyle = "more";
375 newHeadingPadding = {
376 ...headingPadding,
377 device: {
378 ...headingPadding.device,
379 Desktop: { top: 8, right: 2, bottom: 8, left: 2 },
380 Tablet: { top: 8, right: 2, bottom: 8, left: 2 },
381 Mobile: { top: 8, right: 2, bottom: 8, left: 2 },
382 },
383 };
384 break;
385
386 case "styleFour":
387 newTaxonomyStyle = "more";
388
389 newHeadingPadding = {
390 ...headingPadding,
391 device: {
392 ...headingPadding.device,
393 Desktop: { top: 8, right: 10, bottom: 8, left: 10 },
394 Tablet: { top: 8, right: 10, bottom: 8, left: 10 },
395 Mobile: { top: 8, right: 10, bottom: 8, left: 10 },
396 },
397 };
398 break;
399
400 case "styleFive":
401 newTaxonomyStyle = "more";
402
403 newHeadingPadding = {
404 ...headingPadding,
405 device: {
406 ...headingPadding.device,
407 Desktop: { top: 8, right: 2, bottom: 8, left: 2 },
408 Tablet: { top: 8, right: 2, bottom: 8, left: 2 },
409 Mobile: { top: 8, right: 2, bottom: 8, left: 2 },
410 },
411 };
412 break;
413
414 default:
415 break;
416 }
417
418 setAttributes({
419 headingStyle: newItem,
420 taxonomyStyle: newTaxonomyStyle,
421 headingPadding: newHeadingPadding,
422 });
423 };
424
425 return (
426 <div className="sp-live-filter-heading">
427 <SelectField
428 label={__("Heading Style", "post-carousel")}
429 attributes={headingStyle}
430 attributesKey={"headingStyle"}
431 flexStyle={false}
432 setAttributes={setAttributes}
433 items={[
434 { label: "Style One", value: "styleOne" },
435 { label: "Style Two", value: "styleTwo" },
436 { label: "Style Three", value: "styleThree" },
437 { label: "Style Four", value: "styleFour" },
438 { label: "Style Five", value: "styleFive" },
439 ]}
440 onChange={handleHeadingStyle}
441 />
442
443 <InputControl
444 label={__("Label", "post-carousel")}
445 attributes={headingLabel}
446 attributesKey={"headingLabel"}
447 setAttributes={setAttributes}
448 flex={false}
449 inputType="text"
450 />
451
452 <SelectField
453 label={__("Heading Style", "post-carousel")}
454 attributes={headingTag}
455 attributesKey={"headingTag"}
456 flexStyle={false}
457 setAttributes={setAttributes}
458 items={[
459 { label: "H1", value: "h1" },
460 { label: "H2", value: "h2" },
461 { label: "H3", value: "h3" },
462 { label: "H4", value: "h4" },
463 { label: "H5", value: "h5" },
464 { label: "H6", value: "h6" },
465 ]}
466 />
467 </div>
468 );
469 };
470