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

post-carousel / src / blocks / post-grid-five / generalTab.js

generalTab.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.7, at src/blocks/post-grid-five/generalTab.js

199 lines 5.6 KB

Raw Download Zip

1	import { __ } from "@wordpress/i18n";
2	import { Toggle, SPRangeControl, SelectField, Layouts, InputControl } from "../../components";
3	import { AlignCenter, AlignLeft, AlignRight } from "../../icons/icons";
4	import { getPaginationBlock } from "../shared/helpFn";
5	import useLayouts from "../../hooks/useLayouts";
6	import { openLinksOptions } from "../../controls/constants";
7	import SPToggleGroupControl from "../../components/toggleGroupControl/toggleGroupControl";
8	import { inArray } from "../../controls/controls";
9	import ProInfo from "../../components/proInfo/proInfo";
10
11	export const GridFiveGeneralTab = ({ attributes, setAttributes }) => {
12	const {
13	postGridLayout,
14	gridFiveColumns,
15	itemsPerPage,
16	gridFiveHorizontalGap,
17	gridFiveVerticalGap,
18	contentAlignment,
19	// gridFiveMasonryEnable,
20	preloaderEnable,
21	equalHeightEnable,
22	blockName,
23	generalLinkOpen,
24	// masonryGap,
25	largeItemHeight,
26	smallItemHeight,
27	postLimit,
28	metaDisplayType,
29	paginationEnable,
30	liveFilterEnable,
31	clientId,
32	} = attributes;
33	const layouts = useLayouts(blockName, postGridLayout);
34
35	const paginationBlock = getPaginationBlock(clientId);
36
37	const layoutChange = (newValue) => {
38	if (newValue === postGridLayout) return;
39
40	const newData = {
41	postGridLayout: newValue,
42	postLimit:
43	3 === postLimit \|\| 4 === postLimit
44	? inArray(["grid-five-layout-one", "grid-five-layout-two", "grid-five-layout-three"], newValue)
45	? 3
46	: 4
47	: postLimit,
48	};
49	setAttributes(newData);
50	};
51
52	const paginationToggle = (newValue) => {
53	if (!newValue && paginationBlock) {
54	const { block, select } = paginationBlock;
55	select(block.clientId);
56	}
57
58	setAttributes({ paginationEnable: !newValue });
59	};
60
61	return (
62	<>
63	{layouts?.length > 0 && (
64	<Layouts
65	label={__("Grid Layout", "post-carousel")}
66	attributes={postGridLayout}
67	attributesKey={"postGridLayout"}
68	setAttributes={setAttributes}
69	displayActive={true}
70	grid={3}
71	onChange={layoutChange}
72	items={layouts}
73	/>
74	)}
75	<Toggle
76	label={__("Smart Frontend Filter", "post-carousel")}
77	attributes={liveFilterEnable}
78	setAttributes={setAttributes}
79	attributesKey={"liveFilterEnable"}
80	/>
81	<Toggle
82	label={__("Smart Pagination", "post-carousel")}
83	attributes={paginationEnable}
84	// attributesKey={ 'paginationEnable' }
85	// setAttributes={ setAttributes }
86	onChange={paginationToggle}
87	/>
88	<SPRangeControl
89	label={__("Columns", "post-carousel")}
90	attributes={gridFiveColumns}
91	attributesKey={"gridFiveColumns"}
92	setAttributes={setAttributes}
93	max={9}
94	min={1}
95	defaultValue={{ unit: "", value: 3 }}
96	/>
97	<InputControl
98	label={__("Posts Per Page", "post-carousel")}
99	className="sp-smart-limit-field"
100	ajax={true}
101	attributes={postLimit}
102	min={1}
103	max={500}
104	attributesKey={"postLimit"}
105	setAttributes={setAttributes}
106	/>
107	<SPRangeControl
108	label={__("Large item Height", "post-carousel")}
109	attributes={largeItemHeight}
110	attributesKey={"largeItemHeight"}
111	setAttributes={setAttributes}
112	max={2000}
113	units={["PX", "%", "EM"]}
114	defaultValue={{ unit: "px", value: "" }}
115	pro={true}
116	/>
117	{!equalHeightEnable && (
118	<SPRangeControl
119	label={__("Small item Height", "post-carousel")}
120	attributes={smallItemHeight}
121	attributesKey={"smallItemHeight"}
122	setAttributes={setAttributes}
123	max={2000}
124	units={["PX", "%", "EM"]}
125	defaultValue={{ unit: "px", value: "" }}
126	pro={true}
127	/>
128	)}
129	<SPRangeControl
130	label={__("Horizontal Gap", "post-carousel")}
131	attributes={gridFiveHorizontalGap}
132	attributesKey={"gridFiveHorizontalGap"}
133	setAttributes={setAttributes}
134	max={150}
135	units={["PX", "%", "EM"]}
136	defaultValue={{ unit: "px", value: 16 }}
137	/>
138	<SPRangeControl
139	label={__("Vertical Gap", "post-carousel")}
140	attributes={gridFiveVerticalGap}
141	attributesKey={"gridFiveVerticalGap"}
142	setAttributes={setAttributes}
143	max={150}
144	units={["PX", "%", "EM"]}
145	defaultValue={{ unit: "px", value: 16 }}
146	/>
147	{/* { gridFiveMasonryEnable && (
148	<SPRangeControl
149	label={ __( 'Masonry Gap', 'post-carousel' ) }
150	attributes={ masonryGap }
151	attributesKey={ 'masonryGap' }
152	setAttributes={ setAttributes }
153	max={ 150 }
154	units={ [ 'PX', '%', 'EM' ] }
155	/>
156	) } */}
157	<SPToggleGroupControl
158	label={__("Content Alignment", "post-carousel")}
159	attributes={contentAlignment}
160	attributesKey={"contentAlignment"}
161	setAttributes={setAttributes}
162	items={[
163	{ label: <AlignLeft />, value: "left" },
164	{ label: <AlignCenter />, value: "center" },
165	{ label: <AlignRight />, value: "right" },
166	]}
167	/>
168	<SelectField
169	label={__("Link Open In", "post-carousel")}
170	attributes={generalLinkOpen}
171	attributesKey={"generalLinkOpen"}
172	setAttributes={setAttributes}
173	items={openLinksOptions}
174	/>
175	{/* <Toggle
176	label={ __( 'Masonry', 'post-carousel' ) }
177	attributes={ gridFiveMasonryEnable }
178	attributesKey={ 'gridFiveMasonryEnable' }
179	setAttributes={ setAttributes }
180	/> */}
181	<Toggle
182	label={__("Preloader", "post-carousel")}
183	attributes={preloaderEnable}
184	attributesKey={"preloaderEnable"}
185	setAttributes={setAttributes}
186	/>
187	{/* <Toggle
188	label={ __( 'Enable Equal Height', 'post-carousel' ) }
189	attributes={ equalHeightEnable }
190	attributesKey={ 'equalHeightEnable' }
191	setAttributes={ setAttributes }
192	/> */}
193	<ProInfo>
194	<span>Unlock exclusive layouts and advanced display controls.</span> <a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer">Upgrade to Pro!</a>
195	</ProInfo>
196	</>
197	);
198	};
199