@dndbuilder.com/react
Version:
Drag and drop builder for React
67 lines (66 loc) • 2.02 kB
JavaScript
"use client";
import { jsx as I } from "react/jsx-runtime";
import { BuilderConfiguration as u } from "../../config/builder.config.js";
import { addBlocks as v, addBlock as O } from "../../store/builder-slice.js";
import { BlockType as o } from "../../types/block.js";
import { createBlock as p, classNames as T } from "../../../../../utils.js";
import { isDropableBlock as n } from "../../utils/guard.js";
import { useAppDispatch as h } from "../../hooks/use-app-dispatch.js";
import { useRef as R } from "react";
import { useDrop as k } 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 H = ({
blockId: c = "root",
className: y,
children: b,
onBlockAdded: t
}) => {
const d = u.getBlockTypes(), a = h(), s = u.getBlock(o.CONTAINER), [{ isOver: D }, N] = k({
accept: d,
drop: (r, g) => {
if (g.didDrop() || !n(r))
return;
if (r.type !== o.CONTAINER) {
const f = p({
type: o.CONTAINER,
parentId: c,
settings: s == null ? void 0 : s.settings,
advancedSettings: s == null ? void 0 : s.advancedSettings
}), e = [f], m = p({
...r,
parentId: f.id
});
e.push(m), a(
v({
blocks: e,
selectedBlockId: m.id
})
), t == null || t(e[0]);
return;
}
const l = p({
...r,
parentId: c
});
a(O({ block: l })), t == null || t(l);
},
collect: (r) => ({
isOver: r.isOver({ shallow: !0 }) && r.canDrop() && n(r.getItem())
})
}), i = R(null);
return N(i), /* @__PURE__ */ I(
"div",
{
className: T(
"flex w-full justify-center rounded-sm border border-dashed py-6",
D ? "border-gray-800" : "border-gray-300",
y
),
ref: i,
children: b
}
);
};
export {
H as default
};
//# sourceMappingURL=block-dropzone.js.map