@dndbuilder.com/react
Version:
Drag and drop builder for React
245 lines (244 loc) • 9.53 kB
JavaScript
import { BlockGroup as U, BlockType as _ } from "../../types/block.js";
import { createBlockConfig as q } from "../../../../../utils.js";
import { generatePseudoStyle as F, generateTypography as N, generateResponsiveStyle as A, generateSpacingValue as W, generateUnitValue as O } from "../../utils/style.js";
import { lazy as V } from "react";
import H from "./components/progress-bar-icon.js";
const Y = q({
type: _.PROGRESS_BAR,
label: "Progress Bar",
icon: H,
component: V(() => import("./components/progress-bar.block.js")),
group: U.ADVANCED,
settings: {
title: {
content: {
en: "Progress Bar"
},
show: {
desktop: !0
}
},
percentage: {
show: {
desktop: !0
},
value: 50
}
},
style: ({ settings: r, breakpoints: w }) => {
var D, E;
return {
".progress-bar-wrapper": {
".progress-bar-title": {
...A(w, (o) => {
var c, h, b, f, B, e;
const {
top: a,
right: p,
bottom: l,
left: m
} = W((h = (c = r == null ? void 0 : r.title) == null ? void 0 : c.margin) == null ? void 0 : h[o]), {
top: d,
right: u,
bottom: R,
left: y
} = W((f = (b = r == null ? void 0 : r.title) == null ? void 0 : b.padding) == null ? void 0 : f[o]);
return {
display: (e = (B = r == null ? void 0 : r.title) == null ? void 0 : B.show) != null && e[o] ? "inline-block" : "none",
marginTop: a,
marginRight: p,
marginBottom: l,
marginLeft: m,
paddingTop: d,
paddingRight: u,
paddingBottom: R,
paddingLeft: y
};
}),
...N(w, (D = r == null ? void 0 : r.title) == null ? void 0 : D.typography),
...F((o) => {
var a, p, l, m, d;
return {
color: (p = (a = r == null ? void 0 : r.title) == null ? void 0 : a.color) == null ? void 0 : p[o],
backgroundColor: (d = (m = (l = r == null ? void 0 : r.title) == null ? void 0 : l.background) == null ? void 0 : m.color) == null ? void 0 : d[o]
};
})
},
".progress-bar": {
...A(w, (o) => {
var c, h, b, f, B, e, T, L;
const {
top: a,
right: p,
bottom: l,
left: m
} = W((h = (c = r == null ? void 0 : r.progressBar) == null ? void 0 : c.margin) == null ? void 0 : h[o]), {
top: d,
right: u,
bottom: R,
left: y
} = W((f = (b = r == null ? void 0 : r.progressBar) == null ? void 0 : b.padding) == null ? void 0 : f[o]);
return {
marginTop: a,
marginRight: p,
marginBottom: l,
marginLeft: m,
paddingTop: d,
paddingRight: u,
paddingBottom: R,
paddingLeft: y,
height: O((e = (B = r == null ? void 0 : r.progressBar) == null ? void 0 : B.height) == null ? void 0 : e[o]),
maxWidth: O((L = (T = r == null ? void 0 : r.progressBar) == null ? void 0 : T.maxWidth) == null ? void 0 : L[o]),
...F((S) => {
var G, j, z, I;
const {
top: C,
right: P,
bottom: v,
left: x
} = W(
(I = (z = (j = (G = r == null ? void 0 : r.progressBar) == null ? void 0 : G.border) == null ? void 0 : j.width) == null ? void 0 : z[o]) == null ? void 0 : I[S]
);
return {
borderTopWidth: C,
borderRightWidth: P,
borderBottomWidth: v,
borderLeftWidth: x
};
})
};
}),
...F((o) => {
var u, R, y, c, h, b, f, B, e, T, L, S;
const {
top: a,
right: p,
bottom: l,
left: m
} = W((y = (R = (u = r == null ? void 0 : r.progressBar) == null ? void 0 : u.border) == null ? void 0 : R.radius) == null ? void 0 : y[o]), d = (b = (h = (c = r.progressBar) == null ? void 0 : c.border) == null ? void 0 : h.type) == null ? void 0 : b[o];
return {
backgroundColor: (e = (B = (f = r == null ? void 0 : r.progressBar) == null ? void 0 : f.background) == null ? void 0 : B.color) == null ? void 0 : e[o],
borderTopLeftRadius: a,
borderTopRightRadius: p,
borderBottomRightRadius: l,
borderBottomLeftRadius: m,
borderStyle: d || void 0,
borderColor: (S = (L = (T = r == null ? void 0 : r.progressBar) == null ? void 0 : T.border) == null ? void 0 : L.color) == null ? void 0 : S[o]
};
})
},
".progress-bar-fill": {
...A(w, (o) => {
var c, h, b, f;
const {
top: a,
right: p,
bottom: l,
left: m
} = W((h = (c = r == null ? void 0 : r.progressFill) == null ? void 0 : c.margin) == null ? void 0 : h[o]), {
top: d,
right: u,
bottom: R,
left: y
} = W((f = (b = r == null ? void 0 : r.progressFill) == null ? void 0 : b.padding) == null ? void 0 : f[o]);
return {
marginTop: a,
marginRight: p,
marginBottom: l,
marginLeft: m,
paddingTop: d,
paddingRight: u,
paddingBottom: R,
paddingLeft: y,
...F((B) => {
var C, P, v, x;
const {
top: e,
right: T,
bottom: L,
left: S
} = W(
(x = (v = (P = (C = r == null ? void 0 : r.progressFill) == null ? void 0 : C.border) == null ? void 0 : P.width) == null ? void 0 : v[o]) == null ? void 0 : x[B]
);
return {
borderTopWidth: e,
borderRightWidth: T,
borderBottomWidth: L,
borderLeftWidth: S
};
})
};
}),
...F((o) => {
var u, R, y, c, h, b, f, B, e, T, L, S;
const {
top: a,
right: p,
bottom: l,
left: m
} = W((y = (R = (u = r == null ? void 0 : r.progressFill) == null ? void 0 : u.border) == null ? void 0 : R.radius) == null ? void 0 : y[o]), d = (b = (h = (c = r.progressFill) == null ? void 0 : c.border) == null ? void 0 : h.type) == null ? void 0 : b[o];
return {
backgroundColor: (e = (B = (f = r == null ? void 0 : r.progressFill) == null ? void 0 : f.background) == null ? void 0 : B.color) == null ? void 0 : e[o],
borderTopLeftRadius: a,
borderTopRightRadius: p,
borderBottomRightRadius: l,
borderBottomLeftRadius: m,
borderStyle: d || void 0,
borderColor: (S = (L = (T = r == null ? void 0 : r.progressFill) == null ? void 0 : T.border) == null ? void 0 : L.color) == null ? void 0 : S[o]
};
})
},
".progress-bar-percentage": {
...A(w, (o) => {
var c, h, b, f, B, e, T, L;
const {
top: a,
right: p,
bottom: l,
left: m
} = W((h = (c = r == null ? void 0 : r.percentage) == null ? void 0 : c.margin) == null ? void 0 : h[o]), {
top: d,
right: u,
bottom: R,
left: y
} = W((f = (b = r == null ? void 0 : r.percentage) == null ? void 0 : b.padding) == null ? void 0 : f[o]);
return {
marginTop: a,
marginRight: p,
marginBottom: l,
marginLeft: m,
paddingTop: d,
paddingRight: u,
paddingBottom: R,
paddingLeft: y,
display: (e = (B = r == null ? void 0 : r.percentage) == null ? void 0 : B.show) != null && e[o] ? "flex" : "none",
justifyContent: ((L = (T = r == null ? void 0 : r.percentage) == null ? void 0 : T.alignment) == null ? void 0 : L[o]) || "center"
};
}),
...N(w, (E = r == null ? void 0 : r.percentage) == null ? void 0 : E.typography),
...F((o) => {
var a, p, l, m, d;
return {
color: (p = (a = r == null ? void 0 : r.percentage) == null ? void 0 : a.color) == null ? void 0 : p[o],
backgroundColor: (d = (m = (l = r == null ? void 0 : r.percentage) == null ? void 0 : l.background) == null ? void 0 : m.color) == null ? void 0 : d[o]
};
})
}
}
};
},
controls: [
{
label: "Content",
component: V(() => import("./components/progress-bar-content.control.js"))
},
{
label: "Style",
component: V(() => import("./components/progress-bar-style.control.js"))
}
]
});
export {
Y as default
};
//# sourceMappingURL=progress-bar.config.js.map