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 / shared / templates / templateCards / thumbsTemplate.js

thumbsTemplate.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.7, at src/blocks/shared/templates/templateCards/thumbsTemplate.js

161 lines 3.6 KB

Raw Download Zip

1	import { Fragment, useEffect, useMemo, useState } from "@wordpress/element";
2	import { randomSolidColor } from "../../helpFn";
3	import { Category, FeaturedImage, Title } from "../templates-parts/templates-parts";
4
5	const ThumbsTemplate = ({
6	data,
7	layout = "default",
8	attributes,
9	thumbIndex = "",
10	contentArray = ["image", "title", "category"],
11	}) => {
12	const {
13	attachment_metadata,
14	content,
15	category_list,
16	tag_list,
17	format_list,
18	attachment_url,
19	attachment_srcset,
20	link,
21	image_alt,
22	image_title,
23	} = data;
24
25	const {
26	titleLength,
27	titleHTMLTag: TitleTag,
28	imageSize,
29	generalLinkOpen,
30	imageReplaceWith,
31	imageReplaceWithImage,
32	imageReplaceWithVideo,
33	toggleCustomFallbackBg,
34	imageFallbackReplace,
35	imageOverlayColor,
36	imageLazyLoad,
37	imageSrcset,
38	catTabCategoryType,
39	postListLayout,
40	} = attributes;
41
42	const [randomColor, setRandomColor] = useState(randomSolidColor(imageOverlayColor));
43
44	const titleIndex = thumbIndex !== "" ? (thumbIndex + 1).toString().padStart(2, "0") : "";
45
46	useEffect(() => {
47	setRandomColor(randomSolidColor(imageOverlayColor));
48	}, [imageOverlayColor]);
49
50	// Image Overlay Style.
51	let imageOverlayStyle = " overlay-" + imageOverlayColor;
52
53	const taxonomiesType = {
54	category: category_list,
55	post_tag: tag_list,
56	post_format: format_list,
57	};
58	const imageData = useMemo(
59	() => ({
60	attachment_metadata,
61	content,
62	attachment_url,
63	attachment_srcset,
64	image_title,
65	image_alt, //data ends,
66	generalLinkOpen, // attributes starts
67	imageSrcset,
68	imageSize,
69	imageReplaceWith,
70	imageFallbackReplace,
71	toggleCustomFallbackBg,
72	imageReplaceWithImage,
73	imageReplaceWithVideo,
74	postTitle: data?.title,
75	}),
76	[
77	generalLinkOpen,
78	imageSrcset,
79	imageSize,
80	imageReplaceWith,
81	imageFallbackReplace,
82	toggleCustomFallbackBg,
83	imageReplaceWithImage,
84	imageReplaceWithVideo,
85	]
86	);
87	const titleAttr = useMemo(
88	() => ({
89	TitleTag,
90	titleLength,
91	generalLinkOpen,
92	postListLayout,
93	}),
94	[TitleTag, titleLength, generalLinkOpen, postListLayout]
95	);
96	const progressBar = layout === "thumbnail-slider-two-layout-two";
97
98	const contentPartObject = {
99	taxonomy: (
100	<>
101	<Category
102	categoryList={taxonomiesType[catTabCategoryType]}
103	attributes={{
104	// socialShareEnableSocial,
105	// socialIconDisplayType,
106	// socialShareIconPosition,
107	// socialSharingMedia,
108	// link,
109	// socialOnClick: togglePanelBody,
110	// socialShareDisplayOnHover,
111	catTabCategoryType,
112	}}
113	/>
114	</>
115	),
116	title: (
117	<>
118	{/* Title part component */}
119	<Title
120	title={data?.title}
121	thumbIndex={titleIndex}
122	progress={progressBar}
123	link={link}
124	attributes={titleAttr}
125	/>
126	</>
127	),
128	};
129
130	return (
131	<div className={`sp-smart-post-card sp-smart-post-thumbs-template`}>
132	{/* Featured image part component */}
133	<>
134	{contentArray.includes("image") && (
135	<div className={`sp-smart-post-card-image`}>
136	<FeaturedImage data={imageData} link={link} lazy={true} />
137	{"no-overlay" !== imageOverlayColor && (
138	<div
139	className={`image-overlay${imageOverlayStyle} pointer-none`}
140	style={{ background: randomColor }}
141	></div>
142	)}
143	</div>
144	)}
145	{/* content area */}
146	<div className={`sp-smart-post-template-one-content`}>
147	<div className={`sp-smart-post-card-content`}>
148	{/** Content Area Start */}
149	{contentArray?.map((item, index) => {
150	return <Fragment key={index}>{contentPartObject[item] \|\| null}</Fragment>;
151	})}
152	{/** Content Area End */}
153	</div>
154	</div>
155	</>
156	</div>
157	);
158	};
159
160	export default ThumbsTemplate;
161