@codex-storage/marketplace-ui-components
Version:
Marketplace UI components for Codex decentralized storage network.
82 lines (81 loc) • 2.53 kB
JavaScript
import { jsxs as p, jsx as o, Fragment as v } from "react/jsx-runtime";
import { Button as m } from "../Button/Button.js";
import { Spinner as w } from "../Spinner/Spinner.js";
import { Step as u } from "./Step.js";
import { classnames as b } from "../utils/classnames.js";
import * as n from "react";
import '../../assets/Stepper.css';const E = (t) => /* @__PURE__ */ n.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 21, height: 20, fill: "none", ...t }, /* @__PURE__ */ n.createElement("path", { fill: "#969696", d: "m9.7 10 3.72 3.71-1.06 1.06L7.58 10l4.78-4.77 1.06 1.06z" })), k = (t) => /* @__PURE__ */ n.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 21, height: 20, fill: "none", ...t }, /* @__PURE__ */ n.createElement("path", { fill: "#000", d: "M11.3 10 7.58 6.29l1.06-1.06L13.42 10l-4.78 4.77-1.06-1.06z" }));
function L({
titles: t,
children: c,
state: e,
dispatch: i,
className: a = "",
backLabel: g = "Back",
nextLabel: h = "Next",
duration: f = 500,
onNextStep: d
}) {
const s = async (l) => {
if (l < 0)
return i({
type: "close"
});
i({
type: "loading",
step: l
}), setTimeout(() => {
d(l);
}, f);
};
return /* @__PURE__ */ p(
"div",
{
className: b(
["stepper " + a],
["stepper--progress", e.progress]
),
children: [
/* @__PURE__ */ o("header", { children: t.map((l, r) => /* @__PURE__ */ o(
u,
{
index: r + 1,
title: l,
step: r,
isActive: r === e.step,
isLast: r === t.length - 1,
isDone: r < e.step,
onClick: e.step > r ? () => s(r) : void 0
},
l
)) }),
/* @__PURE__ */ o("main", { children: e.progress ? /* @__PURE__ */ o(w, { width: "3rem" }) : /* @__PURE__ */ o(v, { children: c }) }),
/* @__PURE__ */ p("footer", { children: [
/* @__PURE__ */ o(
m,
{
label: g,
variant: "outline",
onClick: () => s(e.step - 1),
disabled: !e.isBackEnable,
Icon: E
}
),
/* @__PURE__ */ o(
m,
{
label: h,
onClick: () => s(e.step + 1),
disabled: !e.isNextEnable,
IconAfter: k
}
)
] })
]
}
);
}
export {
L as Stepper
};
//# sourceMappingURL=Stepper.js.map