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 / blocks / post-list-two / render.js

render.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/blocks/post-list-two/render.js

155 lines 4.4 KB

Raw Download Zip

1	import { isEditor } from "../../controls/controls";
2	import TemplateOne from "../shared/templates/templateCards/templateOne";
3	import { usePanelBodyContext } from "../../context";
4	import { Fragment, useEffect, useRef, useState } from "@wordpress/element";
5	import { ProTopBar } from "../shared/helpFn";
6
7	const ListDivider = () => {
8	const { togglePanelBody } = usePanelBodyContext();
9	return (
10	<div
11	onClick={(e) => (editPage ? togglePanelBody("divider", e) : () => {})}
12	className="sp-smart-post-list-divider"
13	></div>
14	);
15	};
16	const Render = ({ attributes, posts }) => {
17	const { postListLayout, contentVerticalPosition, showHideDivider, imageOverlayColor, catTabCategoryPosition, blockName } =
18	attributes;
19
20	const containerRef = useRef(null);
21
22	const layoutClass = () => {
23	if (
24	"sp-smart-post-list-two-layout-four" === postListLayout \|\|
25	"sp-smart-post-list-two-layout-seven" === postListLayout \|\|
26	"sp-smart-post-list-two-layout-eight" === postListLayout \|\|
27	"sp-smart-post-list-two-layout-three" === postListLayout
28	) {
29	return "sp-smart-post-list-two-layout-three" !== postListLayout
30	? `sp-smart-post-list-two-layout-three ${postListLayout}`
31	: postListLayout;
32	}
33	return `sp-smart-post-list-two-bg-layout ${postListLayout}`;
34	};
35
36	const bgClass = [
37	"sp-smart-post-list-two-layout-one",
38	"sp-smart-post-list-two-layout-two",
39	"sp-smart-post-list-two-layout-five",
40	"sp-smart-post-list-two-layout-six",
41	].includes(postListLayout)
42	? "sp-smart-post-background-layout"
43	: "";
44	const [selectedPostId, setSelectedPostId] = useState(null);
45
46	useEffect(() => {
47	const handleClickOutside = (event) => {
48	if (containerRef.current && !containerRef.current.contains(event.target)) {
49	setSelectedPostId(null);
50	}
51	};
52
53	document.addEventListener("mousedown", handleClickOutside);
54	return () => document.removeEventListener("mousedown", handleClickOutside);
55	}, []);
56
57	const TemplateOneSimplify = ({ post, type }) => {
58	return (
59	<TemplateOne
60	data={post}
61	attributes={attributes}
62	layout={type === "small" ? postListLayout : ""}
63	posts={posts}
64	contentPosition={contentVerticalPosition}
65	isSelected={selectedPostId === post?.post_id}
66	onSelect={() => setSelectedPostId(post?.post_id)}
67	/>
68	);
69	};
70
71	return (
72	<>
73	<ProTopBar
74	blockName={blockName}
75	title="Post List 02"
76	/>
77	<div
78	id="sp-smart-post-list-wrapper"
79	className={`sp-smart-post-list-wrapper ${imageOverlayColor} ${layoutClass()} sp-cat-position-${catTabCategoryPosition}`}
80	ref={containerRef}
81	>
82	<div className="sp-smart-post-list-items">
83	<div className={`sp-smart-post-large-items ${bgClass}`}>
84	{posts?.slice(0, 1)?.map((post, i) => {
85	return (
86	<Fragment key={post?.post_id}>
87	<div className={`sp-smart-post-list-item`}>
88	{/* <TemplateOne
89	data={post}
90	attributes={attributes}
91	posts={posts}
92	contentPosition={
93	contentVerticalPosition
94	}
95	isSelected={
96	selectedPostId === post?.post_id
97	}
98	onSelect={() =>
99	setSelectedPostId(post?.post_id)
100	}
101	/> */}
102	<TemplateOneSimplify post={post} type={"large"} />
103	</div>
104	</Fragment>
105	);
106	})}
107	</div>
108
109	{showHideDivider &&
110	[
111	"sp-smart-post-list-two-layout-three",
112	"sp-smart-post-list-two-layout-four",
113	"sp-smart-post-list-two-layout-seven",
114	"sp-smart-post-list-two-layout-eight",
115	].includes(postListLayout) && <ListDivider />}
116
117	<div className="sp-smart-post-small-items">
118	{posts?.slice(1)?.map((post, i) => {
119	return (
120	<Fragment key={post?.post_id}>
121	<div className={`sp-smart-post-list-item`}>
122	{/* <TemplateOne
123	data={post}
124	attributes={attributes}
125	layout={postListLayout}
126	posts={posts}
127	contentPosition={
128	contentVerticalPosition
129	}
130	isSelected={
131	selectedPostId === post?.post_id
132	}
133	onSelect={() =>
134	setSelectedPostId(post?.post_id)
135	}
136	/> */}
137	<TemplateOneSimplify post={post} type={"small"} />
138	</div>
139	{showHideDivider &&
140	[
141	"sp-smart-post-list-two-layout-one",
142	"sp-smart-post-list-two-layout-seven",
143	].includes(postListLayout) && <ListDivider />}
144	</Fragment>
145	);
146	})}
147	</div>
148	</div>
149	</div>
150	</>
151	);
152	};
153
154	export default Render;
155