@dndbuilder.com/react
Version:
Drag and drop builder for React
197 lines (196 loc) • 7.26 kB
JavaScript
"use client";
import { jsxs as m, jsx as s } from "react/jsx-runtime";
import { Input as k } from "../shared/input.js";
import { Label as v } from "../shared/label.js";
import { Select as e } from "../shared/select.js";
import { Tooltip as y } from "../shared/tooltip.js";
import { useSettings as I } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as O } from "../../../../../store/selectors.js";
import { Unit as C } from "../../types/style.js";
import { useAppSelector as P } from "../../hooks/use-app-selector.js";
import { classNames as $ } from "../../../../../utils.js";
import { useState as U, useEffect as w } from "react";
import { MdLink as A, MdLinkOff as D } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
import { BreakpointSelector as G } from "../shared/breakpoint-selector.js";
import M from "../../hooks/use-debounce.js";
const R = [C.PX, C.PERCENTAGE], tt = ({
className: L,
units: i = R,
min: d,
max: g,
responsive: n,
mode: f,
fieldName: x,
type: S,
label: N,
...T
}) => {
const b = P(O), [o, B] = I(
n && f ? `${x}.${b}.${f}` : n ? `${x}.${b}` : f ? `${x}.${f}` : x,
S
), [t, c] = U(
o ?? {
top: void 0,
right: void 0,
bottom: void 0,
left: void 0,
unit: i[0] ?? C.PX,
linked: !1
}
), p = M(t, 400);
w(() => {
((o == null ? void 0 : o.top) !== (p == null ? void 0 : p.top) || (o == null ? void 0 : o.right) !== (p == null ? void 0 : p.right) || (o == null ? void 0 : o.bottom) !== (p == null ? void 0 : p.bottom) || (o == null ? void 0 : o.left) !== (p == null ? void 0 : p.left) || (o == null ? void 0 : o.unit) !== (p == null ? void 0 : p.unit) || (o == null ? void 0 : o.linked) !== (p == null ? void 0 : p.linked)) && B(p);
}, [p]), w(() => {
((o == null ? void 0 : o.top) !== (t == null ? void 0 : t.top) || (o == null ? void 0 : o.right) !== (t == null ? void 0 : t.right) || (o == null ? void 0 : o.bottom) !== (t == null ? void 0 : t.bottom) || (o == null ? void 0 : o.left) !== (t == null ? void 0 : t.left) || (o == null ? void 0 : o.unit) !== (t == null ? void 0 : t.unit) || (o == null ? void 0 : o.linked) !== (t == null ? void 0 : t.linked)) && c(o);
}, [o]);
const l = (r, j) => {
const h = r === "" ? void 0 : Number(r);
t != null && t.linked ? c({
...t,
top: h,
right: h,
bottom: h,
left: h,
unit: (t == null ? void 0 : t.unit) ?? i[0]
}) : c({
...t,
[j]: h,
unit: (t == null ? void 0 : t.unit) ?? i[0]
});
}, a = (r) => {
c(r ? {
...t,
top: t == null ? void 0 : t.top,
right: t == null ? void 0 : t.top,
bottom: t == null ? void 0 : t.top,
left: t == null ? void 0 : t.top,
linked: r,
unit: (t == null ? void 0 : t.unit) ?? i[0]
} : {
...t,
linked: r
});
}, E = (r) => {
c({ ...t, unit: r });
};
return /* @__PURE__ */ m("div", { className: $("mt-4", L), ...T, children: [
N && /* @__PURE__ */ m(v, { className: "mb-1.5 flex items-center gap-1", children: [
N,
" ",
n && /* @__PURE__ */ s(G, {})
] }),
/* @__PURE__ */ m("div", { className: "flex w-full gap-0.5", children: [
/* @__PURE__ */ m("div", { children: [
/* @__PURE__ */ s(
k,
{
min: d,
max: g,
onChange: (r) => l(r.target.value, "top"),
value: (t == null ? void 0 : t.top) ?? "",
type: "number"
}
),
/* @__PURE__ */ s("p", { className: "mt-0.5 text-center text-[10px] text-gray-400", children: "Top" })
] }),
/* @__PURE__ */ m("div", { children: [
/* @__PURE__ */ s(
k,
{
min: d,
max: g,
onChange: (r) => l(r.target.value, "right"),
value: (t == null ? void 0 : t.right) ?? "",
type: "number"
}
),
/* @__PURE__ */ s("p", { className: "mt-0.5 text-center text-[10px] text-gray-400", children: "Right" })
] }),
/* @__PURE__ */ m("div", { children: [
/* @__PURE__ */ s(
k,
{
min: d,
max: g,
onChange: (r) => l(r.target.value, "bottom"),
value: (t == null ? void 0 : t.bottom) ?? "",
type: "number"
}
),
/* @__PURE__ */ s("p", { className: "mt-0.5 text-center text-[10px] text-gray-400", children: "Bottom" })
] }),
/* @__PURE__ */ m("div", { children: [
/* @__PURE__ */ s(
k,
{
min: d,
max: g,
onChange: (r) => l(r.target.value, "left"),
value: (t == null ? void 0 : t.left) ?? "",
type: "number"
}
),
/* @__PURE__ */ s("p", { className: "mt-0.5 text-center text-[10px] text-gray-400", children: "Left" })
] }),
/* @__PURE__ */ m("div", { children: [
/* @__PURE__ */ s(
"div",
{
className: $("w-full rounded-sm border border-gray-300", {
"bg-gray-100": !(t != null && t.linked)
}),
children: /* @__PURE__ */ m(y, { children: [
/* @__PURE__ */ s(y.Trigger, { asChild: !0, children: t != null && t.linked ? /* @__PURE__ */ s(
"div",
{
onClick: () => a(!1),
className: "cursor-pointer rounded-sm px-3 py-[7px] hover:bg-gray-100",
children: /* @__PURE__ */ s(A, { className: "text-gray-600" })
}
) : /* @__PURE__ */ s(
"div",
{
onClick: () => a(!0),
className: "cursor-pointer rounded-sm px-3 py-[7px] hover:bg-gray-100",
children: /* @__PURE__ */ s(D, { className: "text-gray-600" })
}
) }),
/* @__PURE__ */ s(y.Content, { children: "Link values together" })
] })
}
),
/* @__PURE__ */ m(
e,
{
value: (t == null ? void 0 : t.unit) || i[0],
onValueChange: (r) => E(r),
children: [
/* @__PURE__ */ s(
e.Trigger,
{
className: "mx-auto h-auto w-auto border-none p-0 text-[10px] text-gray-400 hover:text-gray-600 hover:underline focus:underline",
chevronDown: !1,
children: /* @__PURE__ */ s(e.Value, { placeholder: "px" })
}
),
/* @__PURE__ */ s(e.Content, { alignOffset: -10, sideOffset: -20, className: "min-w-[38px] border-0", children: /* @__PURE__ */ s(e.Group, { children: i.map((r) => /* @__PURE__ */ s(
e.Item,
{
showCheck: !1,
value: r,
className: "flex items-center justify-center py-1.5 ps-2 text-xs",
children: r
},
r
)) }) })
]
}
)
] })
] })
] });
};
export {
tt as SpacingControl
};
//# sourceMappingURL=spacing.control.js.map