@dndbuilder.com/react
Version:
Drag and drop builder for React
192 lines (191 loc) • 6.9 kB
JavaScript
import { BlockGroup as E, BlockType as M } from "../../types/block.js";
import { createBlockConfig as P } from "../../../../../utils.js";
import { generateResponsiveStyle as j, generateTypography as U, generatePseudoStyle as S, generateSpacingValue as l, generateUnitValue as R } from "../../utils/style.js";
import { lazy as G } from "react";
import { FiImage as q } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
const X = P({
type: M.IMAGE,
label: "Image",
icon: q,
group: E.BASIC,
component: G(() => import("./components/image.block.js")),
settings: {},
style: ({ settings: r, breakpoints: L }) => {
var H, V, z;
return {
"& .block-img": {
display: "flex",
flexDirection: "column",
...j(L, (o) => {
var t, e, d, i, h, n, y, B, W;
const {
top: c,
right: f,
bottom: b,
left: u
} = l((e = (t = r.wrapper) == null ? void 0 : t.padding) == null ? void 0 : e[o]), {
top: m,
right: a,
bottom: p,
left: g
} = l((i = (d = r.wrapper) == null ? void 0 : d.margin) == null ? void 0 : i[o]);
return {
width: R((n = (h = r.wrapper) == null ? void 0 : h.width) == null ? void 0 : n[o]),
height: R((B = (y = r.wrapper) == null ? void 0 : y.height) == null ? void 0 : B[o]),
alignItems: ((W = r.alignment) == null ? void 0 : W[o]) ?? "center",
paddingTop: c,
paddingRight: f,
paddingBottom: b,
paddingLeft: u,
marginTop: m,
marginRight: a,
marginBottom: p,
marginLeft: g,
...S((I) => {
var T, w, C, D;
const {
top: A,
right: v,
bottom: F,
left: x
} = l(
(D = (C = (w = (T = r.wrapper) == null ? void 0 : T.border) == null ? void 0 : w.width) == null ? void 0 : C[o]) == null ? void 0 : D[I]
);
return {
borderTopWidth: A,
borderRightWidth: v,
borderBottomWidth: F,
borderLeftWidth: x
};
})
};
}),
...S((o) => {
var a, p, g, t, e, d, i, h, n;
const {
top: c,
right: f,
bottom: b,
left: u
} = l((g = (p = (a = r.wrapper) == null ? void 0 : a.border) == null ? void 0 : p.radius) == null ? void 0 : g[o]), m = (d = (e = (t = r.wrapper) == null ? void 0 : t.border) == null ? void 0 : e.type) == null ? void 0 : d[o];
return {
borderTopLeftRadius: c,
borderTopRightRadius: f,
borderBottomRightRadius: b,
borderBottomLeftRadius: u,
borderStyle: m || void 0,
borderColor: (n = (h = (i = r.wrapper) == null ? void 0 : i.border) == null ? void 0 : h.color) == null ? void 0 : n[o]
};
}),
"& img": {
...S((o) => {
var a, p, g, t, e, d, i;
const {
top: c,
right: f,
bottom: b,
left: u
} = l((p = (a = r.border) == null ? void 0 : a.radius) == null ? void 0 : p[o]), m = (t = (g = r.border) == null ? void 0 : g.type) == null ? void 0 : t[o];
return {
opacity: (e = r.opacity) == null ? void 0 : e[o],
borderTopLeftRadius: c,
borderTopRightRadius: f,
borderBottomRightRadius: b,
borderBottomLeftRadius: u,
borderStyle: m || void 0,
borderColor: (i = (d = r.border) == null ? void 0 : d.color) == null ? void 0 : i[o]
};
}),
...j(L, (o) => {
var t, e, d, i, h, n, y, B;
const {
top: c,
right: f,
bottom: b,
left: u
} = l((t = r.padding) == null ? void 0 : t[o]), {
top: m,
right: a,
bottom: p,
left: g
} = l((e = r.margin) == null ? void 0 : e[o]);
return {
width: R((d = r.width) == null ? void 0 : d[o]),
maxWidth: R((i = r.maxWidth) == null ? void 0 : i[o]),
height: R((h = r.height) == null ? void 0 : h[o]),
maxHeight: R((n = r.maxHeight) == null ? void 0 : n[o]),
textAlign: (y = r.alignment) == null ? void 0 : y[o],
objectFit: (B = r.objectFit) == null ? void 0 : B[o],
paddingTop: c,
paddingRight: f,
paddingBottom: b,
paddingLeft: u,
marginTop: m,
marginRight: a,
marginBottom: p,
marginLeft: g,
...S((W) => {
var x, T, w;
const {
top: I,
right: A,
bottom: v,
left: F
} = l((w = (T = (x = r.border) == null ? void 0 : x.width) == null ? void 0 : T[o]) == null ? void 0 : w[W]);
return {
borderTopWidth: I,
borderRightWidth: A,
borderBottomWidth: v,
borderLeftWidth: F
};
})
};
})
},
"& .block-img-caption": {
color: (V = (H = r.caption) == null ? void 0 : H.color) == null ? void 0 : V.default,
...U(L, (z = r.caption) == null ? void 0 : z.typography),
...j(L, (o) => {
var t, e, d, i, h, n;
const {
top: c,
right: f,
bottom: b,
left: u
} = l((e = (t = r.caption) == null ? void 0 : t.padding) == null ? void 0 : e[o]), {
top: m,
right: a,
bottom: p,
left: g
} = l((i = (d = r.caption) == null ? void 0 : d.margin) == null ? void 0 : i[o]);
return {
textAlign: (n = (h = r.caption) == null ? void 0 : h.alignment) == null ? void 0 : n[o],
paddingTop: c,
paddingRight: f,
paddingBottom: b,
paddingLeft: u,
marginTop: m,
marginRight: a,
marginBottom: p,
marginLeft: g
};
})
}
}
};
},
controls: [
{
label: "Content",
component: G(() => import("./components/image-content.control.js"))
},
{
label: "Style",
component: G(() => import("./components/image-style.control.js"))
}
]
});
export {
X as default
};
//# sourceMappingURL=image.config.js.map