@dndbuilder.com/react
Version:
Drag and drop builder for React
223 lines (222 loc) • 8.22 kB
JavaScript
import { jsx as i, jsxs as L, Fragment as z } from "react/jsx-runtime";
import ie from "../../../components/base/block-placeholder.js";
import { EditorRenderBlock as se } from "../../../components/base/editor-render-block.js";
import { BuilderConfiguration as ce } from "../../../config/builder.config.js";
import { useBlockSettings as le } from "../../../hooks/use-block-settings.js";
import { useContainerSettings as ae } from "../../../hooks/use-container-settings.js";
import { selectBlock as fe, setBlockSettingsValueByKey as de, setBlockAdvancedSettingsValueByKey as pe, addBlocks as C, moveBlock as k } from "../../../store/builder-slice.js";
import { getIsBlockSelected as ge } from "../../../../../../store/selectors.js";
import { Direction as u } from "../../../types/index.js";
import { FlexDirection as H, Position as t, Unit as M } from "../../../types/style.js";
import { BlockType as E } from "../../../types/block.js";
import { classNames as K, createBlock as D } from "../../../../../../utils.js";
import { isDropableBlock as R, isMoveableBlock as T } from "../../../utils/guard.js";
import { useAppDispatch as ue } from "../../../hooks/use-app-dispatch.js";
import { useAppSelector as me } from "../../../hooks/use-app-selector.js";
import { useRef as F, useState as he, memo as Te } from "react";
import { BiPlus as ve } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import V from "../container.config.js";
import Ie from "./container-resizer.js";
import G from "./container-spacer.js";
import Oe from "./container-toolbar.js";
import { useDrag as Re } from "../../../../../../node_modules/.pnpm/react-dnd@16.0.1_@types_node@22.13.4_@types_react@19.0.10_react@19.0.0/node_modules/react-dnd/dist/hooks/useDrag/useDrag.js";
import { useDrop as j } from "../../../../../../node_modules/.pnpm/react-dnd@16.0.1_@types_node@22.13.4_@types_react@19.0.10_react@19.0.0/node_modules/react-dnd/dist/hooks/useDrop/useDrop.js";
import { DragPreviewImage as Be } from "../../../../../../node_modules/.pnpm/react-dnd@16.0.1_@types_node@22.13.4_@types_react@19.0.10_react@19.0.0/node_modules/react-dnd/dist/core/DragPreviewImage.js";
const _e = ({
id: n,
type: B,
parentId: s,
index: o,
attributes: y,
children: N,
meta: Z,
isEditable: W
}) => {
const g = F(null), P = F(null), l = ue(), d = s !== "root", m = me(ge(n)), [A] = le(
s,
"flexDirection.{{BREAKPOINT}}"
), v = A === H.ROW || A === H.ROW_REVERSE ? u.HORIZONTAL : u.VERTICAL, [r, I] = he(null), x = ce.getBlockTypes(), { settings: Y, advancedSettings: U } = ae(), { className: _, ...$ } = y, [{ isDragging: q }, J, Q] = Re({
type: B,
item: {
id: n,
index: o,
parentId: s
},
collect: (e) => ({
isDragging: e.isDragging()
})
}), [{ isOver: h }, ee] = j({
accept: x,
drop: (e, a) => {
if (!a.didDrop()) {
if (R(e)) {
const c = [];
if (e.type !== E.CONTAINER && s === "root") {
const O = D({
type: E.CONTAINER,
parentId: "root",
settings: Y,
advancedSettings: U
});
c.push(O);
}
const f = D({
...e,
parentId: s === "root" && e.type !== E.CONTAINER ? c[0].id : s
});
c.push(f), (r === t.TOP || r === t.LEFT) && l(C({ blocks: c, selectedBlockId: f.id, index: o })), (r === t.BOTTOM || r === t.RIGHT) && l(C({ blocks: c, selectedBlockId: f.id, index: o + 1 }));
}
T(e) && ((r === t.TOP || r === t.LEFT) && l(
k({
sourceId: e.id,
targetId: s,
targetIndex: o
})
), (r === t.BOTTOM || r === t.RIGHT) && l(
k({
sourceId: e.id,
targetId: s,
targetIndex: o + 1
})
));
}
},
hover: (e, a) => {
if (!g.current || !a.isOver() || !a.canDrop() || T(e) && e.index === o && e.parentId === s)
return;
const p = g.current.getBoundingClientRect(), c = (p.bottom - p.top) / 2, f = (p.right - p.left) / 2, O = a.getClientOffset(), w = O.y - p.top, S = O.x - p.left;
v === u.VERTICAL && w < c && I(t.TOP), v === u.HORIZONTAL && S > f && I(t.RIGHT), v === u.VERTICAL && w > c && I(t.BOTTOM), v === u.HORIZONTAL && S < f && I(t.LEFT);
},
collect: (e) => ({
isOver: e.isOver({ shallow: !0 }) && e.canDrop() && (R(e.getItem()) || T(e.getItem()))
})
}), [{ isOver: te }, re] = j({
accept: x,
drop: (e, a) => {
if (!a.didDrop()) {
if (R(e)) {
const c = [], f = D({
...e,
parentId: n
});
c.push(f), l(
C({
blocks: c,
selectedBlockId: f.id
})
);
return;
}
T(e) && l(
k({
sourceId: e.id,
targetId: n,
targetIndex: o
})
);
}
},
collect: (e) => ({
isOver: e.isOver({ shallow: !0 }) && e.canDrop() && (R(e.getItem()) || T(e.getItem()))
})
}), oe = (e) => {
e.stopPropagation(), l(fe(n));
}, ne = (e) => {
l(
de({
id: n,
values: [
{ key: "width.{{BREAKPOINT}}.value", value: e },
{ key: "width.{{BREAKPOINT}}.unit", value: M.PERCENTAGE }
]
})
);
}, b = (e, a) => {
l(
pe({
id: n,
values: [
{ key: `padding.{{BREAKPOINT}}.${a}`, value: e },
{ key: "padding.{{BREAKPOINT}}.unit", value: M.PX }
]
})
);
};
return ee(g), re(P), /* @__PURE__ */ i(Oe, { id: n, index: o, isInner: d, dragRef: J, children: /* @__PURE__ */ L(
"div",
{
className: K(
n,
"group relative flex w-full flex-col",
!d && "items-center justify-center after:pointer-events-none after:absolute after:left-0 after:top-0 after:z-10 after:h-full after:w-full after:ring-inset",
!d && m && "after:ring-1 after:ring-inset after:ring-gray-800",
!d && !m && "after:ring-inset hover:after:ring-1 hover:after:ring-gray-800",
d && m && "ring-1 ring-inset ring-gray-800",
d && !m && "ring-inset hover:ring-1 hover:ring-gray-800",
h && r === t.TOP && "mt-2",
h && r === t.RIGHT && "me-2",
h && r === t.BOTTOM && "mb-2",
h && r === t.LEFT && "ms-2",
_
),
ref: g,
onClick: oe,
...$,
children: [
h && !!r && /* @__PURE__ */ i(ie, { position: r }),
/* @__PURE__ */ i(
"div",
{
className: K(
"content relative mx-auto flex w-full max-w-[1140px]",
q && "opacity-30 *:pointer-events-none",
te && N.length === 0 && "bg-gray-50"
),
ref: P,
children: /* @__PURE__ */ i(X, { blocks: N, meta: Z, isEditable: W ?? !1 })
}
),
V.previewImage && /* @__PURE__ */ i(Be, { connect: Q, src: V.previewImage }),
d && /* @__PURE__ */ i(Ie, { containerRef: g, onChange: ne }),
!d && m && /* @__PURE__ */ L(z, { children: [
/* @__PURE__ */ i(
G,
{
containerRef: g,
position: t.TOP,
onChange: b
}
),
/* @__PURE__ */ i(
G,
{
containerRef: g,
position: t.BOTTOM,
onChange: b
}
)
] })
]
}
) });
}, X = Te(({ blocks: n, meta: B, isEditable: s }) => n.length ? /* @__PURE__ */ i(z, { children: n.map((o, y) => /* @__PURE__ */ i(
se,
{
index: y,
block: o,
meta: B,
isEditable: s
},
typeof o == "string" ? o : o.id
)) }) : /* @__PURE__ */ i(
"div",
{
className: "pointer-events-none flex h-full min-h-[80px] w-full items-center justify-center border border-dashed border-gray-300",
children: /* @__PURE__ */ i(ve, { size: 30, className: "text-gray-300" })
}
));
X.displayName = "RenderChildren";
export {
_e as default
};
//# sourceMappingURL=container-dnd-handler.js.map