@dndbuilder.com/react
Version:
Drag and drop builder for React
167 lines (166 loc) • 7.31 kB
JavaScript
import { BlockGroup as xo, BlockType as Ao } from "../../types/block.js";
import { Unit as t, SizeType as T, BackgroundType as Go, TextAlignType as wo } from "../../types/style.js";
import { createBlockConfig as Ro } from "../../../../../utils.js";
import { generatePseudoStyle as Co, generateBgGradient as ho, generateTextShadow as Do, generateTypography as Io, generateResponsiveStyle as Bo, generateSpacingValue as Po, generateBorderWidth as Uo, generateBorderRadius as Lo } from "../../utils/style.js";
import { d as So } from "../../../../../_virtual/index5.js";
import No from "../../../../../_virtual/cjs.js";
import { lazy as E } from "react";
import { MdSmartButton as Fo } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
import { generatePresetStyle as zo } from "./utils/index.js";
const Ko = Ro({
type: Ao.BUTTON,
label: "Button",
icon: Fo,
component: E(() => import("./components/button.block.js")),
group: xo.BASIC,
settings: {
text: {
en: "Click Here"
},
size: {
desktop: T.DEFAULT,
tablet: T.DEFAULT,
mobile: T.DEFAULT
},
background: {
gradient: {
color1: {
default: "var(--accent-color)",
hover: "var(--accent-color)"
},
location1: {
default: {
unit: t.PERCENTAGE,
value: 0
},
hover: {
unit: t.PERCENTAGE,
value: 0
}
},
location2: {
default: {
unit: t.PERCENTAGE,
value: 100
},
hover: {
unit: t.PERCENTAGE,
value: 100
}
},
angle: {
default: {
unit: t.DEG,
value: 180
},
hover: {
unit: t.DEG,
value: 180
}
},
type: {
default: "linear",
hover: "linear"
},
position: {
default: "center center",
hover: "center center"
}
},
transitionDuration: 200
}
},
style: ({ settings: o, themeSettings: k, breakpoints: f }) => {
var B, S, x, A, G, w, R, C, D, I, P, U, L, N, F, z, j, H, J, M, O, V, W, Y, q, K, Q, X, Z, _, $, s, oo, eo, ro, ao, to;
const v = {
...Bo(f, (e) => {
var n, l, d, c, u, i, p, g;
const r = (n = o.alignment) == null ? void 0 : n[e], {
top: a,
right: y,
bottom: b,
left: m
} = Po((l = o.padding) == null ? void 0 : l[e]);
return {
paddingTop: a,
paddingRight: y,
paddingBottom: b,
paddingLeft: m,
...Lo((u = (c = (d = o.border) == null ? void 0 : d.radius) == null ? void 0 : c[e]) == null ? void 0 : u.default),
...Uo((g = (p = (i = o.border) == null ? void 0 : i.width) == null ? void 0 : p[e]) == null ? void 0 : g.default),
width: r === wo.JUSTIFY ? "100%" : null
};
}),
...Io(f, o.typography),
borderStyle: (x = (S = (B = o.border) == null ? void 0 : B.style) == null ? void 0 : S.desktop) != null && x.default ? (w = (G = (A = o.border) == null ? void 0 : A.style) == null ? void 0 : G.desktop) == null ? void 0 : w.default : void 0,
borderColor: (D = (C = (R = o.border) == null ? void 0 : R.color) == null ? void 0 : C.desktop) == null ? void 0 : D.default,
color: (I = o.textColor) == null ? void 0 : I.default,
display: "inline-block",
textShadow: Do((U = (P = o.textShadow) == null ? void 0 : P.desktop) == null ? void 0 : U.default),
backgroundImage: ho({
type: (N = (L = o.background) == null ? void 0 : L.type) == null ? void 0 : N.default,
color1: (j = (z = (F = o.background) == null ? void 0 : F.gradient) == null ? void 0 : z.color1) == null ? void 0 : j.default,
color2: (M = (J = (H = o.background) == null ? void 0 : H.gradient) == null ? void 0 : J.color2) == null ? void 0 : M.default,
location1: (W = (V = (O = o.background) == null ? void 0 : O.gradient) == null ? void 0 : V.location1) == null ? void 0 : W.default,
location2: (K = (q = (Y = o.background) == null ? void 0 : Y.gradient) == null ? void 0 : q.location2) == null ? void 0 : K.default,
angle: (Z = (X = (Q = o.background) == null ? void 0 : Q.gradient) == null ? void 0 : X.angle) == null ? void 0 : Z.default,
gradientType: (s = ($ = (_ = o.background) == null ? void 0 : _.gradient) == null ? void 0 : $.type) == null ? void 0 : s.default,
position: (ro = (eo = (oo = o.background) == null ? void 0 : oo.gradient) == null ? void 0 : eo.position) == null ? void 0 : ro.default
}),
...Co((e) => {
var r, a, y, b, m, n, l, d, c, u, i, p, g, no, lo, co, uo, io, po, go, fo, yo, bo, mo, ko, To, Eo, vo;
return {
color: (r = o.textColor) == null ? void 0 : r[e],
backgroundColor: ((y = (a = o.background) == null ? void 0 : a.type) == null ? void 0 : y[e]) === Go.CLASSIC ? (m = (b = o.background) == null ? void 0 : b.color) == null ? void 0 : m[e] : null,
backgroundImage: ho({
type: (l = (n = o.background) == null ? void 0 : n.type) == null ? void 0 : l[e],
color1: (u = (c = (d = o.background) == null ? void 0 : d.gradient) == null ? void 0 : c.color1) == null ? void 0 : u[e],
color2: (g = (p = (i = o.background) == null ? void 0 : i.gradient) == null ? void 0 : p.color2) == null ? void 0 : g[e],
location1: (co = (lo = (no = o.background) == null ? void 0 : no.gradient) == null ? void 0 : lo.location1) == null ? void 0 : co[e],
location2: (po = (io = (uo = o.background) == null ? void 0 : uo.gradient) == null ? void 0 : io.location2) == null ? void 0 : po[e],
angle: (yo = (fo = (go = o.background) == null ? void 0 : go.gradient) == null ? void 0 : fo.angle) == null ? void 0 : yo[e],
gradientType: (ko = (mo = (bo = o.background) == null ? void 0 : bo.gradient) == null ? void 0 : mo.type) == null ? void 0 : ko[e],
position: (vo = (Eo = (To = o.background) == null ? void 0 : To.gradient) == null ? void 0 : Eo.position) == null ? void 0 : vo[e]
})
};
})
}, h = (to = (ao = k == null ? void 0 : k.button) == null ? void 0 : ao.presets) == null ? void 0 : to.find(
(e) => e.id === o.presetId
);
if (h) {
const e = zo(h, f);
return {
"& .btn": No(So.clean(e), So.clean(v))
};
}
return {
display: "inline-block",
"& .button-wrapper": {
width: "100%",
display: "flex",
...Bo(f, (e) => {
var a;
const r = (a = o.alignment) == null ? void 0 : a[e];
return {
justifyContent: r === "left" ? "flex-start" : r === "right" ? "flex-end" : r === "center" ? "center" : null
};
}),
"& .btn": v
}
};
},
controls: [
{
label: "Content",
component: E(() => import("./components/button-content.control.js"))
},
{
label: "Style",
component: E(() => import("./components/button-style.control.js"))
}
]
});
export {
Ko as default
};
//# sourceMappingURL=button.config.js.map