@dndbuilder.com/react
Version:
Drag and drop builder for React
276 lines (275 loc) • 11.2 kB
JavaScript
import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { BackgroundControl as B } from "../../../../components/controls/background.control.js";
import { ColorControl as N } from "../../../../components/controls/color.control.js";
import { InputControl as u } from "../../../../components/controls/input.control.js";
import { LinkControl as b } from "../../../../components/controls/link.control.js";
import { TextareaControl as k } from "../../../../components/controls/textarea.control.js";
import { Button as L } from "../../../../components/shared/button.js";
import { Label as S } from "../../../../components/shared/label.js";
import { Tabs as i } from "../../../../components/shared/tabs.js";
import { useSettings as x } from "../../../../hooks/use-settings.js";
import { getCurrentLocale as O } from "../../../../../../../store/selectors.js";
import { SettingsType as r } from "../../../../types/index.js";
import { PseudoClass as F } from "../../../../types/style.js";
import { createId as C, classNames as g } from "../../../../../../../utils.js";
import { useAppSelector as $ } from "../../../../hooks/use-app-selector.js";
import { arrayMoveImmutable as K } from "../../../../../../../node_modules/.pnpm/array-move@4.0.0/node_modules/array-move/index.js";
import { l as m } from "../../../../../../../_virtual/lodash.js";
import { useState as w } from "react";
import T, { SortableItem as z } from "../../../../../../../node_modules/.pnpm/react-easy-sort@1.6.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/react-easy-sort/index.module.js";
import { BiGridVertical as A } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import { BsTrash as I, BsPlus as P } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FaRegCopy as j } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fa/index.js";
import D from "./slide-horizontal-position.control.js";
import E from "./slide-overlay-blend.control.js";
import V from "./slide-overlay-color.control.js";
import H from "./slide-overlay.control.js";
import M from "./slide-text-align.control.js";
import G from "./slide-vertical-position.control.js";
const ye = () => {
const h = $(O), [s, d] = x(
"slides",
r.BLOCK
), [c, p] = w(""), y = (t, o) => {
d(K(s ?? [], t, o));
}, v = (t, o) => {
const a = t == null ? void 0 : t.replace(/(<([^>]+)>)/gi, "").trim();
return a || `Item #${o + 1}`;
};
return /* @__PURE__ */ l("div", { children: [
/* @__PURE__ */ e(T, { onSortEnd: y, lockAxis: "y", children: s == null ? void 0 : s.map((t, o) => {
var a, f;
return /* @__PURE__ */ l("div", { className: "mb-1.5", children: [
/* @__PURE__ */ e(z, { children: /* @__PURE__ */ e("div", { className: "z-[99] bg-[#F8F9F8] px-2", children: /* @__PURE__ */ l("div", { className: "flex min-h-[40px] items-center", children: [
/* @__PURE__ */ e("button", { className: "me-1 cursor-move", children: /* @__PURE__ */ e(A, { size: 14, color: "#828282" }) }),
/* @__PURE__ */ e(
S,
{
onClick: () => {
p((n) => n === t.id ? "" : t.id);
},
className: "flex h-full flex-1 cursor-pointer items-center py-1 text-xs hover:bg-gray-50",
children: v(((a = t.title) == null ? void 0 : a[h]) || ((f = t.title) == null ? void 0 : f.en), o)
}
),
/* @__PURE__ */ e(
"div",
{
onClick: () => {
const n = m.cloneDeep(s) ?? [];
n.splice(o + 1, 0, {
...t,
id: C()
}), d(n);
},
className: "me-1.5 flex h-full cursor-pointer items-center justify-center hover:bg-gray-50",
children: /* @__PURE__ */ e(j, {})
}
),
/* @__PURE__ */ e(
"div",
{
onClick: () => {
const n = m.cloneDeep(s) ?? [];
n.splice(o, 1), d(n);
},
className: "flex h-full cursor-pointer items-center justify-center hover:bg-gray-50",
children: /* @__PURE__ */ e(I, {})
}
)
] }) }) }, t.id),
/* @__PURE__ */ e(
"div",
{
className: g(
"grid grid-rows-[0fr] overflow-hidden bg-[#F8F9F8] transition-[grid-template-rows] duration-200",
{
"grid-rows-[1fr]": c === t.id
}
),
children: /* @__PURE__ */ e(
"div",
{
className: g(
"min-h-0 px-3 transition-[padding-top,padding-bottom] duration-200",
{
"h-auto pb-3": c === t.id
}
),
children: /* @__PURE__ */ l(i, { defaultValue: "Background", children: [
/* @__PURE__ */ l(i.List, { className: "h-8 w-full rounded-full", children: [
/* @__PURE__ */ e(
i.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[11px]",
value: "Background",
children: "Background"
/* BACKGROUND */
}
),
/* @__PURE__ */ e(
i.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[11px]",
value: "Content",
children: "Content"
/* CONTENT */
}
),
/* @__PURE__ */ e(
i.Trigger,
{
className: "flex-1 rounded-full p-[3px] text-[11px]",
value: "Style",
children: "Style"
/* STYLE */
}
)
] }),
/* @__PURE__ */ l(i.Content, { value: "Background", children: [
/* @__PURE__ */ e(
B,
{
fieldName: `slides.${o}.background`,
type: r.BLOCK,
mode: F.DEFAULT
}
),
/* @__PURE__ */ e(
H,
{
type: r.BLOCK,
fieldName: `slides.${o}.showBgOverlay.desktop`,
mediaField: `slides.${o}.backgroundImage`
}
),
/* @__PURE__ */ e(
V,
{
type: r.BLOCK,
fieldName: `slides.${o}.overlayColor`,
overlayField: `slides.${o}.showBgOverlay.desktop`
}
),
/* @__PURE__ */ e(
E,
{
type: r.BLOCK,
fieldName: `slides.${o}.blendMode.desktop`,
overlayField: `slides.${o}.showBgOverlay.desktop`
}
)
] }),
/* @__PURE__ */ l(i.Content, { value: "Content", children: [
/* @__PURE__ */ e(
u,
{
type: r.BLOCK,
fieldName: `slides.${o}.title`,
label: "Title",
direction: "col",
isLocalized: !0
}
),
/* @__PURE__ */ e(
k,
{
type: r.BLOCK,
fieldName: `slides.${o}.description`,
label: "Description",
isLocalized: !0
}
),
/* @__PURE__ */ e(
u,
{
type: r.BLOCK,
fieldName: `slides.${o}.button.text`,
label: "Button Text",
direction: "col",
isLocalized: !0
}
),
/* @__PURE__ */ e(
b,
{
type: r.BLOCK,
fieldName: `slides.${o}.button.link`
}
)
] }),
/* @__PURE__ */ l(i.Content, { value: "Style", children: [
/* @__PURE__ */ e(
D,
{
type: r.BLOCK,
fieldName: `slides.${o}.horizontalPosition.desktop`
}
),
/* @__PURE__ */ e(
G,
{
type: r.BLOCK,
fieldName: `slides.${o}.verticalPosition.desktop`
}
),
/* @__PURE__ */ e(
M,
{
type: r.BLOCK,
fieldName: `slides.${o}.textAlign.desktop`
}
),
/* @__PURE__ */ e(
N,
{
label: "Content Color",
type: r.BLOCK,
fieldName: `slides.${o}.contentColor.default`
}
)
] })
] })
}
)
}
)
] }, t.id);
}) }),
/* @__PURE__ */ e("div", { className: "mt-5 flex justify-center", children: /* @__PURE__ */ l(
L,
{
onClick: () => {
const t = m.cloneDeep(s) ?? [], o = C();
t.push({
id: o,
title: {
en: `Item #${t.length + 1}`
},
description: {
en: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
background: { color: { default: "#BBBBBB" } },
contentColor: { default: "#FFFFFF" },
button: {
text: {
en: "Click Here"
}
},
textAlign: { desktop: "center" }
}), d(t), p(o);
},
variant: "outline",
className: "flex",
children: [
/* @__PURE__ */ e(P, { size: 20, className: "me-1" }),
"Add New"
]
}
) })
] });
};
export {
ye as default
};
//# sourceMappingURL=slides.control.js.map