stone-kit
Version:
uikit for redesign
122 lines (121 loc) • 3.76 kB
JavaScript
import { jsx as l, jsxs as n } from "react/jsx-runtime";
import y, { useState as o } from "react";
import { s as i } from "../../../ButtonState.module-DtW3aevR.js";
import { BUTTON_VARIANTS as T } from "../../../components/Button/ui/Button.types.js";
import { NewIcon as d, iconTypes as V } from "../../../components/NewIcon/ui/NewIcon.js";
const _ = ({ children: h }) => {
const [p, u] = o("auto"), [m, g] = o("blue"), [t, b] = o(!1), [I, v] = o(!1), [s, f] = o(null), [c, S] = o(null), [z, C] = o(null), [L, P] = o(null), a = ["12", "16", "20", "24"], N = y.cloneElement(h, {
width: p,
variant: m,
isLoading: t,
pre: s ? /* @__PURE__ */ l(
d,
{
name: s,
size: z ?? "24"
}
) : null,
post: c ? /* @__PURE__ */ l(
d,
{
name: c,
size: L ?? "24"
}
) : null,
disabled: I
}), x = ["auto", "full"], j = Object.values(T), r = Object.keys(V);
return /* @__PURE__ */ n("div", { className: i.root, children: [
N,
/* @__PURE__ */ n("div", { className: i.optionsWrapper, children: [
/* @__PURE__ */ l("div", { children: /* @__PURE__ */ n("label", { children: [
"Width:",
/* @__PURE__ */ l("select", { onChange: (e) => u(e.target.value), children: x.map((e) => /* @__PURE__ */ l(
"option",
{
value: e,
children: e
},
e
)) })
] }) }),
/* @__PURE__ */ l("div", { children: /* @__PURE__ */ n("label", { children: [
"Variants:",
/* @__PURE__ */ l("select", { onChange: (e) => g(e.target.value), children: j.map((e) => /* @__PURE__ */ l(
"option",
{
value: e,
children: e
},
e
)) })
] }) }),
/* @__PURE__ */ l("div", { children: /* @__PURE__ */ n("label", { children: [
"Pre Icon:",
/* @__PURE__ */ l("select", { onChange: (e) => f(e.target.value), children: r.map((e) => /* @__PURE__ */ l(
"option",
{
value: e,
children: e
},
e
)) })
] }) }),
/* @__PURE__ */ l("div", { children: /* @__PURE__ */ n("label", { children: [
"Post Icon:",
/* @__PURE__ */ l("select", { onChange: (e) => S(e.target.value), children: r.map((e) => /* @__PURE__ */ l(
"option",
{
value: e,
children: e
},
e
)) })
] }) }),
/* @__PURE__ */ l("div", { children: /* @__PURE__ */ n("label", { children: [
"Pre Icon Size:",
/* @__PURE__ */ l("select", { onChange: (e) => C(e.target.value), children: a.map((e) => /* @__PURE__ */ l(
"option",
{
value: e,
children: e
},
e
)) })
] }) }),
/* @__PURE__ */ l("div", { children: /* @__PURE__ */ n("label", { children: [
"Post Icon Size:",
/* @__PURE__ */ l("select", { onChange: (e) => P(e.target.value), children: a.map((e) => /* @__PURE__ */ l(
"option",
{
value: e,
children: e
},
e
)) })
] }) }),
/* @__PURE__ */ n("label", { className: i.isLoading, children: [
"isLoading",
/* @__PURE__ */ l(
"input",
{
type: "checkbox",
onChange: () => b(!t)
}
)
] }),
/* @__PURE__ */ n("label", { className: i.isLoading, children: [
"isDisable",
/* @__PURE__ */ l(
"input",
{
type: "checkbox",
onChange: () => v(!t)
}
)
] })
] })
] });
};
export {
_ as ButtonState
};