@dndbuilder.com/react
Version:
Drag and drop builder for React
157 lines (156 loc) • 6.82 kB
JavaScript
"use client";
import { jsx as r, jsxs as a } from "react/jsx-runtime";
import { ScrollArea as L } from "../../shared/scroll-area.js";
import { BuilderConfiguration as B } from "../../../config/builder.config.js";
import { getContentRoot as w, getBlock as E, getSelectedBlock as A, getIsAnyChildSelected as D } from "../../../../../../store/selectors.js";
import { selectBlock as M, duplicateBlock as P, removeBlock as R } from "../../../store/builder-slice.js";
import { useAppSelector as d } from "../../../hooks/use-app-selector.js";
import { useState as q, useCallback as z, useEffect as F } from "react";
import { useAppDispatch as j } from "../../../hooks/use-app-dispatch.js";
import "../../../store/theme-slice.js";
import "../../../../../../_virtual/cjs.js";
import { useAction as $ } from "../../../hooks/use-action.js";
import { BuilderRightPanelType as b } from "../../../types/index.js";
import { classNames as l } from "../../../../../../utils.js";
import { BsQuestionCircle as T } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FiLayers as k, FiX as O, FiChevronRight as Q, FiTrash2 as U } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { IoDuplicateOutline as X } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/io5/index.js";
const h = ({ blockId: t, index: c }) => {
const s = j(), m = d(E(t)), o = B.getBlock(m.type), n = d(A), [u, p] = q(!0), g = (n == null ? void 0 : n.id) === t, f = d(D(t)), y = (e) => {
e.stopPropagation(), p((i) => !i);
}, v = z(
(e) => {
e.stopPropagation(), o && s(M(t));
},
[t, s]
), x = (e) => {
e.stopPropagation(), s(P({ blockId: t }));
}, N = (e) => {
e.stopPropagation(), s(R(t));
}, C = () => {
if (!((n == null ? void 0 : n.id) === t || typeof document > "u"))
try {
const e = document.querySelector("iframe");
if (!e || !e.contentDocument) return;
const i = e.contentDocument.querySelector(
`[data-block-id="${t}"]`
);
if (!i) return;
i.classList.contains("after:ring-inset") ? i.classList.add("after:ring-1", "after:ring-gray-800") : i.classList.add("ring-1", "ring-gray-800");
} catch (e) {
console.error("Error in handleMouseEnter:", e);
}
}, S = () => {
if (!((n == null ? void 0 : n.id) === t || typeof document > "u"))
try {
const e = document.querySelector("iframe");
if (!e || !e.contentDocument) return;
const i = e.contentDocument.querySelector(
`[data-block-id="${t}"]`
);
if (!i) return;
i.classList.contains("after:ring-inset") ? i.classList.remove("after:ring-1", "after:ring-gray-800") : i.classList.remove("ring-1", "ring-gray-800");
} catch (e) {
console.error("Error in handleMouseLeave:", e);
}
};
return F(() => (f && p(!1), () => {
p(!0);
}), [f]), /* @__PURE__ */ a(
"div",
{
className: l({
"bg-gray-50": g
}),
children: [
/* @__PURE__ */ a(
"div",
{
onMouseEnter: C,
onMouseLeave: S,
onClick: v,
className: l(
"group flex cursor-pointer items-center py-3 pe-4 transition-colors duration-150",
g ? "bg-gray-100" : "hover:bg-gray-100"
),
style: {
paddingInlineStart: c === 1 ? "10px" : `${c * 16}px`
},
children: [
/* @__PURE__ */ r(
"div",
{
onClick: y,
className: l("me-2 h-full cursor-pointer transition-all duration-200", {
"rotate-90": !u,
invisible: !m.children.length
}),
children: /* @__PURE__ */ r(Q, { size: 16 })
}
),
/* @__PURE__ */ a("div", { className: l("flex w-full items-center gap-1.5 "), children: [
o != null && o.icon ? /* @__PURE__ */ r(o.icon, {}) : /* @__PURE__ */ r(T, {}),
/* @__PURE__ */ r("span", { children: (o == null ? void 0 : o.label) ?? "Unsupported Block" }),
/* @__PURE__ */ a("div", { className: "ms-auto hidden items-center gap-2 group-hover:flex", children: [
o && /* @__PURE__ */ r(
X,
{
size: 14,
onClick: x,
className: "text-gray-600 hover:text-gray-900"
}
),
/* @__PURE__ */ r(U, { size: 14, onClick: N, className: "text-gray-600 hover:text-gray-900" })
] })
] })
]
}
),
m.children.length > 0 && /* @__PURE__ */ r(
"div",
{
className: l(
"grid grid-rows-[0fr] overflow-hidden transition-[grid-template-rows] duration-200",
{
"grid-rows-[1fr]": !u
}
),
children: /* @__PURE__ */ r("div", { className: l("min-h-0", { "h-auto": !u }), children: m.children.map(
(e) => typeof e == "string" && /* @__PURE__ */ r(h, { blockId: e, index: c + 1 }, e)
) })
}
)
]
}
);
}, se = () => {
const t = d(w), { toggleRightPanel: c } = $();
return /* @__PURE__ */ r(L, { className: "h-[calc(100vh-70px)]", children: /* @__PURE__ */ a("div", { children: [
/* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-2 border-b p-4 text-base font-semibold", children: [
/* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ r(k, {}),
"Structure"
] }),
/* @__PURE__ */ r(
"button",
{
className: "text-gray-600 hover:text-gray-900",
onClick: () => {
c(b.LAYER);
},
children: /* @__PURE__ */ r(O, { size: 16 })
}
)
] }),
t.children.length > 0 ? /* @__PURE__ */ r("div", { className: "divide-y border-b", children: t.children.map(
(s) => typeof s == "string" && /* @__PURE__ */ r(h, { blockId: s, index: 1 }, s)
) }) : /* @__PURE__ */ a("div", { className: "m-4 rounded-sm p-4 text-center", children: [
/* @__PURE__ */ r("h4", { className: "mb-1 text-lg font-medium text-gray-600", children: "No Elements" }),
/* @__PURE__ */ r("p", { className: "text-gray-500", children: "Add an element to your page and it will show up here." })
] })
] }) });
};
export {
se as default
};
//# sourceMappingURL=structure.js.map