@adyen/adyen-platform-experience-web
Version:
101 lines (100 loc) • 2.92 kB
JavaScript
import { jsx as y } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { useState as D, useRef as O, useMemo as w, useEffect as z, useCallback as c } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import F from "classnames";
import { InteractionKeyCode as a } from "../../types.js";
import { Step as K } from "./Step.js";
/* empty css */
const j = ({ activeIndex: o, onChange: i, variant: S = "vertical", children: n, nextStepDisabled: T, ariaLabel: d }) => {
const [l, L] = D(o), k = O(null), p = O([]), [u, A] = D(o), E = w(() => (Array.isArray(n) ? n : [n]).filter(Boolean), [n]), R = E.length, s = S === "horizontal";
z(() => {
o > l && L(o);
const t = p.current[o], e = k.current;
if (t && e)
if (s) {
const f = t.offsetLeft - e.offsetLeft;
e.scrollTo({ left: f, behavior: "smooth" });
} else {
const f = t.offsetTop - e.offsetTop;
e.scrollTo({ top: f, behavior: "smooth" });
}
}, [o, l, s]);
const r = c(
(t) => T && t > l ? !1 : t <= l + 1,
[l, T]
), N = c(
(t) => {
r(t) && (A(t), i(t));
},
[r, i]
), m = c((t) => {
A(t);
const e = p.current[t];
e && e.focus();
}, []), h = c(() => {
const t = Math.min(u + 1, R - 1);
r(t) && m(t);
}, [r, m, u, R]), b = c(() => {
const t = Math.max(u - 1, 0);
m(t);
}, [m, u]), _ = c(() => {
const t = document.activeElement, e = p.current.indexOf(t);
e !== -1 && r(e) && i(e);
}, [r, i]), W = c(
(t) => {
switch (t.code) {
case a.ARROW_RIGHT:
s && (t.preventDefault(), h());
break;
case a.ARROW_LEFT:
s && (t.preventDefault(), b());
break;
case a.ARROW_DOWN:
s || (t.preventDefault(), h());
break;
case a.ARROW_UP:
s || (t.preventDefault(), b());
break;
case a.TAB:
A(o);
break;
case a.ENTER:
case a.SPACE:
t.preventDefault(), _();
break;
}
},
[s, o, _, h, b]
);
return /* @__PURE__ */ y("div", { className: "adyen-pe-stepper", children: /* @__PURE__ */ y(
"ol",
{
"aria-label": d,
ref: k,
role: "toolbar",
"aria-orientation": S,
className: F("adyen-pe-stepper__list", {
"adyen-pe-stepper__list--horizontal": s
}),
onKeyDown: W,
children: E.map((t, e) => /* @__PURE__ */ y(
K,
{
totalSteps: R,
index: e,
active: e === o,
completed: e < o,
disabled: !r(e),
onClick: () => N(e),
ref: (f) => {
f && (p.current[e] = f);
},
children: t.props?.children || t
},
e
))
}
) });
};
export {
j as Stepper
};