@dndbuilder.com/react
Version:
Drag and drop builder for React
92 lines (91 loc) • 3.12 kB
JavaScript
"use client";
import { jsxs as i, jsx as t } from "react/jsx-runtime";
import { BreakpointSelector as d } from "../shared/breakpoint-selector.js";
import { ToggleGroupControl as f } from "./toggle-group.control.js";
import { InfoMessage as N } from "../shared/info-message.js";
import { Input as h } from "../shared/input.js";
import { Label as v } from "../shared/label.js";
import { useAppSelector as x } from "../../hooks/use-app-selector.js";
import { useSettings as n } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as C } from "../../../../../store/selectors.js";
import { classNames as m } from "../../../../../utils.js";
import { BiDotsVerticalRounded as w } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import { RxPinLeft as T, RxPinRight as B } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/rx/index.js";
const G = ({
type: s,
className: a,
fieldName: l,
customFieldName: c,
label: p
}) => {
const e = x(C), [o] = n(l, s), [r, g] = n(c, s);
return /* @__PURE__ */ i("div", { className: m("mt-4", a), children: [
/* @__PURE__ */ t(
f,
{
type: s,
fieldName: "flexOrder",
label: p,
responsive: !0,
controls: [
{
tooltipContent: "Start",
toggleTrigger: /* @__PURE__ */ t(T, { className: "text-sm" }),
value: "start"
},
{
tooltipContent: "End",
toggleTrigger: /* @__PURE__ */ t(B, { className: "text-sm" }),
value: "end"
},
{
tooltipContent: "Custom",
toggleTrigger: /* @__PURE__ */ t(w, { className: "text-sm" }),
value: "custom"
}
]
}
),
/* @__PURE__ */ t(
"div",
{
className: m(
"grid grid-rows-[0fr] overflow-hidden transition-[grid-template-rows] duration-200",
{
"grid-rows-[1fr]": (o == null ? void 0 : o[e]) === "custom"
}
),
children: /* @__PURE__ */ t(
"div",
{
className: m("min-h-0", {
"h-auto": (o == null ? void 0 : o[e]) === "custom"
}),
children: /* @__PURE__ */ i(v, { className: "mt-3 flex items-center", children: [
"Custom Order ",
/* @__PURE__ */ t(d, { className: "ms-1" }),
/* @__PURE__ */ t(
h,
{
value: (r == null ? void 0 : r[e]) ?? 0,
onChange: (u) => g({
...r,
[e]: Number(u.target.value)
}),
type: "number",
className: "ms-auto w-[60px]",
min: 0
}
)
] })
}
)
}
),
/* @__PURE__ */ t(N, { children: "This control will affect contained elements only." })
] });
};
export {
G as FlexOrderControl
};
//# sourceMappingURL=flex-order.control.js.map