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 / admin / settings / fields / BetterRepeaterValueShow.js

BetterRepeaterValueShow.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/admin/settings/fields/BetterRepeaterValueShow.js

149 lines 5.7 KB

Raw Download Zip

1	import React, { Fragment, useEffect, useRef, useState } from 'react'
2	import { Icon } from '@wordpress/components';
3	import { useInstanceId } from "@wordpress/compose";
4	import { GenericField, useBuilderContext } from 'quickbuilder';
5	// @ts-ignore
6	import { __, _n, sprintf } from '@wordpress/i18n';
7
8	import Swal from "sweetalert2";
9
10	const Delete = ({onClick}) => {
11	return <svg
12	xmlns="http://www.w3.org/2000/svg"
13	width={16}
14	height={16}
15	viewBox="0 0 16 16"
16	fill="none"
17	onClick={onClick}
18	>
19	<path
20	d="M2 3.9987H3.33333M3.33333 3.9987H14M3.33333 3.9987V13.332C3.33333 13.6857 3.47381 14.0248 3.72386 14.2748C3.97391 14.5249 4.31304 14.6654 4.66667 14.6654H11.3333C11.687 14.6654 12.0261 14.5249 12.2761 14.2748C12.5262 14.0248 12.6667 13.6857 12.6667 13.332V3.9987H3.33333ZM5.33333 3.9987V2.66536C5.33333 2.31174 5.47381 1.9726 5.72386 1.72256C5.97391 1.47251 6.31304 1.33203 6.66667 1.33203H9.33333C9.68696 1.33203 10.0261 1.47251 10.2761 1.72256C10.5262 1.9726 10.6667 2.31174 10.6667 2.66536V3.9987M6.66667 7.33203V11.332M9.33333 7.33203V11.332"
21	stroke="#98A2B3"
22	strokeWidth={1.66667}
23	strokeLinecap="round"
24	strokeLinejoin="round"
25	/>
26	</svg>
27	}
28
29	const Edit = ({onClick}) => {
30	return <svg
31	xmlns="http://www.w3.org/2000/svg"
32	width={12}
33	height={12}
34	viewBox="0 0 12 12"
35	fill="none"
36	onClick={onClick}
37	>
38	<path
39	fillRule="evenodd"
40	clipRule="evenodd"
41	d="M8.60581 0.582347C8.97868 0.209473 9.48441 0 10.0117 0C10.2729 0 10.5314 0.0514267 10.7726 0.151347C11.0139 0.251267 11.233 0.39772 11.4177 0.582347C11.6023 0.766973 11.7487 0.98616 11.8487 1.22739C11.9486 1.46861 12 1.72716 12 1.98826C12 2.24936 11.9486 2.50791 11.8487 2.74913C11.7487 2.99036 11.6023 3.20955 11.4177 3.39417L10.6821 4.12977C10.4217 4.39013 9.99961 4.39013 9.73928 4.12978L7.87021 2.26076C7.60988 2.00041 7.60988 1.5783 7.87021 1.31795L8.60581 0.582347ZM6.92741 3.20357C6.66708 2.94322 6.24495 2.94322 5.98461 3.20357L1.34057 7.8476C0.913375 8.2748 0.610308 8.81007 0.463781 9.3962L0.0199214 11.1717C-0.0368786 11.3988 0.0296881 11.6391 0.195275 11.8047C0.360861 11.9703 0.601188 12.0369 0.828375 11.9801L2.60382 11.5362C3.18993 11.3897 3.72519 11.0867 4.15239 10.6595L8.79641 6.0154C9.05681 5.75507 9.05681 5.33293 8.79641 5.0726L6.92741 3.20357Z"
42	fill="#718096"
43	/>
44	<path
45	fillRule="evenodd"
46	clipRule="evenodd"
47	d="M6 11.3346C6 10.9664 6.29847 10.668 6.66667 10.668H11.3333C11.7015 10.668 12 10.9664 12 11.3346C12 11.7028 11.7015 12.0013 11.3333 12.0013H6.66667C6.29847 12.0013 6 11.7028 6 11.3346Z"
48	fill="#718096"
49	/>
50	</svg>
51	}
52
53	const BetterRepeaterValueShow = (props) => {
54	const builderContext = useBuilderContext();
55	const [action, setAction] = useState(false);
56	const buttonRef = useRef(null);
57	const { fields, onChange, index, parent, visible_fields, setIsOpen, isDefault, isEditMode, editState } = props;
58
59	// @ts-ignore
60	const fieldsArray = Object.values(fields).filter(field => visible_fields.includes(field?.name));
61
62	useEffect(() => {
63	function handleClickOutside(event) {
64	if (buttonRef.current && !buttonRef.current.contains(event.target)) {
65	setAction(false);
66	}
67	}
68
69	window.addEventListener('click', handleClickOutside);
70	return () => {
71	window.removeEventListener('click', handleClickOutside);
72	};
73	}, []);
74	const onDelete = (event) => {
75	Swal.fire({
76	title:__('Are you sure you want delete this rule?', "betterdocs"),
77	icon: "warning",
78	showConfirmButton: true,
79	showCancelButton:true,
80	confirmButtonText: __('Yes', 'betterdocs'),
81	cancelButtonText: __('No', 'betterdocs'),
82	customClass: {
83	popup: 'betterdocs-bulk-action-popup'
84	}
85	}).then((result) => {
86	if( result?.isConfirmed ) {
87	setAction(false);
88	event?.stopPropagation();
89	props.remove(props.index);
90	}
91	});
92	}
93	return (
94	<div className={`wprf-repeater-field`}>
95	<div className="wprf-repeater-inner-field betterdocs">
96	{fieldsArray.map((field, fieldIndex) => {
97	if( isEditMode ) {
98	if (!editState?.[field?.name]) {
99	return;
100	}
101	return <div className='wprf-repeater-inner-field-item' key={'wprf-repeater-inner-field' + fieldIndex}>
102	<p>{ editState?.[field?.name] }</p>
103	</div>
104	} else {
105	if (!builderContext.values?.[parent]?.[index]?.[field?.name]) {
106	return;
107	}
108
109	return <div className='wprf-repeater-inner-field-item' key={'wprf-repeater-inner-field' + fieldIndex}>
110	<p>{ builderContext.values?.[parent]?.[index]?.[field?.name] }</p>
111	</div>
112	}
113	})}
114	{/* {!isDefault && ( */}
115	<div className="betterdocs-action-toggle-wrapper" ref={buttonRef}>
116	{/* <a
117	className="nx-admin-three-dots"
118	onClick={ () => setAction(!action) }
119	>
120	<img src={''} alt={'three-dots'} />
121	</a> */}
122	<div className="betterdocs-cookies-list-action">
123	{/* \|\| item?.elementor_id */}
124	<ul id="betterdocs-admin-actions-ul">
125	{/* <li onClick={() => {
126	setIsOpen(true);
127	setAction(false);
128	}}>
129	{ __('Edit Rule','betterdocs') }
130	</li> */}
131	{/* @ts-ignore */}
132	<Edit onClick={() => {
133	setIsOpen(true);
134	setAction(false);
135	}}/>
136	<Delete onClick={(event) => onDelete(event)}/>
137	{/* <li onClick={(event) => onDelete(event)}> { __('Delete Rule', 'betterdocs') } </li> */}
138	</ul>
139	</div>
140	</div>
141	{/* )} */}
142	</div>
143
144	</div>
145	)
146	}
147
148	export default BetterRepeaterValueShow;
149