@adyen/adyen-platform-experience-web
Version:
69 lines (68 loc) • 3.45 kB
JavaScript
import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
/* empty css */
import d from "classnames";
import { Divider as t } from "../Divider/Divider.js";
import { useResponsiveContainer as h, containerQueries as b } from "../../../hooks/useResponsiveContainer.js";
import { useCallback as u } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import f from "../Button/Button.js";
import k from "../Typography/Typography.js";
import { TypographyVariant as g } from "../Typography/types.js";
import { Icon as w } from "../Icon/Icon.js";
const i = ({ rowNumber: s, className: o }) => /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav__skeleton", o), children: [...Array(s)].map((c, n) => /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__skeleton-item" }, n)) }), I = ({
renderHeader: s,
className: o,
items: c,
activeValue: n,
onValueChange: l,
loading: p,
onContentVisibilityChange: y,
renderContent: v,
contentVisible: m,
renderLoadingContent: _
}) => {
const a = h(b.down.xs), N = u(
(r) => {
l(r), a && y(!0);
},
[a, l, y]
);
return p ? a ? /* @__PURE__ */ e(i, { rowNumber: 3, className: "adyen-pe-secondary-nav__skeleton--content" }) : /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav"), children: /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__container", children: [
/* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__skeleton--aside", children: [
/* @__PURE__ */ e(i, { rowNumber: 1 }),
/* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__list", children: /* @__PURE__ */ e(i, { rowNumber: 2 }) })
] }),
/* @__PURE__ */ e(t, { variant: "vertical" }),
/* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__loading-content", children: _(n) })
] }) }) : /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav", o, { "adyen-pe-secondary-nav--mobile": a }), children: /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav__container", { "adyen-pe-secondary-nav__container-mobile": a }), children: [
(!m || !a) && /* @__PURE__ */ e("aside", { className: d("adyen-pe-secondary-nav--sidebar", { "adyen-pe-secondary-nav--sidebar-mobile": a }), children: [
s(),
/* @__PURE__ */ e("ul", { className: d("adyen-pe-secondary-nav__list", "adyen-pe-secondary-nav__menu-list"), children: c.map((r) => /* @__PURE__ */ e("li", { className: "adyen-pe-secondary-nav__list-item", children: /* @__PURE__ */ e(
f,
{
"aria-selected": r.value === n,
className: d("adyen-pe-secondary-nav__item", {
"adyen-pe-secondary-nav__item--active": r.value === n,
"adyen-pe-secondary-nav__item--mobile": a
}),
iconRight: a ? /* @__PURE__ */ e(w, { name: "chevron-right" }) : void 0,
onClick: N.bind(null, r),
children: /* @__PURE__ */ e(
k,
{
variant: g.BODY,
stronger: !0,
"data-testid": "typography",
className: "adyen-pe-secondary-nav__item-label",
children: r.label
}
)
}
) }, r.label)) })
] }),
!a && /* @__PURE__ */ e(t, { variant: "vertical" }),
m && n && v(n)
] }) });
};
export {
I as SecondaryNav
};