@dndbuilder.com/react
Version:
Drag and drop builder for React
145 lines (144 loc) • 5.98 kB
JavaScript
"use client";
import { jsxs as l, jsx as t } from "react/jsx-runtime";
import { useSettings as b } from "../../../hooks/use-settings.js";
import { SettingsType as n } from "../../../types/index.js";
import { Label as y } from "../../../components/shared/label.js";
import { useState as C } from "react";
import { l as a } from "../../../../../../_virtual/lodash.js";
import { createId as f, classNames as h } from "../../../../../../utils.js";
import { FaRegCopy as L } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fa/index.js";
import { BsTrash as S, BsPlus as I } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { InputControl as w } from "../../../components/controls/input.control.js";
import { Button as F } from "../../../components/shared/button.js";
import { TextareaControl as B } from "../../../components/controls/textarea.control.js";
import j, { SortableItem as k } from "../../../../../../node_modules/.pnpm/react-easy-sort@1.6.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/react-easy-sort/index.module.js";
import { arrayMoveImmutable as z } from "../../../../../../node_modules/.pnpm/array-move@4.0.0/node_modules/array-move/index.js";
import { BiGridVertical as T } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import { useAppSelector as A } from "../../../hooks/use-app-selector.js";
import { getCurrentLocale as D } from "../../../../../../store/selectors.js";
const Z = () => {
const [i, c] = b("items", n.BLOCK), [m, g] = C(""), x = A(D), v = (e, r) => {
c(z(i ?? [], e, r));
}, N = (e, r) => {
const s = e == null ? void 0 : e.replace(/(<([^>]+)>)/gi, "").trim();
return s || `Item #${r + 1}`;
};
return /* @__PURE__ */ l("div", { children: [
/* @__PURE__ */ t(j, { onSortEnd: v, lockAxis: "y", children: i == null ? void 0 : i.map((e, r) => {
var s, d, p, u;
return /* @__PURE__ */ l("div", { className: "mb-1.5", children: [
/* @__PURE__ */ t(k, { children: /* @__PURE__ */ t("div", { className: "z-[99] bg-[#F8F9F8] px-2", children: /* @__PURE__ */ l("div", { className: "flex min-h-[40px] items-center", children: [
/* @__PURE__ */ t("button", { className: "me-1 cursor-move", children: /* @__PURE__ */ t(T, { size: 14, color: "#828282" }) }),
/* @__PURE__ */ t(
y,
{
onClick: () => {
g((o) => o === e.id ? "" : e.id);
},
className: "line-clamp-2 flex h-full flex-1 cursor-pointer items-center py-1 text-xs hover:bg-gray-50",
children: N(((d = (s = e.title) == null ? void 0 : s.text) == null ? void 0 : d[x]) || ((u = (p = e.title) == null ? void 0 : p.text) == null ? void 0 : u.en), r)
}
),
/* @__PURE__ */ t(
"div",
{
onClick: () => {
const o = a.cloneDeep(i) ?? [];
o.splice(r + 1, 0, {
...e,
id: f()
}), c(o);
},
className: "me-1.5 flex h-full cursor-pointer items-center justify-center hover:bg-gray-50",
children: /* @__PURE__ */ t(L, {})
}
),
/* @__PURE__ */ t(
"div",
{
onClick: () => {
const o = a.cloneDeep(i) ?? [];
o.splice(r, 1), c(o);
},
className: "flex h-full cursor-pointer items-center justify-center hover:bg-gray-50",
children: /* @__PURE__ */ t(S, {})
}
)
] }) }, e.id) }, e.id),
/* @__PURE__ */ t(
"div",
{
className: h(
"grid grid-rows-[0fr] overflow-hidden bg-[#F8F9F8] transition-[grid-template-rows] duration-200",
{
"grid-rows-[1fr]": m === e.id
}
),
children: /* @__PURE__ */ l(
"div",
{
className: h(
"min-h-0 px-3 transition-[padding-top,padding-bottom] duration-200",
{
"h-auto pb-3": m === e.id
}
),
children: [
/* @__PURE__ */ t(
w,
{
type: n.BLOCK,
fieldName: `items.${r}.title.text`,
label: "Title",
isLocalized: !0
}
),
/* @__PURE__ */ t(
B,
{
type: n.BLOCK,
fieldName: `items.${r}.description.text`,
label: "Description",
isLocalized: !0
}
)
]
}
)
}
)
] }, e.id);
}) }),
/* @__PURE__ */ t("div", { className: "mt-5 flex justify-center", children: /* @__PURE__ */ l(
F,
{
onClick: () => {
const e = a.cloneDeep(i) ?? [];
e.push({
id: f(),
title: {
text: {
en: `Item #${e.length + 1}`
}
},
description: {
text: {
en: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum!"
}
}
}), c(e);
},
variant: "outline",
className: "flex",
children: [
/* @__PURE__ */ t(I, { size: 20, className: "me-1" }),
"Add New"
]
}
) })
] });
};
export {
Z as default
};
//# sourceMappingURL=faqs.control.js.map