@dndbuilder.com/react
Version:
Drag and drop builder for React
107 lines (106 loc) • 4.88 kB
JavaScript
import { BlockGroup as Se, BlockType as he } from "../../types/block.js";
import { Unit as b } from "../../types/style.js";
import { createBlockConfig as ce } from "../../../../../utils.js";
import { generateResponsiveStyle as ue, generateSpacingValue as s, generateUnitValue as r, generateFontSize as n, generateTextShadow as ge } from "../../utils/style.js";
import xe from "../../../../../_virtual/cjs.js";
import { lazy as a } from "react";
import { RxHeading as ze } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/rx/index.js";
const Fe = ce({
type: he.HEADING,
label: "Heading",
icon: ze,
component: a(() => import("./components/heading.block.js")),
group: Se.BASIC,
settings: {
title: {
en: "Heading"
},
htmlTag: "h2"
},
style: ({ settings: t, themeSettings: y, breakpoints: ee }) => {
var d, m, f, S, h, c, u;
const i = (m = (d = y.typography) == null ? void 0 : d.presets) == null ? void 0 : m.find(
(o) => {
var l;
return o.id === ((l = t.typography) == null ? void 0 : l.presetId);
}
), e = xe((i == null ? void 0 : i.value) ?? {}, t.typography ?? {}), te = {
h1: "3.5rem",
h2: "3rem",
h3: "2.5rem",
h4: "2rem",
h5: "1.5rem",
h6: "1rem"
}, oe = ue(ee, (o) => {
var g, x, z, v, p, w, H, C, B, T, F, R, $, A, D, I, M, G, L, P, U;
function l() {
var V, W, X, k, E, N, j, q, J, K, O, Q, Y, Z, _;
return (W = (V = e == null ? void 0 : e.fontSize) == null ? void 0 : V[o]) != null && W.value ? r((X = e == null ? void 0 : e.fontSize) == null ? void 0 : X[o]) : (k = t.size) != null && k[o] ? n((E = t.size) == null ? void 0 : E[o]).fontSize : (j = (N = e.fontSize) == null ? void 0 : N.tablet) != null && j.value ? r((q = e.fontSize) == null ? void 0 : q.tablet) : (J = t.size) != null && J.tablet ? n((K = t.size) == null ? void 0 : K.tablet).fontSize : (Q = (O = e.fontSize) == null ? void 0 : O.desktop) != null && Q.value ? r((Y = e.fontSize) == null ? void 0 : Y.desktop) : (Z = t.size) != null && Z.desktop ? n((_ = t.size) == null ? void 0 : _.desktop).fontSize : te[t.htmlTag];
}
const {
top: re,
right: le,
bottom: ne,
left: ie
} = s((g = t.padding) == null ? void 0 : g[o]), {
top: ae,
right: de,
bottom: me,
left: fe
} = s((x = t.margin) == null ? void 0 : x[o]);
return {
marginTop: ae,
marginRight: de,
marginBottom: me,
marginLeft: fe,
paddingTop: re,
paddingRight: le,
paddingBottom: ne,
paddingLeft: ie,
fontSize: l(),
lineHeight: (v = (z = e == null ? void 0 : e.lineHeight) == null ? void 0 : z[o]) != null && v.value ? r((p = e == null ? void 0 : e.lineHeight) == null ? void 0 : p[o]) : n((w = t.size) == null ? void 0 : w[o]).lineHeight,
letterSpacing: r((H = e == null ? void 0 : e.letterSpacing) == null ? void 0 : H[o]),
wordSpacing: r((C = e == null ? void 0 : e.wordSpacing) == null ? void 0 : C[o]),
fontWeight: (B = e == null ? void 0 : e.fontWeight) == null ? void 0 : B[o],
textTransform: (T = e == null ? void 0 : e.textTransform) == null ? void 0 : T[o],
fontStyle: (F = e == null ? void 0 : e.fontStyle) == null ? void 0 : F[o],
textDecoration: (R = e == null ? void 0 : e.textDecoration) == null ? void 0 : R[o],
//
textAlign: ($ = t.alignment) == null ? void 0 : $[o],
textStroke: `${r({ value: (I = (D = (A = t.textStroke) == null ? void 0 : A.width) == null ? void 0 : D[o]) == null ? void 0 : I.value, unit: b.PX })} ${((M = t.textStroke) == null ? void 0 : M.color) ?? ""}`,
"-webkit-text-stroke": `${r({
value: (P = (L = (G = t.textStroke) == null ? void 0 : G.width) == null ? void 0 : L[o]) == null ? void 0 : P.value,
unit: b.PX
})} ${((U = t.textStroke) == null ? void 0 : U.color) ?? ""}`
};
});
return {
// flex: 1,
"& .heading": {
fontFamily: (f = e == null ? void 0 : e.fontFamily) == null ? void 0 : f.desktop,
mixBlendMode: (S = t.blendMode) == null ? void 0 : S.desktop,
color: (h = t.textColor) == null ? void 0 : h.default,
backgroundColor: (c = t.backgroundColor) == null ? void 0 : c.default,
textShadow: t.textShadow && ge(t.textShadow),
"&:hover": {
color: (u = t.textColor) == null ? void 0 : u.hover
},
...oe
}
};
},
controls: [
{
label: "Content",
component: a(() => import("./components/heading-content.control.js"))
},
{
label: "Style",
component: a(() => import("./components/heading-style.control.js"))
}
]
});
export {
Fe as default
};
//# sourceMappingURL=heading.config.js.map