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 / prebuild-library / filter / filterPart.js

filterPart.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/prebuild-library/filter/filterPart.js

188 lines 5.2 KB

Raw Download Zip

1	import "./style.scss";
2	import Select from "./Select";
3	import { SearchIcon, GridTwoColIcon, GridThreeColIcon, HeartIcon, CloseIcon, RotateIcon } from "../icons";
4	import { FILTER_OPTIONS } from "../constants";
5	import { SmartPostShowLogoIcon } from "../../icons/icons";
6	const { __ } = wp.i18n;
7
8	export const FilterPart = (props) => {
9	const {
10	changeStates,
11	column,
12	showWishList,
13	_fetchFile,
14	fetching,
15	searchQuery,
16	fields,
17	fieldValue,
18	fieldOptions,
19	wishListArr,
20	designLibrary=false,
21	} = props;
22
23	return (
24	<div className="sp-smart-template-filter">
25	<div className="sp-smart-template-filter-search">
26	<span>
27	<SearchIcon />
28	</span>
29	<input
30	type="search"
31	id="sp-smart-template-filter-search-field"
32	placeholder="Search..."
33	className="sp-smart-template-filter-search-input"
34	value={searchQuery}
35	onChange={(e) => {
36	// searchQuery && searchQuery(e.target.value)
37	changeStates && changeStates("search", e.target.value);
38	}}
39	/>
40	</div>
41	{!designLibrary && (<div className="sp-smart-template-filter-category">
42	{fields?.filter && (
43	<>
44	<Select
45	value={fieldValue?.filter}
46	contentWH={{ height: "190px", width: "150px" }}
47	onChange={(v) => {
48	changeStates("filter", v);
49	}}
50	options={fieldOptions?.filterArr \|\| []}
51	/>
52	</>
53	)}
54	</div>)}
55	{!designLibrary && (<div className="sp-smart-template-filter-free-and-pro">
56	{fields?.freePro && (
57	<Select
58	value={fieldValue?.freePro}
59	onChange={(v) => {
60	changeStates("freePro", v);
61	}}
62	options={FILTER_OPTIONS.FREE_PRO.map((option) => ({
63	...option,
64	label: option.label,
65	}))}
66	/>
67	)}
68	</div>)}
69	<div className="sp-smart-template-filter-sort">
70	{fields?.trend && fieldValue?.trend && (
71	<Select
72	value={fieldValue?.trend}
73	onChange={(v) => {
74	changeStates("trend", v);
75	}}
76	options={FILTER_OPTIONS.TREND.map((option) => ({
77	...option,
78	label: option.label,
79	}))}
80	/>
81	)}
82	</div>
83
84	<div className={`sp-smart-template-filter-grid-two-col `} onClick={() => changeStates("column", "2")}>
85	<button className={` ${column == "2" ? "active" : ""}`}>
86	<GridTwoColIcon />
87	</button>
88	</div>
89	<div
90	className={`sp-smart-template-filter-grid-three-col ${column == "3" ? "sp-smart-col-active" : ""}`}
91	onClick={() => changeStates("column", "3")}
92	>
93	<button className={` ${column == "3" ? "active" : ""}`}>
94	<GridThreeColIcon />
95	</button>
96	</div>
97	<div className="sp-smart-template-filter-reset">
98	<button>
99	<span className={"sp-smart-popup-sync"} onClick={() => _fetchFile()}>
100	<i className={fetching ? " sp-rotate" : ""}>
101	<RotateIcon />
102	</i>
103	</span>
104	</button>
105	</div>
106	<div className="sp-smart-template-filter-love">
107	<button
108	onClick={() => {
109	changeStates("wishlist", showWishList ? false : true);
110	}}
111	className={` ${showWishList ? "active" : ""}`}
112	>
113	<HeartIcon />
114	{wishListArr?.length > 0 && (
115	<span className="sp-smart-template-filter-love-count">{wishListArr?.length}</span>
116	)}
117	</button>
118	</div>
119	</div>
120	);
121	};
122
123	export const HeaderWithFilter = (props) => {
124	const { changeStates, column, showWishList, _fetchFile, fetching, onClose, currentBlockName, wishListArr } = props;
125	const filterBlockName = currentBlockName ? currentBlockName?.replace(/-/g, " ") : "";
126	return (
127	<div className="sp-smart-popup-header">
128	<div className="sp-smart-popup-filter-title">
129	<div className="sp-smart-popup-filter-image-head">
130	<SmartPostShowLogoIcon />
131	<span>{filterBlockName}</span>
132	</div>
133	<div className="sp-smart-popup-filter-nav-right">
134	<div
135	className={`sp-smart-template-filter-grid-two-col `}
136	onClick={() => changeStates("column", "2")}
137	>
138	<button className={` ${column == "2" ? "active" : ""}`}>
139	<GridTwoColIcon />
140	</button>
141	</div>
142	<div
143	className={`sp-smart-template-filter-grid-three-col ${column == "3" ? "sp-smart-col-active" : ""}`}
144	onClick={() => changeStates("column", "3")}
145	>
146	{" "}
147	<button className={` ${column == "3" ? "active" : ""}`}>
148	<GridThreeColIcon />
149	</button>
150	</div>
151	<div className="sp-smart-template-filter-reset">
152	<button>
153	<span className={"sp-smart-popup-sync"} onClick={() => _fetchFile()}>
154	<i className={fetching ? " sp-rotate" : ""}>
155	<RotateIcon />
156	</i>
157	</span>
158	</button>
159	</div>
160	<div className="sp-smart-template-filter-love">
161	<button
162	onClick={() => {
163	changeStates("wishlist", showWishList ? false : true);
164	}}
165	className={` ${showWishList ? "active" : ""}`}
166	>
167	<HeartIcon />
168	{wishListArr?.length > 0 && (
169	<span className="sp-smart-template-filter-love-count">{wishListArr?.length}</span>
170	)}
171	</button>
172	</div>
173	<div className="sp-smart-popup-filter-sync-close">
174	<button
175	className="sp-smart-btn-close"
176	onClick={onClose}
177	id="sp-smart-btn-close"
178	aria-label={__("Close", "post-carousel")}
179	>
180	<CloseIcon />
181	</button>
182	</div>
183	</div>
184	</div>
185	</div>
186	);
187	};
188