@dndbuilder.com/react
Version:
Drag and drop builder for React
150 lines (149 loc) • 3.42 kB
JavaScript
import { jsx as m } from "react/jsx-runtime";
import { SelectControl as z } from "../../../components/controls/select.control.js";
import { useSettings as a } from "../../../hooks/use-settings.js";
import { getCurrentBreakpoint as X } from "../../../../../../store/selectors.js";
import { SettingsType as s } from "../../../types/index.js";
import { SizeType as o, Unit as e } from "../../../types/style.js";
import { useAppSelector as P } from "../../../hooks/use-app-selector.js";
const d = ({ fieldName: i, className: f, label: S = "Size" }) => {
const n = P(X), [, r] = a(
i ? `${i}.padding.${n}` : `padding.${n}`,
s.BLOCK
), [t, u] = a(
i ? `${i}.typography` : "typography",
s.BLOCK
), l = (c) => {
switch (c) {
case o.SM:
r({
top: 12,
right: 24,
bottom: 12,
left: 24,
unit: e.PX
}), u({
...t,
fontSize: {
...t == null ? void 0 : t.fontSize,
[n]: {
unit: e.PX,
value: 15
}
}
});
break;
case o.MD:
r({
top: 15,
right: 30,
bottom: 15,
left: 30,
unit: e.PX
}), u({
...t,
fontSize: {
...t == null ? void 0 : t.fontSize,
[n]: {
unit: e.PX,
value: 16
}
}
});
break;
case o.LG:
r({
top: 20,
right: 40,
bottom: 20,
left: 40,
unit: e.PX
}), u({
...t,
fontSize: {
...t == null ? void 0 : t.fontSize,
[n]: {
unit: e.PX,
value: 18
}
}
});
break;
case o.XL:
r({
top: 25,
right: 50,
bottom: 25,
left: 50,
unit: e.PX
}), u({
...t,
fontSize: {
...t == null ? void 0 : t.fontSize,
[n]: {
unit: e.PX,
value: 20
}
}
});
break;
case o.XXL:
r({
top: 30,
right: 55,
bottom: 30,
left: 55,
unit: e.PX
}), u({
...t,
fontSize: {
...t == null ? void 0 : t.fontSize,
[n]: {
unit: e.PX,
value: 21
}
}
});
break;
default:
r({
top: 10,
right: 20,
bottom: 10,
left: 20,
unit: e.PX
}), u({
...t,
fontSize: {
...t == null ? void 0 : t.fontSize,
[n]: {
unit: e.PX,
value: 13
}
}
});
break;
}
};
return /* @__PURE__ */ m(
z,
{
type: s.BLOCK,
options: [
// { content: "Default", value: SizeType.DEFAULT },
{ content: "Small", value: o.SM },
{ content: "Medium", value: o.MD },
{ content: "Large", value: o.LG },
{ content: "XL", value: o.XL }
],
responsive: !0,
fieldName: i ? `${i}.size` : "size",
label: S,
onValueChange: l,
className: f
}
);
};
export {
d as default
};
//# sourceMappingURL=button-size.control.js.map