@dndbuilder.com/react
Version:
Drag and drop builder for React
246 lines (245 loc) • 11 kB
JavaScript
import { BlockGroup as k, BlockType as n } from "../../types/block.js";
import { createBlockConfig as e } from "../../../../../utils.js";
import { IoIosArrowDropdown as i } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/io/index.js";
import { generatePseudoStyle as V, generateResponsiveStyle as D, generateTypography as t, generateSpacingValue as z, generateBoxShadow as g, generateUnitValue as W } from "../../utils/style.js";
import { lazy as j } from "react";
const co = e({
type: n.DROPDOWN,
label: "Dropdown",
group: k.BASIC,
icon: i,
component: j(() => import("./components/dropdown.block.js")),
previewComponent: j(() => import("./components/dropdown.preview.js")),
settings: {
button: {
text: {
show: {
desktop: !0,
tablet: !0,
mobile: !0
},
content: {
en: "Dropdown"
}
},
icon: {
show: {
desktop: !0,
tablet: !0,
mobile: !0
},
iconSet: "fe",
iconName: "arrow-down"
},
image: {
show: {
desktop: !0,
tablet: !0,
mobile: !0
}
}
}
},
style: ({ settings: o, breakpoints: v }) => {
var U, q, E, F, H, J, K, M, Q, X;
return {
"& .dropdown": {
"& .dropdown-button": {
...t(v, (U = o == null ? void 0 : o.button) == null ? void 0 : U.typography),
...D(v, (r) => {
var m, a, w, y, R, B, S, T, x, C, L, I;
const {
top: d,
right: u,
bottom: b,
left: c
} = z((a = (m = o == null ? void 0 : o.button) == null ? void 0 : m.margin) == null ? void 0 : a[r]), {
top: l,
right: h,
bottom: p,
left: f
} = z((y = (w = o == null ? void 0 : o.button) == null ? void 0 : w.padding) == null ? void 0 : y[r]);
return {
marginTop: d,
marginRight: u,
marginBottom: b,
marginLeft: c,
paddingTop: l,
paddingRight: h,
paddingBottom: p,
paddingLeft: f,
width: W((B = (R = o == null ? void 0 : o.button) == null ? void 0 : R.width) == null ? void 0 : B[r]),
height: W((T = (S = o == null ? void 0 : o.button) == null ? void 0 : S.height) == null ? void 0 : T[r]),
justifyContent: (C = (x = o == null ? void 0 : o.button) == null ? void 0 : x.align) == null ? void 0 : C[r],
gap: W((I = (L = o == null ? void 0 : o.button) == null ? void 0 : L.spacing) == null ? void 0 : I[r]),
...V((G) => {
var Y, Z, _, $;
const {
top: A,
right: N,
bottom: O,
left: P
} = z(
($ = (_ = (Z = (Y = o == null ? void 0 : o.button) == null ? void 0 : Y.border) == null ? void 0 : Z.width) == null ? void 0 : _[r]) == null ? void 0 : $[G]
);
return {
borderTopWidth: A,
borderRightWidth: N,
borderBottomWidth: O,
borderLeftWidth: P
};
})
};
}),
...V((r) => {
var h, p, f, m, a, w, y, R, B, S, T, x, C, L;
const {
top: d,
right: u,
bottom: b,
left: c
} = z((f = (p = (h = o == null ? void 0 : o.button) == null ? void 0 : h.border) == null ? void 0 : p.radius) == null ? void 0 : f[r]), l = (w = (a = (m = o.button) == null ? void 0 : m.border) == null ? void 0 : a.type) == null ? void 0 : w[r];
return {
color: (R = (y = o == null ? void 0 : o.button) == null ? void 0 : y.color) == null ? void 0 : R[r],
backgroundColor: (T = (S = (B = o == null ? void 0 : o.button) == null ? void 0 : B.background) == null ? void 0 : S.color) == null ? void 0 : T[r],
borderTopLeftRadius: d,
borderTopRightRadius: u,
borderBottomRightRadius: b,
borderBottomLeftRadius: c,
borderStyle: l || void 0,
borderColor: (L = (C = (x = o == null ? void 0 : o.button) == null ? void 0 : x.border) == null ? void 0 : C.color) == null ? void 0 : L[r]
};
}),
".dropdown-button-text": {
...D(v, (r) => {
var d, u, b, c, l, h;
return {
display: (b = (u = (d = o == null ? void 0 : o.button) == null ? void 0 : d.text) == null ? void 0 : u.show) != null && b[r] ? "inline-block" : "none",
order: (h = (l = (c = o == null ? void 0 : o.button) == null ? void 0 : c.text) == null ? void 0 : l.order) == null ? void 0 : h[r]
};
})
},
".dropdown-button-icon": {
color: (F = (E = (q = o == null ? void 0 : o.button) == null ? void 0 : q.icon) == null ? void 0 : E.color) == null ? void 0 : F.default,
...D(v, (r) => {
var d, u, b, c, l, h, p, f, m, a;
return {
display: (b = (u = (d = o == null ? void 0 : o.button) == null ? void 0 : d.icon) == null ? void 0 : u.show) != null && b[r] ? "inline-block" : "none",
order: (h = (l = (c = o == null ? void 0 : o.button) == null ? void 0 : c.icon) == null ? void 0 : l.order) == null ? void 0 : h[r],
fontSize: W((a = (m = (f = (p = o == null ? void 0 : o.button) == null ? void 0 : p.icon) == null ? void 0 : f.size) == null ? void 0 : m[r]) == null ? void 0 : a.default)
};
})
},
".dropdown-button-image": {
...D(v, (r) => {
var d, u, b, c, l, h, p, f, m, a, w, y, R, B, S;
return {
width: W((b = (u = (d = o == null ? void 0 : o.button) == null ? void 0 : d.image) == null ? void 0 : u.width) == null ? void 0 : b[r]),
maxWidth: W((h = (l = (c = o == null ? void 0 : o.button) == null ? void 0 : c.image) == null ? void 0 : l.maxWidth) == null ? void 0 : h[r]),
height: W((m = (f = (p = o == null ? void 0 : o.button) == null ? void 0 : p.image) == null ? void 0 : f.height) == null ? void 0 : m[r]),
display: (y = (w = (a = o == null ? void 0 : o.button) == null ? void 0 : a.image) == null ? void 0 : w.show) != null && y[r] ? "inline-block" : "none",
order: (S = (B = (R = o == null ? void 0 : o.button) == null ? void 0 : R.image) == null ? void 0 : B.order) == null ? void 0 : S[r]
};
})
}
},
"& .dropdown-button:hover .dropdown-button-icon": {
color: (K = (J = (H = o == null ? void 0 : o.button) == null ? void 0 : H.icon) == null ? void 0 : J.color) == null ? void 0 : K.hover,
...D(v, (r) => {
var d, u, b, c;
return {
fontSize: W((c = (b = (u = (d = o == null ? void 0 : o.button) == null ? void 0 : d.icon) == null ? void 0 : u.size) == null ? void 0 : b[r]) == null ? void 0 : c.hover)
};
})
},
"& .dropdown-button:focus .dropdown-button-icon": {
color: (X = (Q = (M = o == null ? void 0 : o.button) == null ? void 0 : M.icon) == null ? void 0 : Q.color) == null ? void 0 : X.focus,
...D(v, (r) => {
var d, u, b, c;
return {
fontSize: W((c = (b = (u = (d = o == null ? void 0 : o.button) == null ? void 0 : d.icon) == null ? void 0 : u.size) == null ? void 0 : b[r]) == null ? void 0 : c.hover)
};
})
},
"& .dropdown-content": {
...D(v, (r) => {
var m, a, w, y, R, B, S, T;
const {
top: d,
right: u,
bottom: b,
left: c
} = z((a = (m = o == null ? void 0 : o.content) == null ? void 0 : m.margin) == null ? void 0 : a[r]), {
top: l,
right: h,
bottom: p,
left: f
} = z((y = (w = o == null ? void 0 : o.content) == null ? void 0 : w.padding) == null ? void 0 : y[r]);
return {
marginTop: d,
marginRight: u,
marginBottom: b,
marginLeft: c,
paddingTop: l,
paddingRight: h,
paddingBottom: p,
paddingLeft: f,
width: W((B = (R = o == null ? void 0 : o.content) == null ? void 0 : R.width) == null ? void 0 : B[r]),
height: W((T = (S = o == null ? void 0 : o.content) == null ? void 0 : S.height) == null ? void 0 : T[r]),
...V((x) => {
var A, N, O, P;
const {
top: C,
right: L,
bottom: I,
left: G
} = z(
(P = (O = (N = (A = o == null ? void 0 : o.content) == null ? void 0 : A.border) == null ? void 0 : N.width) == null ? void 0 : O[r]) == null ? void 0 : P[x]
);
return {
borderTopWidth: C,
borderRightWidth: L,
borderBottomWidth: I,
borderLeftWidth: G
};
})
};
}),
...V((r) => {
var h, p, f, m, a, w, y, R, B, S, T, x, C, L;
const {
top: d,
right: u,
bottom: b,
left: c
} = z((f = (p = (h = o == null ? void 0 : o.content) == null ? void 0 : h.border) == null ? void 0 : p.radius) == null ? void 0 : f[r]), l = (w = (a = (m = o.content) == null ? void 0 : m.border) == null ? void 0 : a.type) == null ? void 0 : w[r];
return {
backgroundColor: (B = (R = (y = o == null ? void 0 : o.content) == null ? void 0 : y.background) == null ? void 0 : R.color) == null ? void 0 : B[r],
borderTopLeftRadius: d,
borderTopRightRadius: u,
borderBottomRightRadius: b,
borderBottomLeftRadius: c,
borderStyle: l || void 0,
borderColor: (x = (T = (S = o == null ? void 0 : o.content) == null ? void 0 : S.border) == null ? void 0 : T.color) == null ? void 0 : x[r],
boxShadow: g((L = (C = o == null ? void 0 : o.content) == null ? void 0 : C.boxShadow) == null ? void 0 : L[r])
};
})
}
}
};
},
controls: [
{
label: "Content",
component: j(() => import("./components/dropdown-content.control.js"))
},
{
label: "Style",
component: j(() => import("./components/dropdown-style.control.js"))
}
]
});
export {
co as default
};
//# sourceMappingURL=dropdown.config.js.map