@dndbuilder.com/react
Version:
Drag and drop builder for React
87 lines (86 loc) • 3.91 kB
JavaScript
import { jsxs as r, jsx as e, Fragment as h } from "react/jsx-runtime";
import u from "../../../components/base/add-container.js";
import { EditorContextMenu as x } from "../../../components/shared/editor-context-menu.js";
import { duplicateBlock as f, removeBlock as g } from "../../../store/builder-slice.js";
import { getIsBlockSelected as v } from "../../../../../../store/selectors.js";
import { useAppDispatch as b } from "../../../hooks/use-app-dispatch.js";
import { useAppSelector as C } from "../../../hooks/use-app-selector.js";
import { classNames as n } from "../../../../../../utils.js";
import { Root as y, Trigger as N, Portal as k, Content as w } 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 P } from "react";
import { FiMove as F, FiPlusCircle as I, FiTrash2 as T } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { IoDuplicateOutline as j } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/io5/index.js";
const z = P(({ id: o, index: a, isInner: s, dragRef: l, children: c }) => {
const m = C(v(o)), i = b(), p = (t) => {
t.stopPropagation(), i(f({ blockId: o }));
}, d = (t) => {
t.stopPropagation, i(g(o));
};
return /* @__PURE__ */ r(y, { open: m, children: [
/* @__PURE__ */ e(x, { blockId: o, children: /* @__PURE__ */ e(N, { asChild: !0, children: c }) }),
/* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
w,
{
sideOffset: 3,
side: "top",
className: "outline-hidden max-w-fit p-0",
collisionPadding: { top: 100 },
hideWhenDetached: !0,
children: /* @__PURE__ */ r(
"div",
{
className: n("flex items-center justify-between rounded-sm bg-gray-800 px-1"),
children: [
/* @__PURE__ */ e(h, { children: /* @__PURE__ */ r(
"div",
{
role: "button",
className: n(
"cursor-grab! flex items-center gap-1 px-1 py-1 text-gray-100 hover:bg-transparent hover:text-white"
),
ref: l,
children: [
/* @__PURE__ */ e(F, { className: "rotate-90" }),
/* @__PURE__ */ e("span", { className: "text-xs", children: "Container" })
]
}
) }),
!s && /* @__PURE__ */ e(u, { position: a, children: /* @__PURE__ */ e(
"div",
{
role: "button",
className: "me-2 ms-1 rounded-tl py-1 text-gray-100 hover:bg-transparent hover:text-white",
onClick: (t) => t.stopPropagation(),
children: /* @__PURE__ */ e(I, { size: 16 })
}
) }),
/* @__PURE__ */ e(
"div",
{
role: "button",
onClick: p,
className: "mx-1 rounded-tr py-1 text-gray-100 hover:bg-transparent hover:text-white",
children: /* @__PURE__ */ e(j, { size: 16 })
}
),
/* @__PURE__ */ e(
"div",
{
role: "button",
onClick: d,
className: "mx-1 rounded-tr py-1 text-gray-100 hover:bg-transparent hover:text-white",
children: /* @__PURE__ */ e(T, { size: 16 })
}
)
]
}
)
}
) })
] });
});
z.displayName = "ContainerToolbar";
export {
z as default
};
//# sourceMappingURL=container-toolbar.js.map