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