@dndbuilder.com/react
Version:
Drag and drop builder for React
185 lines (184 loc) • 7.31 kB
JavaScript
import { jsxs as n, jsx as e } from "react/jsx-runtime";
import { useSettings as v } from "../../../hooks/use-settings.js";
import { SettingsType as s } from "../../../types/index.js";
import { useState as C } from "react";
import { Label as L } from "../../../components/shared/label.js";
import { l as m } from "../../../../../../_virtual/lodash.js";
import { createId as u, classNames as f } from "../../../../../../utils.js";
import { BsTrash as y, BsPlus as w } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FaRegCopy as S } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fa/index.js";
import { Button as B } from "../../../components/shared/button.js";
import { InputControl as c } from "../../../components/controls/input.control.js";
import { TextareaControl as x } from "../../../components/controls/textarea.control.js";
import { SwitchControl as I } from "../../../components/controls/switch.control.js";
import O, { SortableItem as F } 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 K } from "../../../../../../node_modules/.pnpm/array-move@4.0.0/node_modules/array-move/index.js";
import { BiGridVertical as $ } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import { MediaControl as z } from "../../../components/controls/media.control.js";
import { useAppSelector as T } from "../../../hooks/use-app-selector.js";
import { getCurrentLocale as j } from "../../../../../../store/selectors.js";
const ee = () => {
const [o, a] = v(
"testimonials",
s.BLOCK
), [p, h] = C(""), g = T(j), N = (t, i) => {
a(K(o ?? [], t, i));
}, b = (t, i) => {
const l = t == null ? void 0 : t.replace(/(<([^>]+)>)/gi, "").trim();
return l || `Item #${i + 1}`;
};
return /* @__PURE__ */ n("div", { children: [
/* @__PURE__ */ e(O, { onSortEnd: N, lockAxis: "y", children: o == null ? void 0 : o.map((t, i) => {
var l, d;
return /* @__PURE__ */ n("div", { className: "mb-1.5", children: [
/* @__PURE__ */ e(F, { children: /* @__PURE__ */ e("div", { className: "z-[99] bg-[#F8F9F8] px-2", children: /* @__PURE__ */ n("div", { className: "flex min-h-[40px] items-center", children: [
/* @__PURE__ */ e("button", { className: "me-1 cursor-move", children: /* @__PURE__ */ e($, { size: 14, color: "#828282" }) }),
/* @__PURE__ */ e(
L,
{
onClick: () => {
h((r) => r === t.id ? "" : t.id);
},
className: "flex h-full flex-1 cursor-pointer items-center ",
children: b(((l = t.name) == null ? void 0 : l[g]) || ((d = t.name) == null ? void 0 : d.en), i)
}
),
/* @__PURE__ */ e(
"div",
{
onClick: () => {
const r = m.cloneDeep(o) ?? [];
r.splice(i + 1, 0, {
...t,
id: u()
}), a(r);
},
className: "me-1.5 flex h-full cursor-pointer items-center justify-center ",
children: /* @__PURE__ */ e(S, {})
}
),
/* @__PURE__ */ e(
"div",
{
onClick: () => {
const r = m.cloneDeep(o) ?? [];
r.splice(i, 1), a(r);
},
className: "flex h-full cursor-pointer items-center justify-center ",
children: /* @__PURE__ */ e(y, {})
}
)
] }) }, i) }, t.id),
/* @__PURE__ */ e(
"div",
{
className: f(
"grid grid-rows-[0fr] overflow-hidden bg-[#F8F9F8] transition-[grid-template-rows] duration-200",
{
"grid-rows-[1fr]": p === t.id
}
),
children: /* @__PURE__ */ n(
"div",
{
className: f(
"min-h-0 px-3 transition-[padding-top,padding-bottom] duration-200",
{
"h-auto pb-3": p === t.id
}
),
children: [
/* @__PURE__ */ e(
c,
{
type: s.BLOCK,
fieldName: `testimonials.${i}.name`,
label: "Name",
isLocalized: !0
}
),
/* @__PURE__ */ e(
c,
{
type: s.BLOCK,
fieldName: `testimonials.${i}.position`,
label: "Position",
isLocalized: !0
}
),
/* @__PURE__ */ e(
x,
{
type: s.BLOCK,
fieldName: `testimonials.${i}.content`,
label: "Review",
isLocalized: !0
}
),
/* @__PURE__ */ e(
z,
{
type: s.BLOCK,
fieldName: `testimonials.${i}.image`,
label: "Image"
}
),
/* @__PURE__ */ e(
I,
{
type: s.BLOCK,
fieldName: `testimonials.${i}.showRating`,
label: "Show Ratings"
}
),
/* @__PURE__ */ e(
c,
{
type: s.BLOCK,
fieldName: `testimonials.${i}.rating`,
label: "Rating",
inputProps: {
type: "number",
inputMode: "numeric",
min: 0,
max: 5,
step: 1
}
}
)
]
}
)
}
)
] }, t.id);
}) }),
/* @__PURE__ */ e("div", { className: "mt-5 flex justify-center", children: /* @__PURE__ */ n(
B,
{
onClick: () => {
const t = m.cloneDeep(o) ?? [];
t.push({
id: u(),
content: {
en: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh. Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo."
},
name: { en: "John Doe" },
position: { en: "CEO" },
rating: 3
}), a(t);
},
variant: "outline",
className: "flex",
children: [
/* @__PURE__ */ e(w, { size: 20, className: "me-1" }),
"Add New"
]
}
) })
] });
};
export {
ee as default
};
//# sourceMappingURL=testimonials.js.map