@dndbuilder.com/react
Version:
Drag and drop builder for React
111 lines (110 loc) • 3.84 kB
JavaScript
"use client";
import { jsxs as m, jsx as i } from "react/jsx-runtime";
import { createBlock as h } from "../../../../../utils.js";
import { Popover as t } from "../shared/popover.js";
import { BuilderConfiguration as N } from "../../config/builder.config.js";
import { useAppDispatch as T } from "../../hooks/use-app-dispatch.js";
import { addBlocks as y } from "../../store/builder-slice.js";
import { Unit as w } from "../../types/style.js";
import { BlockType as d } from "../../types/block.js";
import { Breakpoint as s } from "../../types/responsive.js";
import { AiOutlineArrowDown as O, AiOutlineArrowRight as b } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ai/index.js";
const v = [
{
size: [100],
direction: "column",
content: /* @__PURE__ */ i(O, { size: 20 })
},
{ size: [100], direction: "row", content: /* @__PURE__ */ i(b, { size: 20 }) },
{ size: [50, 50], direction: "row" },
{ size: [33.33, 33.33, 33.33], direction: "row" },
{ size: [25, 25, 25, 25], direction: "row" },
{ size: [20, 20, 20, 20, 20], direction: "row" },
{ size: [16.66, 16.66, 16.66, 16.66, 16.66, 16.66], direction: "row" },
{ size: [30, 70], direction: "row" },
{ size: [70, 30], direction: "row" },
{ size: [60, 20, 20], direction: "row" },
{ size: [20, 20, 60], direction: "row" },
{ size: [20, 60, 20], direction: "row" }
], G = ({
blockId: g = "root",
children: u,
position: f,
onBlockAdded: c
}) => {
var p;
const C = T(), { settings: a, advancedSettings: l } = N.getBlock(
d.CONTAINER
), z = ({ size: r, direction: o }) => {
const e = h({
type: d.CONTAINER,
settings: {
...a,
width: {
[s.DESKTOP]: {
unit: w.PERCENTAGE,
value: 100
}
},
flexDirection: {
[s.DESKTOP]: o
}
},
advancedSettings: l,
parentId: g
}), n = [];
r.length > 1 && r.forEach((E) => {
const x = h({
type: d.CONTAINER,
settings: {
...a,
width: {
[s.DESKTOP]: {
unit: w.PERCENTAGE,
value: E
}
},
flexDirection: {
[s.DESKTOP]: o
}
},
advancedSettings: l,
parentId: e.id
});
n.push(x);
}), C(
y({
blocks: [e, ...n],
selectedBlockId: e.id,
index: f
})
), c == null || c(e);
};
return /* @__PURE__ */ m(t, { modal: !0, children: [
/* @__PURE__ */ i(t.Trigger, { asChild: !0, children: u }),
/* @__PURE__ */ i(t.Portal, { container: ((p = window.frameDocument) == null ? void 0 : p.body) || document.body, children: /* @__PURE__ */ i(
t.Content,
{
asChild: !0,
sideOffset: 10,
className: "w-[600px] rounded border border-gray-200 border-gray-300 bg-white p-4 shadow-sm",
children: /* @__PURE__ */ m("div", { onClick: (r) => r.stopPropagation(), children: [
/* @__PURE__ */ i("div", { className: "grid grid-cols-4 gap-4", children: v.map((r, o) => /* @__PURE__ */ i(t.Close, { asChild: !0, children: /* @__PURE__ */ i("div", { className: "group flex gap-[2px]", onClick: () => z(r), children: r.size.map((e, n) => /* @__PURE__ */ i(
"div",
{
style: { width: `${e}%` },
className: "flex h-[45px] cursor-pointer items-center justify-center rounded-[2px] bg-gray-200 text-white transition-colors duration-300 group-hover:bg-gray-300",
children: r.content
},
n
)) }) }, o)) }),
/* @__PURE__ */ i(t.Arrow, { width: 20, height: 9, fill: "white" })
] })
}
) })
] });
};
export {
G as default
};
//# sourceMappingURL=add-container.js.map