@dndbuilder.com/react
Version:
Drag and drop builder for React
244 lines (243 loc) • 7.16 kB
JavaScript
"use client";
import { jsxs as i, jsx as n, Fragment as u } from "react/jsx-runtime";
import { useAppSelector as R } from "../../hooks/use-app-selector.js";
import { useSettings as s } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as $ } from "../../../../../store/selectors.js";
import { BackgroundType as l, Unit as r } from "../../types/style.js";
import { BsSquareHalf as T } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { PiPaintBrushFill as h } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/pi/index.js";
import { ColorControl as p } from "./color.control.js";
import { SelectControl as a } from "./select.control.js";
import { SliderUnitControl as c } from "./slider-unit.control.js";
import { ToggleGroupControl as f } from "./toggle-group.control.js";
const X = ({
mode: e,
type: o,
fieldName: t,
showImage: E = !0
}) => {
const C = R($), { 0: b } = s(
`${t}.position.${C}.${e}`,
o
), [g] = s(
e ? `${t}.type.${e}` : t,
o
), [m] = s(
e ? `${t}.image.${e}` : `${t}.image`,
o
), [v] = s(`${t}.gradient.type`, o);
return /* @__PURE__ */ i("div", { children: [
/* @__PURE__ */ n(
f,
{
fieldName: `${t}.type`,
label: "Background Type",
mode: e,
type: o,
controls: [
{
tooltipContent: l.CLASSIC,
toggleTrigger: /* @__PURE__ */ n(h, { className: "text-sm" }),
value: l.CLASSIC
},
{
tooltipContent: l.GRADIENT,
toggleTrigger: /* @__PURE__ */ n(T, { className: "text-sm" }),
value: l.GRADIENT
}
]
}
),
g === l.CLASSIC && /* @__PURE__ */ i(u, { children: [
/* @__PURE__ */ n(
p,
{
label: "Background Color",
type: o,
fieldName: `${t}.color`,
mode: e
}
),
m && /* @__PURE__ */ i(u, { children: [
/* @__PURE__ */ n(
a,
{
type: o,
fieldName: `${t}.position`,
responsive: !0,
label: "Position",
mode: e,
options: [
{ content: "Center Center", value: "center center" },
{ content: "Center Left", value: "center left" },
{ content: "Center Right", value: "center right" },
{ content: "Top Center", value: "top center" },
{ content: "Top Left", value: "top left" },
{ content: "Top Right", value: "top right" },
{ content: "Bottom Center", value: "bottom center" },
{ content: "Bottom Left", value: "bottom left" },
{ content: "Bottom Right", value: "bottom right" },
{ content: "Custom", value: "custom" }
]
}
),
b === "custom" && /* @__PURE__ */ i(u, { children: [
/* @__PURE__ */ n(
c,
{
type: o,
fieldName: `${t}.positionX`,
label: "Position X",
units: [r.PX, r.REM, r.EM, r.PERCENTAGE],
mode: e,
responsive: !0
}
),
/* @__PURE__ */ n(
c,
{
type: o,
fieldName: `${t}.positionY`,
label: "Position Y",
units: [r.PX, r.REM, r.EM, r.PERCENTAGE],
mode: e,
responsive: !0
}
)
] }),
/* @__PURE__ */ n(
a,
{
type: o,
fieldName: `${t}.attachment`,
label: "Attachment",
options: [
{ content: "Fixed", value: "fixed" },
{ content: "Scroll", value: "scroll" }
],
mode: e
}
),
/* @__PURE__ */ n(
a,
{
type: o,
fieldName: `${t}.repeat`,
label: "Repeat",
mode: e,
responsive: !0,
options: [
{ content: "No Repeat", value: "no-repeat" },
{ content: "Repeat", value: "repeat" },
{ content: "Repeat X", value: "repeat-x" },
{ content: "Repeat Y", value: "repeat-y" }
]
}
),
/* @__PURE__ */ n(
a,
{
responsive: !0,
mode: e,
type: o,
fieldName: `${t}.size`,
label: "Size",
options: [
{ content: "Auto", value: "auto" },
{ content: "Cover", value: "cover" },
{ content: "Contain", value: "contain" },
{ content: "Initial", value: "initial" }
]
}
)
] })
] }),
g === l.GRADIENT && /* @__PURE__ */ i(u, { children: [
/* @__PURE__ */ n(
p,
{
label: "Color 1",
type: o,
fieldName: `${t}.gradient.color1`,
mode: e
}
),
/* @__PURE__ */ n(
c,
{
type: o,
fieldName: `${t}.gradient.location1`,
label: "Location 1",
units: [r.PERCENTAGE],
mode: e
}
),
/* @__PURE__ */ n(
p,
{
label: "Color 2",
type: o,
fieldName: `${t}.gradient.color2`,
mode: e
}
),
/* @__PURE__ */ n(
c,
{
type: o,
fieldName: `${t}.gradient.location2`,
label: "Location 2",
units: [r.PERCENTAGE],
mode: e
}
),
/* @__PURE__ */ n(
a,
{
options: [
{ content: "Linear", value: "linear" },
{ content: "Radial", value: "radial" }
],
type: o,
fieldName: `${t}.gradient.type`,
label: "Type",
mode: e
}
),
v === "linear" && /* @__PURE__ */ n(
c,
{
type: o,
fieldName: `${t}.gradient.angle`,
label: "Angle",
mode: e,
units: [r.DEG, r.GRAD, r.RAD, r.TURN]
}
),
v === "radial" && /* @__PURE__ */ n(
a,
{
mode: e,
type: o,
fieldName: `${t}.gradient.position`,
label: "Position",
options: [
{ content: "Center Center", value: "center center" },
{ content: "Center Left", value: "center left" },
{ content: "Center Right", value: "center right" },
{ content: "Top Center", value: "top center" },
{ content: "Top Left", value: "top left" },
{ content: "Top Right", value: "top right" },
{ content: "Bottom Center", value: "bottom center" },
{ content: "Bottom Left", value: "bottom left" },
{ content: "Bottom Right", value: "bottom right" }
]
}
)
] })
] });
};
export {
X as BackgroundControl
};
//# sourceMappingURL=background.control.js.map