BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5

betterdocs / react-src / gutenberg / blocks / doc-archive-list / src / edit.js

edit.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/doc-archive-list/src/edit.js

621 lines 34.0 KB

Raw Download Zip

1	import { __ } from "@wordpress/i18n";
2	import { useBlockProps } from "@wordpress/block-editor";
3	import { safeHTML } from "@wordpress/dom";
4	import { DocIcon, ArrowDown } from "../icon/DocIcon";
5	import DocIconSleek from "../icon/DocIconSleek";
6	import React from "react";
7
8	import Inspector from "./inspector";
9
10	import { applyFilters } from "@wordpress/hooks";
11
12	import {
13	usePreviewDeviceType,
14	useDuplicateBlockIdFix,
15	useStyleSheets,
16	} from "../../../hooks";
17	import cssProperties from "./cssProperties";
18	import { useEffect } from "react";
19
20	const BLOCK_PREFIX = "betterdocs-archive-list";
21	const edit = ({ attributes, setAttributes, isSelected, clientId }) => {
22	let { blockId, nested_subcategory, layout, list_icon, listIconImageUrl, pagination, listEntryHeadingTag } =
23	attributes;
24
25	/**
26	* resOption: __experimentalPreviewDeviceType()
27	* Set Responsive Option
28	*/
29	usePreviewDeviceType(setAttributes);
30	useDuplicateBlockIdFix(BLOCK_PREFIX, blockId, clientId, setAttributes);
31	const { properties, htmlAttributes, styleTag } = useStyleSheets({
32	properties: cssProperties({ blockId, list_icon, layout }),
33	setAttributes,
34	attributes,
35	});
36
37	const blockProps = useBlockProps({
38	className: `bd-guten-block-main-parent-wrapper`,
39	});
40
41	useEffect(() => {
42	if (listIconImageUrl?.length > 0) {
43	setAttributes({ list_icon: "" });
44	}
45	}, [listIconImageUrl]);
46
47	/**
48	* To be used only for layout 3
49	*
50	* @returns string
51	*/
52	function getCurrentDate() {
53	const options = { year: 'numeric', month: 'long', day: 'numeric' };
54	const currentDate = new Date();
55	return currentDate.toLocaleDateString('en-US', options);
56	}
57
58	return (
59	<>
60	{isSelected && (
61	<Inspector
62	attributes={attributes}
63	setAttributes={setAttributes}
64	/>
65	)}
66	<div {...blockProps}>
67	{styleTag()}
68	{layout == "layout-1" && (
69	<div
70	className={`betterdocs-content-area block-archive-list ${safeHTML(
71	blockId,
72	)} `}
73	>
74	<div className="betterdocs-content-inner-area">
75	<div
76	className="betterdocs-entry-title editor-mode"
77	style={{ margin: "0px" }}
78	>
79	{React.createElement(
80	listEntryHeadingTag,
81	{ className: "betterdocs-entry-heading" },
82	"Archive Title"
83	)}
84	<p style={{ margin: "0px" }}>
85	Lorem ipsum dolor sit amet, consectetur
86	adipiscing elit. Duis at augue a arcu
87	efficitur interdum.
88	</p>
89	</div>
90	<div className="betterdocs-entry-body betterdocs-taxonomy-doc-category" style={{width:'100%'}}>
91	<ul className="betterdocs-articles-list">
92	<li>
93	{list_icon?.length > 0 &&
94	listIconImageUrl?.length == 0 ? (
95	<i className={list_icon}></i>
96	) : listIconImageUrl?.length > 0 ? (
97	<img src={listIconImageUrl} />
98	) : listIconImageUrl?.length == 0 &&
99	list_icon?.length == 0 &&
100	betterDocsBlocksHelper?.docsIcon
101	?.length > 0 ? (
102	<img
103	src={
104	betterDocsBlocksHelper?.docsIcon
105	}
106	/>
107	) : (
108	<DocIcon />
109	)}
110	<a href="#">Docs Title 1</a>
111	</li>
112	<li>
113	{list_icon?.length > 0 &&
114	listIconImageUrl?.length == 0 ? (
115	<i className={list_icon}></i>
116	) : listIconImageUrl?.length > 0 ? (
117	<img src={listIconImageUrl} />
118	) : listIconImageUrl?.length == 0 &&
119	list_icon?.length == 0 &&
120	betterDocsBlocksHelper?.docsIcon
121	?.length > 0 ? (
122	<img
123	src={
124	betterDocsBlocksHelper?.docsIcon
125	}
126	/>
127	) : (
128	<DocIcon />
129	)}
130	<a href="#">Docs Title 2</a>
131	</li>
132	<li>
133	{list_icon?.length > 0 &&
134	listIconImageUrl?.length == 0 ? (
135	<i className={list_icon}></i>
136	) : listIconImageUrl?.length > 0 ? (
137	<img src={listIconImageUrl} />
138	) : listIconImageUrl?.length == 0 &&
139	list_icon?.length == 0 &&
140	betterDocsBlocksHelper?.docsIcon
141	?.length > 0 ? (
142	<img
143	src={
144	betterDocsBlocksHelper?.docsIcon
145	}
146	/>
147	) : (
148	<DocIcon />
149	)}
150	<a href="#">Docs Title 3</a>
151	</li>
152	<li>
153	{list_icon?.length > 0 &&
154	listIconImageUrl?.length == 0 ? (
155	<i className={list_icon}></i>
156	) : listIconImageUrl?.length > 0 ? (
157	<img src={listIconImageUrl} />
158	) : listIconImageUrl?.length == 0 &&
159	list_icon?.length == 0 &&
160	betterDocsBlocksHelper?.docsIcon
161	?.length > 0 ? (
162	<img
163	src={
164	betterDocsBlocksHelper?.docsIcon
165	}
166	/>
167	) : (
168	<DocIcon />
169	)}
170	<a href="#">Docs Title 4</a>
171	</li>
172	<li>
173	{list_icon?.length > 0 &&
174	listIconImageUrl?.length == 0 ? (
175	<i className={list_icon}></i>
176	) : listIconImageUrl?.length > 0 ? (
177	<img src={listIconImageUrl} />
178	) : listIconImageUrl?.length == 0 &&
179	list_icon?.length == 0 &&
180	betterDocsBlocksHelper?.docsIcon
181	?.length > 0 ? (
182	<img
183	src={
184	betterDocsBlocksHelper?.docsIcon
185	}
186	/>
187	) : (
188	<DocIcon />
189	)}
190	<a href="#">Docs Title 5</a>
191	</li>
192	<li>
193	{list_icon?.length > 0 &&
194	listIconImageUrl?.length == 0 ? (
195	<i className={list_icon}></i>
196	) : listIconImageUrl?.length > 0 ? (
197	<img src={listIconImageUrl} />
198	) : listIconImageUrl?.length == 0 &&
199	list_icon?.length == 0 &&
200	betterDocsBlocksHelper?.docsIcon
201	?.length > 0 ? (
202	<img
203	src={
204	betterDocsBlocksHelper?.docsIcon
205	}
206	/>
207	) : (
208	<DocIcon />
209	)}
210	<a href="#">Docs Title 6</a>
211	</li>
212	{nested_subcategory && (
213	<li className="betterdocs-nested-category-wrapper">
214	<span className="betterdocs-nested-category-title">
215	{<ArrowDown />}
216	<a href="#">Subcatgory</a>
217	</span>
218	<ul
219	className="betterdocs-nested-category-list"
220	style={{ display: "block" }}
221	>
222	<li>
223	{list_icon?.length > 0 &&
224	listIconImageUrl?.length ==
225	0 ? (
226	<i
227	className={
228	list_icon
229	}
230	></i>
231	) : listIconImageUrl?.length >
232	0 ? (
233	<img
234	src={
235	listIconImageUrl
236	}
237	/>
238	) : listIconImageUrl?.length ==
239	0 &&
240	list_icon?.length == 0 &&
241	betterDocsBlocksHelper
242	?.docsIcon?.length >
243	0 ? (
244	<img
245	src={
246	betterDocsBlocksHelper?.docsIcon
247	}
248	/>
249	) : (
250	<DocIcon />
251	)}
252	<a href="#">
253	Nested Docs Title 1
254	</a>
255	</li>
256	<li>
257	{list_icon?.length > 0 &&
258	listIconImageUrl?.length ==
259	0 ? (
260	<i
261	className={
262	list_icon
263	}
264	></i>
265	) : listIconImageUrl?.length >
266	0 ? (
267	<img
268	src={
269	listIconImageUrl
270	}
271	/>
272	) : listIconImageUrl?.length ==
273	0 &&
274	list_icon?.length == 0 &&
275	betterDocsBlocksHelper
276	?.docsIcon?.length >
277	0 ? (
278	<img
279	src={
280	betterDocsBlocksHelper?.docsIcon
281	}
282	/>
283	) : (
284	<DocIcon />
285	)}
286	<a href="#">
287	Nested Docs Title 2
288	</a>
289	</li>
290	<li>
291	{list_icon?.length > 0 &&
292	listIconImageUrl?.length ==
293	0 ? (
294	<i
295	className={
296	list_icon
297	}
298	></i>
299	) : listIconImageUrl?.length >
300	0 ? (
301	<img
302	src={
303	listIconImageUrl
304	}
305	/>
306	) : listIconImageUrl?.length ==
307	0 &&
308	list_icon?.length == 0 &&
309	betterDocsBlocksHelper
310	?.docsIcon?.length >
311	0 ? (
312	<img
313	src={
314	betterDocsBlocksHelper?.docsIcon
315	}
316	/>
317	) : (
318	<DocIcon />
319	)}
320	<a href="#">
321	Nested Docs Title 3
322	</a>
323	</li>
324	<li>
325	{list_icon?.length > 0 &&
326	listIconImageUrl?.length ==
327	0 ? (
328	<i
329	className={
330	list_icon
331	}
332	></i>
333	) : listIconImageUrl?.length >
334	0 ? (
335	<img
336	src={
337	listIconImageUrl
338	}
339	/>
340	) : listIconImageUrl?.length ==
341	0 &&
342	list_icon?.length == 0 &&
343	betterDocsBlocksHelper
344	?.docsIcon?.length >
345	0 ? (
346	<img
347	src={
348	betterDocsBlocksHelper?.docsIcon
349	}
350	/>
351	) : (
352	<DocIcon />
353	)}
354	<a href="#">
355	Nested Docs Title 4
356	</a>
357	</li>
358	<li>
359	{list_icon?.length > 0 &&
360	listIconImageUrl?.length ==
361	0 ? (
362	<i
363	className={
364	list_icon
365	}
366	></i>
367	) : listIconImageUrl?.length >
368	0 ? (
369	<img
370	src={
371	listIconImageUrl
372	}
373	/>
374	) : listIconImageUrl?.length ==
375	0 &&
376	list_icon?.length == 0 &&
377	betterDocsBlocksHelper
378	?.docsIcon?.length >
379	0 ? (
380	<img
381	src={
382	betterDocsBlocksHelper?.docsIcon
383	}
384	/>
385	) : (
386	<DocIcon />
387	)}
388	<a href="#">
389	Nested Docs Title 5
390	</a>
391	</li>
392	<li>
393	{list_icon?.length > 0 &&
394	listIconImageUrl?.length ==
395	0 ? (
396	<i
397	className={
398	list_icon
399	}
400	></i>
401	) : listIconImageUrl?.length >
402	0 ? (
403	<img
404	src={
405	listIconImageUrl
406	}
407	/>
408	) : listIconImageUrl?.length ==
409	0 &&
410	list_icon?.length == 0 &&
411	betterDocsBlocksHelper
412	?.docsIcon?.length >
413	0 ? (
414	<img
415	src={
416	betterDocsBlocksHelper?.docsIcon
417	}
418	/>
419	) : (
420	<DocIcon />
421	)}
422	<a href="#">
423	Nested Docs Title 6
424	</a>
425	</li>
426	</ul>
427	</li>
428	)}
429	</ul>
430	{ pagination &&
431	<div className="betterdocs-pagination">
432	<ul>
433	<li className="prev">
434	<a href="#">❮</a>
435	</li>
436	<li className="active">
437	<a href="#">1</a>
438	</li>
439	<li className="">
440	<a href="#">2</a>
441	</li>
442	</ul>
443	</div>
444	}
445	</div>
446	</div>
447	</div>
448	)}
449	{layout == "layout-2" &&
450	applyFilters("archiveLayoutTwo", "", blockId, pagination)}
451	{layout == "layout-3" && (
452	<div className={`doc-archive-list-layout-3 ${blockId}`}>
453	<div className="betterdocs-title-excerpt-lists">
454	<div className="betterdocs-title-excerpt-list">
455	{React.createElement(
456	listEntryHeadingTag,
457	{ className: "betterdocs-entry-title" },
458	<>
459	<span>
460	<DocIconSleek/>
461	</span>
462	<a href="#">
463	Dummy Title 1
464	</a>
465	</>
466	)}
467	<span className="update-date">
468	{`${'Last Updated: ' + getCurrentDate()}`}
469	</span>
470	<p>
471	This is a dummy excerpt...
472	</p>
473	</div>
474	<div className="betterdocs-title-excerpt-list">
475	{React.createElement(
476	listEntryHeadingTag,
477	{ className: "betterdocs-entry-title" },
478	<>
479	<span>
480	<DocIconSleek/>
481	</span>
482	<a href="#">
483	Dummy Title 2
484	</a>
485	</>
486	)}
487	<span className="update-date">
488	{`${'Last Updated: ' + getCurrentDate()}`}
489	</span>
490	<p>
491	This is a dummy excerpt...
492	</p>
493	</div>
494	<div className="betterdocs-title-excerpt-list">
495	<h2 className="betterdocs-entry-title">
496	<span>
497	<DocIconSleek/>
498	</span>
499	<a href="#">
500	Dummy Title 2
501	</a>
502	</h2>
503	<span class="update-date">
504	{`${'Last Updated: ' + getCurrentDate()}`}
505	</span>
506	<p>
507	This is a dummy excerpt...
508	</p>
509	</div>
510	<div class="betterdocs-title-excerpt-list">
511	<h2 className="betterdocs-entry-title">
512	<span>
513	<DocIconSleek/>
514	</span>
515	<a href="#">
516	Dummy Title 3
517	</a>
518	</h2>
519	<span class="update-date">
520	{`${'Last Updated: ' + getCurrentDate()}`}
521	</span>
522	<p>
523	This is a dummy excerpt...
524	</p>
525	</div>
526	<div class="betterdocs-title-excerpt-list">
527	<h2 className="betterdocs-entry-title">
528	<span>
529	<DocIconSleek/>
530	</span>
531	<a href="#">
532	Dummy Title 3
533	</a>
534	</h2>
535	<span class="update-date">
536	{`${'Last Updated: ' + getCurrentDate()}`}
537	</span>
538	<p>This is a dummy excerpt...</p>
539	</div>
540	</div>
541	{ pagination &&
542	<div className="betterdocs-pagination">
543	<ul>
544	<li className="prev">
545	<a href="#">❮</a>
546	</li>
547	<li className="active">
548	<a href="#">1</a>
549	</li>
550	<li className="">
551	<a href="#">2</a>
552	</li>
553	</ul>
554	</div>
555	}
556	</div>
557	)}
558	{layout == "layout-4" && (
559	<div className={`doc-archive-list-layout-4 ${blockId}`}>
560	<div className="betterdocs-title-excerpt-lists betterdocs-title-excerpt-grid">
561	<div className="betterdocs-title-excerpt-list">
562	<span className="update-date">
563	{`${'Last Updated: ' + getCurrentDate()}`}
564	</span>
565	<h2>
566	<a href="#">
567	Dummy Title 1
568	</a>
569	</h2>
570	<p>
571	This is a dummy excerpt with limited words...
572	</p>
573	</div>
574	<div className="betterdocs-title-excerpt-list">
575	<span className="update-date">
576	{`${'Last Updated: ' + getCurrentDate()}`}
577	</span>
578	<h2>
579	<a href="#">
580	Dummy Title 2
581	</a>
582	</h2>
583	<p>
584	This is a dummy excerpt with limited words...
585	</p>
586	</div>
587	<div className="betterdocs-title-excerpt-list">
588	<span className="update-date">
589	{`${'Last Updated: ' + getCurrentDate()}`}
590	</span>
591	<h2>
592	<a href="#">
593	Dummy Title 3
594	</a>
595	</h2>
596	<p>
597	This is a dummy excerpt with limited words...
598	</p>
599	</div>
600	</div>
601	{pagination &&
602	<div className="betterdocs-pagination">
603	<ul>
604	<li>
605	<a href="#">1</a>
606	</li>
607	<li>
608	<a href="#">2</a>
609	</li>
610	</ul>
611	</div>
612	}
613	</div>
614	)}
615	</div>
616	</>
617	);
618	};
619
620	export default edit;
621