@dndbuilder.com/react
Version:
Drag and drop builder for React
263 lines (262 loc) • 9.09 kB
JavaScript
"use client";
import { jsxs as C, jsx as o } from "react/jsx-runtime";
import { useSettings as N } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as R } from "../../../../../store/selectors.js";
import { DisplayType as l, FlexDirection as t, JustifyContent as a, AlignItem as s, FlexWrap as p, Unit as g } from "../../types/style.js";
import { useAppSelector as O } from "../../hooks/use-app-selector.js";
import { classNames as r } from "../../../../../utils.js";
import { BsArrowBarRight as v } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { HiOutlineArrowNarrowRight as L, HiOutlineArrowNarrowDown as f, HiOutlineArrowNarrowLeft as S, HiOutlineArrowNarrowUp as d } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/hi/index.js";
import { LuAlignVerticalSpaceAround as T, LuAlignCenter as c } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/lu/index.js";
import { MdAlignHorizontalLeft as x, MdOutlineAlignHorizontalCenter as A, MdAlignHorizontalRight as M, MdFormatAlignCenter as U, MdOutlineAlignVerticalTop as V, MdVerticalAlignCenter as _, MdOutlineAlignVerticalBottom as W } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
import { PiArrowUUpRightLight as w } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/pi/index.js";
import { FlexGapControl as I } from "./flex-gap.control.js";
import { SelectControl as D } from "./select.control.js";
import { ToggleGroupControl as m } from "./toggle-group.control.js";
const K = ({ type: n, fieldName: i = "display" }) => {
const E = O(R), { 0: u } = N(
`${i}.value.${E}`,
n
), { 0: e } = N(
`${i}.flexDirection.${E}`,
n
);
return /* @__PURE__ */ C("div", { children: [
/* @__PURE__ */ o(
D,
{
type: n,
fieldName: `${i}.value`,
label: "Display",
responsive: !0,
options: [
{ content: "Block", value: l.BLOCK },
{ content: "Inline", value: l.INLINE },
{ content: "Inline Block", value: l.INLINE_BLOCK },
{ content: "Flex", value: l.FLEX },
{ content: "Inline Flex", value: l.INLINE_FLEX },
{ content: "None", value: l.NONE }
]
}
),
u && [l.FLEX, l.INLINE_FLEX].includes(u) && /* @__PURE__ */ C("div", { children: [
/* @__PURE__ */ o(
m,
{
fieldName: `${i}.flexDirection`,
label: "Direction",
responsive: !0,
type: n,
controls: [
{
tooltipContent: "Row - horizontal",
toggleTrigger: /* @__PURE__ */ o(L, { className: "text-sm" }),
value: t.ROW
},
{
tooltipContent: "Column - vertical",
toggleTrigger: /* @__PURE__ */ o(f, { className: "text-sm" }),
value: t.COLUMN
},
{
tooltipContent: "Row Reverse",
toggleTrigger: /* @__PURE__ */ o(S, { className: "text-sm" }),
value: t.ROW_REVERSE
},
{
tooltipContent: "Column - Reversed",
toggleTrigger: /* @__PURE__ */ o(d, { className: "text-sm" }),
value: t.COLUMN_REVERSE
}
]
}
),
/* @__PURE__ */ o(
m,
{
type: n,
fieldName: `${i}.justifyContent`,
responsive: !0,
label: "Justify Content",
direction: "col",
controls: [
{
tooltipContent: "Start",
toggleTrigger: /* @__PURE__ */ o(
x,
{
className: r("text-sm transition-transform duration-200", {
"rotate-90": e === t.COLUMN,
"rotate-180": e === t.ROW_REVERSE,
"-rotate-90": e === t.COLUMN_REVERSE
})
}
),
value: a.START
},
{
tooltipContent: "Center",
toggleTrigger: /* @__PURE__ */ o(
A,
{
className: r("text-sm transition-transform duration-200", {
"rotate-90": e === t.COLUMN || e === t.COLUMN_REVERSE
})
}
),
value: a.CENTER
},
{
tooltipContent: "End",
toggleTrigger: /* @__PURE__ */ o(
M,
{
className: r("text-sm transition-transform duration-200", {
"rotate-90": e === t.COLUMN,
"rotate-180": e === t.ROW_REVERSE,
"-rotate-90": e === t.COLUMN_REVERSE
})
}
),
value: a.END
},
{
tooltipContent: "Space Between",
toggleTrigger: /* @__PURE__ */ o(
T,
{
className: r("text-sm transition-transform duration-200", {
"rotate-0": e === t.COLUMN,
"rotate-90": e === t.ROW || e === t.ROW_REVERSE
})
}
),
value: a.SPACE_BETWEEN
},
{
tooltipContent: "Space Around",
toggleTrigger: /* @__PURE__ */ o(
U,
{
className: r("text-sm transition-transform duration-200", {
"rotate-0": e === t.COLUMN,
"rotate-90": e === t.ROW || e === t.ROW_REVERSE
})
}
),
value: a.SPACE_AROUND
},
{
tooltipContent: "Space Evently",
toggleTrigger: /* @__PURE__ */ o(
c,
{
className: r("text-sm transition-transform duration-200", {
"rotate-0": e === t.COLUMN,
"rotate-90": e === t.ROW || e === t.ROW_REVERSE
})
}
),
value: a.SPACE_EVENTLY
}
]
}
),
/* @__PURE__ */ o(
m,
{
fieldName: `${i}.alignItems`,
label: "Align Items",
responsive: !0,
type: n,
controls: [
{
tooltipContent: "Start",
toggleTrigger: /* @__PURE__ */ o(
V,
{
className: r("text-sm transition-transform duration-200", {
"-rotate-90": e === t.COLUMN || e === t.COLUMN_REVERSE
})
}
),
value: s.START
},
{
tooltipContent: "Center",
toggleTrigger: /* @__PURE__ */ o(
_,
{
className: r("text-sm transition-transform duration-200", {
"-rotate-90": e === t.COLUMN || e === t.COLUMN_REVERSE
})
}
),
value: s.CENTER
},
{
tooltipContent: "End",
toggleTrigger: /* @__PURE__ */ o(
W,
{
className: r("text-sm transition-transform duration-200", {
"-rotate-90": e === t.COLUMN || e === t.COLUMN_REVERSE
})
}
),
value: s.END
},
{
tooltipContent: "Stretch",
toggleTrigger: /* @__PURE__ */ o(
c,
{
className: r("text-sm transition-transform duration-200", {
"-rotate-90": e === t.COLUMN || e === t.COLUMN_REVERSE
})
}
),
value: s.STRETCH
}
]
}
),
/* @__PURE__ */ o(
m,
{
fieldName: `${i}.flexWrap`,
label: "Wrap",
responsive: !0,
type: n,
controls: [
{
tooltipContent: "No Wrap",
toggleTrigger: /* @__PURE__ */ o(v, { className: "text-sm" }),
value: p.NOWRAP
},
{
tooltipContent: "Wrap",
toggleTrigger: /* @__PURE__ */ o(w, { className: "rotate-180 text-sm" }),
value: p.WRAP
}
]
}
),
/* @__PURE__ */ o(
I,
{
responsive: !0,
label: "Gaps",
fieldName: `${i}.gap`,
type: n,
min: 0,
units: [g.PX, g.EM, g.REM, g.VW]
}
)
] })
] });
};
export {
K as DisplayControl
};
//# sourceMappingURL=display-control.js.map