@dndbuilder.com/react
Version:
Drag and drop builder for React
141 lines (140 loc) • 4.29 kB
JavaScript
import { BlockGroup as X, BlockType as F } from "../../types/block.js";
import { Unit as c } from "../../types/style.js";
import { createBlockConfig as N } from "../../../../../utils.js";
import { generatePseudoStyle as v, generateResponsiveStyle as p, generateUnitValue as T, generateSpacingValue as f } from "../../utils/style.js";
import { lazy as m } from "react";
import { TbIcons as U } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/tb/index.js";
const H = N({
type: F.ICON,
label: "Icon",
icon: U,
component: m(() => import("./components/icon.block.js")),
group: X.BASIC,
settings: {
icon: {
iconSet: "fe",
iconName: "star"
},
size: {
desktop: {
unit: c.PX,
value: 50
}
},
view: { desktop: "default" },
shape: { desktop: "circle" },
color: {
default: "var(--accent-color)"
},
padding: {
desktop: {
top: 25,
right: 25,
bottom: 25,
left: 25,
unit: c.PX,
linked: !0
}
},
alignment: {
desktop: "center"
},
border: {
width: {
desktop: {
top: 2,
right: 2,
bottom: 2,
left: 2,
unit: c.PX,
linked: !0
}
}
}
},
style({ breakpoints: l, settings: o }) {
return {
"& .icon-wrapper": {
display: "flex",
...p(l, (t) => {
var d;
const r = (d = o.alignment) == null ? void 0 : d[t];
return {
justifyContent: r === "left" ? "flex-start" : r === "right" ? "flex-end" : r === "center" ? "center" : null
};
}),
"& .icon": {
...p(l, (t) => {
var u, g, h, b, s, k, y, R;
const {
top: r,
right: d,
bottom: i,
left: n
} = f((u = o.padding) == null ? void 0 : u[t]), {
top: a,
right: W,
bottom: w,
left: L
} = f((h = (g = o.border) == null ? void 0 : g.radius) == null ? void 0 : h[t]), {
top: I,
right: x,
bottom: z,
left: P
} = f((s = (b = o.border) == null ? void 0 : b.width) == null ? void 0 : s[t]), e = (k = o.view) == null ? void 0 : k.desktop;
return {
paddingTop: e !== "default" && r,
paddingRight: e !== "default" && d,
paddingBottom: e !== "default" && i,
paddingLeft: e !== "default" && n,
borderTopLeftRadius: a,
borderTopRightRadius: W,
borderBottomRightRadius: w,
borderBottomLeftRadius: L,
borderColor: e === "framed" && ((y = o.color) == null ? void 0 : y.default),
borderTopWidth: e === "framed" && I,
borderRightWidth: e === "framed" && x,
borderBottomWidth: e === "framed" && z,
borderLeftWidth: e === "framed" && P,
fontSize: T((R = o.size) == null ? void 0 : R[t]),
...v((S) => {
var B, C;
return {
backgroundColor: e === "stacked" ? (B = o.color) == null ? void 0 : B[S] : e === "framed" ? (C = o.secondaryColor) == null ? void 0 : C[S] : void 0
};
})
};
}),
"& > *": {
...p(l, (t) => {
var r;
return {
transform: `rotate(${T((r = o.rotate) == null ? void 0 : r[t])})`
};
}),
...v((t) => {
var i, n, a;
return {
color: ((i = o.view) == null ? void 0 : i.desktop) === "stacked" ? ((n = o.secondaryColor) == null ? void 0 : n[t]) ?? "#fff" : (a = o.color) == null ? void 0 : a[t]
};
})
}
}
}
};
},
controls: [
{
label: "Content",
component: m(() => import("./components/icon-content.control.js"))
},
{
label: "Style",
component: m(() => import("./components/icon-style.control.js"))
}
]
});
export {
H as default
};
//# sourceMappingURL=icon.config.js.map