@dndbuilder.com/react
Version:
Drag and drop builder for React
143 lines (142 loc) • 4.94 kB
JavaScript
"use client";
import { jsxs as n, jsx as t } from "react/jsx-runtime";
import { BreakpointSelector as $ } from "../shared/breakpoint-selector.js";
import { Input as u } from "../shared/input.js";
import { Label as L } from "../shared/label.js";
import { Select as o } from "../shared/select.js";
import { Tooltip as d } from "../shared/tooltip.js";
import { useAppSelector as M } from "../../hooks/use-app-selector.js";
import { useSettings as S } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as T } from "../../../../../store/selectors.js";
import { Unit as y } from "../../types/style.js";
import { classNames as j } from "../../../../../utils.js";
import { MdLink as B, MdLinkOff as E } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
const G = [y.PX, y.PERCENTAGE], H = ({
className: C,
units: i = G,
responsive: m,
mode: s,
type: N,
fieldName: l,
min: a,
max: p,
label: h,
...k
}) => {
const x = M(T), [e, c] = S(
m && s ? `${l}.${x}.${s}` : m ? `${l}.${x}` : s ? `${l}.${s}` : l,
N
), g = (r, w) => {
e != null && e.linked ? c({
...e,
x: Number(r),
y: Number(r),
unit: (e == null ? void 0 : e.unit) ?? i[0]
}) : c({
...e,
[w]: Number(r),
unit: (e == null ? void 0 : e.unit) ?? i[0]
});
}, f = (r) => {
c(r ? {
...e,
x: e == null ? void 0 : e.x,
y: e == null ? void 0 : e.y,
linked: r,
unit: (e == null ? void 0 : e.unit) ?? i[0]
} : {
...e,
linked: r
});
}, b = (r) => {
c({ ...e, unit: r });
};
return /* @__PURE__ */ n("div", { className: j("mt-4", C), ...k, children: [
h && /* @__PURE__ */ n(L, { className: "mb-1.5 flex items-center gap-1", children: [
h,
" ",
m && /* @__PURE__ */ t($, {})
] }),
/* @__PURE__ */ n("div", { className: "flex w-full gap-0.5", children: [
/* @__PURE__ */ n("div", { children: [
/* @__PURE__ */ t(
u,
{
min: a,
max: p,
onChange: (r) => g(r.target.value, "y"),
value: (e == null ? void 0 : e.y) ?? "",
type: "number",
inputMode: "numeric"
}
),
/* @__PURE__ */ t("p", { className: "mt-0.5 text-center text-[10px] text-gray-400", children: "Row" })
] }),
/* @__PURE__ */ n("div", { children: [
/* @__PURE__ */ t(
u,
{
min: a,
max: p,
onChange: (r) => g(r.target.value, "x"),
value: (e == null ? void 0 : e.x) ?? "",
type: "number",
inputMode: "numeric"
}
),
/* @__PURE__ */ t("p", { className: "mt-0.5 text-center text-[10px] text-gray-400", children: "Column" })
] }),
/* @__PURE__ */ n("div", { children: [
/* @__PURE__ */ t("div", { className: "w-full rounded-sm border border-gray-300 ", children: /* @__PURE__ */ n(d, { children: [
/* @__PURE__ */ t(d.Trigger, { asChild: !0, children: e != null && e.linked ? /* @__PURE__ */ t(
"div",
{
onClick: () => f(!1),
className: "cursor-pointer rounded-sm px-3 py-[7px] hover:bg-gray-100",
children: /* @__PURE__ */ t(B, { className: "text-gray-600" })
}
) : /* @__PURE__ */ t(
"div",
{
onClick: () => f(!0),
className: "cursor-pointer rounded-sm px-3 py-[7px] hover:bg-gray-100",
children: /* @__PURE__ */ t(E, { className: "text-gray-600" })
}
) }),
/* @__PURE__ */ t(d.Content, { children: "Link values together" })
] }) }),
/* @__PURE__ */ n(
o,
{
value: (e == null ? void 0 : e.unit) || i[0],
onValueChange: (r) => b(r),
children: [
/* @__PURE__ */ t(
o.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__ */ t(o.Value, { placeholder: "px" })
}
),
/* @__PURE__ */ t(o.Content, { alignOffset: -10, sideOffset: -20, className: "min-w-[38px] border-0", children: /* @__PURE__ */ t(o.Group, { children: i.map((r) => /* @__PURE__ */ t(
o.Item,
{
showCheck: !1,
value: r,
className: "flex items-center justify-center px-0 py-1.5 text-xs",
children: r
},
r
)) }) })
]
}
)
] })
] })
] });
};
export {
H as FlexGapControl
};
//# sourceMappingURL=flex-gap.control.js.map