@dndbuilder.com/react
Version:
Drag and drop builder for React
129 lines (128 loc) • 4.71 kB
JavaScript
"use client";
import { jsx as D, jsxs as j } from "react/jsx-runtime";
import { BuilderConfiguration as w } from "../../config/builder.config.js";
import { useBlockSettings as X } from "../../hooks/use-block-settings.js";
import { useContainerSettings as Y } from "../../hooks/use-container-settings.js";
import { addBlocks as k, moveBlock as E, selectBlock as K } from "../../store/builder-slice.js";
import { getIsBlockSelected as _ } from "../../../../../store/selectors.js";
import { Direction as p } from "../../types/index.js";
import { FlexDirection as C, Position as t } from "../../types/style.js";
import { BlockType as A } from "../../types/block.js";
import { createBlock as N, classNames as q } from "../../../../../utils.js";
import { isDropableBlock as P, isMoveableBlock as O } from "../../utils/guard.js";
import { useAppDispatch as z } from "../../hooks/use-app-dispatch.js";
import { useAppSelector as J } from "../../hooks/use-app-selector.js";
import { useRef as Q, useState as U } from "react";
import $ from "./block-placeholder.js";
import oo from "./block-toolbar.js";
import { useDrag as to } 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 eo } 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";
const ko = ({
blockId: c,
index: n,
blockType: B,
parentId: r,
attributes: x,
children: L
}) => {
const g = Q(null), { className: y, ...S } = x, H = w.getBlockTypes(), R = J(_(c)), [h] = X(
r,
"flexDirection.{{BREAKPOINT}}"
), { settings: M, advancedSettings: F } = Y(), m = h === C.ROW || h === C.ROW_REVERSE ? p.HORIZONTAL : p.VERTICAL, [e, T] = U(null), [{ isDragging: G }, V, b] = to({
type: B,
item: {
id: c,
index: n,
parentId: r
},
collect: (o) => ({
isDragging: o.isDragging()
})
}), [{ isOver: a }, W] = eo({
accept: H,
drop: (o, d) => {
if (!d.didDrop()) {
if (P(o)) {
const i = [];
if (o.type !== A.CONTAINER && r === "root") {
const u = N({
type: A.CONTAINER,
parentId: "root",
settings: M,
advancedSettings: F
});
i.push(u);
}
const l = N({
...o,
parentId: r === "root" ? i[0].id : r
});
i.push(l), (e === t.TOP || e === t.LEFT) && f(k({ blocks: i, selectedBlockId: l.id, index: n })), (e === t.BOTTOM || e === t.RIGHT) && f(k({ blocks: i, selectedBlockId: l.id, index: n + 1 }));
}
O(o) && ((e === t.TOP || e === t.LEFT) && f(
E({
sourceId: o.id,
targetId: r,
targetIndex: n
})
), (e === t.BOTTOM || e === t.RIGHT) && f(
E({
sourceId: o.id,
targetId: r,
targetIndex: n + 1
})
));
}
},
hover: (o, d) => {
if (!g.current || !d.isOver() || !d.canDrop() || O(o) && o.index === n && o.parentId === r)
return;
const s = g.current.getBoundingClientRect(), i = (s.bottom - s.top) / 2, l = (s.right - s.left) / 2, u = d.getClientOffset(), v = u.y - s.top, I = u.x - s.left;
m === p.VERTICAL && v < i && T(t.TOP), m === p.HORIZONTAL && I > l && T(t.RIGHT), m === p.VERTICAL && v > i && T(t.BOTTOM), m === p.HORIZONTAL && I < l && T(t.LEFT);
},
collect: (o) => ({
isOver: o.isOver({ shallow: !0 }) && o.canDrop() && (P(o.getItem()) || O(o.getItem()))
})
}), f = z(), Z = (o) => {
o.stopPropagation(), f(K(c));
};
return W(g), /* @__PURE__ */ D(
oo,
{
blockId: c,
blockType: B,
isSelected: R,
dragRef: V,
previewRef: b,
children: /* @__PURE__ */ j(
"div",
{
ref: g,
id: c,
className: q(
c,
"relative transition-all duration-200 ease-in-out",
r === "root" && "ring-inset",
R ? "ring-1 ring-gray-800" : "hover:ring-1 hover:ring-gray-800",
a && e === t.TOP && "mt-2",
a && e === t.RIGHT && "me-2",
a && e === t.BOTTOM && "mb-2",
a && e === t.LEFT && "ms-2",
G && "opacity-30",
y
),
onClick: Z,
...S,
children: [
a && !!e && /* @__PURE__ */ D($, { position: e }),
L
]
}
)
}
);
};
export {
ko as default
};
//# sourceMappingURL=editor-block-wrapper.js.map