@dndbuilder.com/react
Version:
Drag and drop builder for React
136 lines (135 loc) • 6.01 kB
JavaScript
"use client";
import { jsx as r, jsxs as i } from "react/jsx-runtime";
import { IconControl as T } from "../../../components/controls/icon.control.js";
import { InputControl as x } from "../../../components/controls/input.control.js";
import { Accordion as c } from "../../../components/shared/accordion.js";
import { Button as y } from "../../../components/shared/button.js";
import { Label as B } from "../../../components/shared/label.js";
import { useSettings as f } from "../../../hooks/use-settings.js";
import { duplicateTabItem as L, removeTabItem as k } from "../../../store/builder-slice.js";
import { getCurrentLocale as w, getSelectedBlockId as F } from "../../../../../../store/selectors.js";
import { SettingsType as a } from "../../../types/index.js";
import { classNames as u, createId as S } from "../../../../../../utils.js";
import { useAppDispatch as A } from "../../../hooks/use-app-dispatch.js";
import { useAppSelector as b } from "../../../hooks/use-app-selector.js";
import { arrayMoveImmutable as j } from "../../../../../../node_modules/.pnpm/array-move@4.0.0/node_modules/array-move/index.js";
import z, { 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 { BiGridVertical as O } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import { BsTrash as $, BsPlus as V } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FaRegCopy as D } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fa6/index.js";
const oe = () => {
const [o, s] = f("tabs", a.BLOCK), [m, d] = f(
"activeTabId",
a.BLOCK
), h = b(w), l = b(F), p = A(), g = (e, t) => {
s(j(o ?? [], e, t));
}, N = (e, t) => {
const n = e == null ? void 0 : e.replace(/(<([^>]+)>)/gi, "").trim();
return n || `Item #${t + 1}`;
}, I = () => {
if (!l)
return;
const e = {
id: S(),
label: {
en: `Tab ${(o == null ? void 0 : o.length) + 1}`
},
children: []
};
s((t) => [...t ?? [], e]), d(e.id);
}, v = (e) => {
l && p(k({ blockId: l, tabIndex: e }));
}, C = (e) => {
l && p(L({ blockId: l, tabIndex: e }));
};
return /* @__PURE__ */ r(c, { defaultValue: "Content", type: "single", collapsible: !0, children: /* @__PURE__ */ i(c.Item, { value: "Content", children: [
/* @__PURE__ */ r(c.Trigger, { className: "p-4", children: "Tabs" }),
/* @__PURE__ */ i(c.Content, { className: "px-4", children: [
/* @__PURE__ */ r(z, { onSortEnd: g, lockAxis: "y", children: o == null ? void 0 : o.map((e, t) => {
var n;
return /* @__PURE__ */ i("div", { className: "mb-1.5", children: [
/* @__PURE__ */ r(K, { children: /* @__PURE__ */ r("div", { className: "z-99 bg-[#F8F9F8] px-2", children: /* @__PURE__ */ i("div", { className: "flex min-h-[40px] items-center", children: [
/* @__PURE__ */ r("button", { className: "me-1 cursor-move", children: /* @__PURE__ */ r(O, { size: 14, color: "#828282" }) }),
/* @__PURE__ */ r(
B,
{
onClick: () => {
d(e.id);
},
className: "flex h-full flex-1 cursor-pointer items-center py-1 text-xs hover:bg-gray-50",
children: N((n = e.label) == null ? void 0 : n[h], t)
}
),
/* @__PURE__ */ r(
"button",
{
onClick: () => C(t),
className: "me-1.5 flex h-full cursor-pointer items-center justify-center hover:bg-gray-50",
children: /* @__PURE__ */ r(D, {})
}
),
/* @__PURE__ */ r(
"button",
{
onClick: () => v(t),
className: "flex h-full cursor-pointer items-center justify-center hover:bg-gray-50",
disabled: (o == null ? void 0 : o.length) === 1,
children: /* @__PURE__ */ r($, {})
}
)
] }) }, t) }, e.id),
/* @__PURE__ */ r(
"div",
{
className: u(
"grid grid-rows-[0fr] overflow-hidden bg-[#F8F9F8] transition-[grid-template-rows] duration-200",
{
"grid-rows-[1fr]": m === e.id
}
),
children: /* @__PURE__ */ i(
"div",
{
className: u(
"min-h-0 px-3 transition-[padding-top,padding-bottom] duration-200",
{
"h-auto pb-3": m === e.id
}
),
children: [
/* @__PURE__ */ r(
x,
{
label: "Label",
type: a.BLOCK,
fieldName: `tabs.${t}.label`,
isLocalized: !0
}
),
/* @__PURE__ */ r(
T,
{
label: "Icon",
type: a.BLOCK,
fieldName: `tabs.${t}.icon`,
className: "mt-3"
}
)
]
}
)
}
)
] }, e.id);
}) }),
/* @__PURE__ */ r("div", { className: "mt-5 flex justify-center", children: /* @__PURE__ */ i(y, { onClick: I, variant: "outline", className: "flex", children: [
/* @__PURE__ */ r(V, { size: 20, className: "me-1" }),
"Add New"
] }) })
] })
] }) });
};
export {
oe as default
};
//# sourceMappingURL=tabs-content.control.js.map