@dndbuilder.com/react
Version:
Drag and drop builder for React
102 lines (101 loc) • 3.01 kB
JavaScript
"use client";
import { jsxs as i, jsx as t } from "react/jsx-runtime";
import { useAppSelector as g } from "../../hooks/use-app-selector.js";
import { CgPushLeft as l, CgPushRight as n } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/cg/index.js";
import { useSettings as p } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as f } from "../../../../../store/selectors.js";
import { Unit as o } from "../../types/style.js";
import { SelectControl as c } from "./select.control.js";
import { SliderUnitControl as s } from "./slider-unit.control.js";
import { ToggleGroupControl as a } from "./toggle-group.control.js";
const R = ({ type: e, fieldName: r = "position" }) => {
const m = g(f), [u] = p(
`${r}.value.${m}`,
e
);
return /* @__PURE__ */ i("div", { children: [
/* @__PURE__ */ t(
c,
{
type: e,
fieldName: `${r}.value`,
label: "Position",
responsive: !0,
options: [
{ content: "Relative", value: "relative" },
{ content: "Absolute", value: "absolute" },
{ content: "Fixed", value: "fixed" }
// { content: 'Sticky', value: 'sticky' },
]
}
),
u && /* @__PURE__ */ i("div", { children: [
/* @__PURE__ */ t(
a,
{
type: e,
fieldName: `${r}.horizontal`,
responsive: !0,
label: "Horizontal Position",
controls: [
{
tooltipContent: "Left",
toggleTrigger: /* @__PURE__ */ t(l, { className: "text-sm" }),
value: "left"
},
{
tooltipContent: "Right",
toggleTrigger: /* @__PURE__ */ t(n, { className: "text-sm" }),
value: "right"
}
]
}
),
/* @__PURE__ */ t(
s,
{
type: e,
fieldName: `${r}.horizontalOffset`,
label: "Offset",
responsive: !0,
units: [o.PX, o.REM, o.EM, o.PERCENTAGE]
}
),
/* @__PURE__ */ t(
a,
{
type: e,
fieldName: `${r}.vertical`,
responsive: !0,
label: "Vertical Position",
controls: [
{
tooltipContent: "Top",
toggleTrigger: /* @__PURE__ */ t(l, { className: "rotate-90 text-sm" }),
value: "top"
},
{
tooltipContent: "Bottom",
toggleTrigger: /* @__PURE__ */ t(n, { className: "rotate-90 text-sm" }),
value: "bottom"
}
]
}
),
/* @__PURE__ */ t(
s,
{
type: e,
fieldName: `${r}.verticalOffset`,
label: "Offset",
responsive: !0,
units: [o.PX, o.REM, o.EM, o.PERCENTAGE]
}
)
] })
] });
};
export {
R as PositionControl
};
//# sourceMappingURL=position-control.js.map