@dndbuilder.com/react
Version:
Drag and drop builder for React
112 lines (111 loc) • 3.69 kB
JavaScript
"use client";
import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { BreakpointSelector as n } from "../shared/breakpoint-selector.js";
import { ToggleGroupControl as w } from "./toggle-group.control.js";
import { Input as a } from "../shared/input.js";
import { Label as c } from "../shared/label.js";
import { useAppSelector as C } from "../../hooks/use-app-selector.js";
import { useSettings as m } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as S } from "../../../../../store/selectors.js";
import { classNames as i } from "../../../../../utils.js";
import { BiBlock as k, BiDotsVerticalRounded as B } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import { CgArrowAlignH as $ } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/cg/index.js";
import { MdVerticalAlignCenter as b } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
const R = ({
className: g,
type: t,
fieldName: u,
growFieldName: p,
shrinkFieldName: f,
label: x = "Size"
}) => {
const o = C(S), [l] = m(`${u}.${o}`, t), [d, N] = m(
`${p}.${o}`,
t
), [h, v] = m(
`${f}.${o}`,
t
);
return /* @__PURE__ */ r("div", { className: i("mt-5 ", g), children: [
/* @__PURE__ */ e(
w,
{
type: t,
fieldName: "flexSize",
label: x,
responsive: !0,
controls: [
{
tooltipContent: "None",
toggleTrigger: /* @__PURE__ */ e(k, { className: "text-sm" }),
value: "none"
},
{
tooltipContent: "Grow",
toggleTrigger: /* @__PURE__ */ e($, { className: "text-sm" }),
value: "grow"
},
{
tooltipContent: "Shrink",
toggleTrigger: /* @__PURE__ */ e(b, { className: "rotate-90 text-sm" }),
value: "shrink"
},
{
tooltipContent: "Custom",
toggleTrigger: /* @__PURE__ */ e(B, { className: "text-sm" }),
value: "custom"
}
]
}
),
/* @__PURE__ */ e(
"div",
{
className: i(
"grid grid-rows-[0fr] overflow-hidden transition-[grid-template-rows] duration-200",
{
"grid-rows-[1fr]": l === "custom"
}
),
children: /* @__PURE__ */ r("div", { className: i("min-h-0", { "h-auto": l === "custom" }), children: [
/* @__PURE__ */ r(c, { className: "mt-3 flex items-center", children: [
"Flex Grow ",
/* @__PURE__ */ e(n, { className: "ms-1" }),
/* @__PURE__ */ e(
a,
{
value: d ?? 0,
onChange: (s) => {
N(Number(s.target.value));
},
type: "number",
className: "ms-auto w-[60px]",
min: 0
}
)
] }),
/* @__PURE__ */ r(c, { className: "mt-1 flex items-center", children: [
"Flex Shrink ",
/* @__PURE__ */ e(n, { className: "ms-1" }),
/* @__PURE__ */ e(
a,
{
value: h ?? 0,
onChange: (s) => {
v(Number(s.target.value));
},
type: "number",
className: "ms-auto w-[60px]",
min: 0
}
)
] })
] })
}
)
] });
};
export {
R as FlexSizeControl
};
//# sourceMappingURL=flex-size.control.js.map