@frontify/fondue
Version:
Design system of Frontify
44 lines (43 loc) • 1.17 kB
JavaScript
import { jsx as c } from "react/jsx-runtime";
import { useDrop as w } from "react-dnd";
import { merge as m } from "../../utilities/merge.es.js";
const u = ({
data: t,
onDrop: o,
accept: i,
children: s,
"data-test-id": n = "drop-zone"
}) => {
const [{ isOver: a, canDrop: p }, l] = w({
accept: i || "",
drop: (e) => {
o == null || o(t.targetItem, e, t.position);
},
canDrop: (e) => e.id !== t.targetItem.id,
collect: (e) => ({
isOver: e.isOver(),
canDrop: e.canDrop()
})
}), r = a && p;
return /* @__PURE__ */ c(
"div",
{
role: "row",
"aria-hidden": !r,
"data-test-id": n,
className: m([
"tw-w-full tw-transition-height",
t.position !== "within" ? "tw-my-[-4px] tw-h-[10px] tw-py-1 tw-outline-none tw-relative tw-z-20" : "tw-h-auto",
r && t.position !== "within" ? "tw-border-violet-60 tw-border-2 tw-h-7 tw-bg-clip-content" : "",
r && t.position === "within" ? "tw-bg-violet-20" : ""
]),
ref: l,
children: s
}
);
};
u.displayName = "FondueDropZone";
export {
u as DropZone
};
//# sourceMappingURL=DropZone.es.js.map