@dndbuilder.com/react
Version:
Drag and drop builder for React
98 lines (97 loc) • 4.37 kB
JavaScript
"use client";
import { jsxs as r, jsx as e, Fragment as m } from "react/jsx-runtime";
import { BuilderConfiguration as u } from "../../config/builder.config.js";
import { useAppDispatch as f } from "../../hooks/use-app-dispatch.js";
import { useFrame as x } from "../../hooks/use-frame.js";
import { removeBlock as v } from "../../store/builder-slice.js";
import { classNames as c } from "../../../../../utils.js";
import { Root as b, Trigger as C, Content as N } from "../../../../../node_modules/.pnpm/@radix-ui_react-popover@1.1.6_@types_react-dom@19.0.4_@types_react@19.0.10__@types_react@19.0_t5w3pupubaqz3uyxu3y3pqqfje/node_modules/@radix-ui/react-popover/dist/index.js";
import { memo as y, Suspense as w } from "react";
import { FiMove as k, FiTrash2 as B } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { IoDuplicateOutline as D } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/io5/index.js";
import { EditorContextMenu as F } from "../shared/editor-context-menu.js";
import { DragPreviewImage as P } 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 O = y(
({ blockId: o, blockType: a, isSelected: n, children: p, dragRef: s, previewRef: l }) => {
const t = u.getBlock(a), { document: d } = x(), h = f(), g = (i) => {
i.stopPropagation(), h(v(o));
};
return !d || !t ? null : /* @__PURE__ */ r(b, { open: n, children: [
/* @__PURE__ */ e(F, { blockId: o, children: /* @__PURE__ */ e(C, { asChild: !0, children: p }) }),
/* @__PURE__ */ e(
N,
{
sideOffset: 4,
side: "top",
align: "start",
alignOffset: -1,
className: "outline-hidden max-w-fit p-0",
collisionPadding: { top: 100 },
hideWhenDetached: !0,
avoidCollisions: !0,
children: t.toolbar ? /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(w, { fallback: null, children: /* @__PURE__ */ e(
t.toolbar,
{
blockType: a,
blockId: o,
isSelected: n,
dragRef: s,
previewRef: l
}
) }) }) : /* @__PURE__ */ r(m, { children: [
t.previewImage && /* @__PURE__ */ e(P, { connect: l, src: t.previewImage }),
/* @__PURE__ */ r(
"div",
{
className: c(
"flex items-center rounded-sm bg-gray-800 px-1 text-gray-300"
),
children: [
/* @__PURE__ */ r(
"div",
{
role: "button",
className: c(
"cursor-grab! flex items-center gap-1 px-1 py-1 text-gray-100 hover:bg-transparent hover:text-white"
),
ref: s,
children: [
/* @__PURE__ */ e(k, { className: "rotate-90" }),
/* @__PURE__ */ e("span", { className: "text-xs", children: t.label })
]
}
),
/* @__PURE__ */ e(
"div",
{
role: "button",
onClick: (i) => {
i.stopPropagation(), console.log("Duplicate block", o);
},
className: "mx-1 rounded-tr py-1 text-gray-100 hover:bg-transparent hover:text-white",
children: /* @__PURE__ */ e(D, { size: 16 })
}
),
/* @__PURE__ */ e(
"div",
{
role: "button",
onClick: g,
className: "mx-1 rounded-tr py-1 text-gray-100 hover:bg-transparent hover:text-white",
children: /* @__PURE__ */ e(B, { size: 16 })
}
)
]
}
)
] })
}
)
] });
}
);
O.displayName = "BlockToolbar";
export {
O as default
};
//# sourceMappingURL=block-toolbar.js.map