@payfit/unity-components
Version:
79 lines (78 loc) • 2.19 kB
JavaScript
import { PaginationJumpDialog as e } from "../client-side-pagination/parts/PaginationJumpDialog.js";
import { PaginationContext as t } from "./PaginationContext.js";
import { forwardRef as n, useCallback as r, useRef as i } from "react";
import { uyTv as a } from "@payfit/unity-themes";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
import { useIntl as c } from "react-intl";
import { useId as l } from "react-aria/useId";
import { useOverlayTriggerState as u } from "react-stately/useOverlayTriggerState";
//#region src/components/pagination/Pagination.tsx
var d = a({ slots: { base: "uy:flex uy:gap-100 uy:relative" } }), f = n(({ children: n, pageCount: a, currentPage: f, onPageChange: p, ...m }, h) => {
let g = l(), _ = c(), v = u({}), y = i(/* @__PURE__ */ new Map()), b = { paginationLabel: _.formatMessage({
id: "unity:component:pagination:label",
defaultMessage: "Pagination"
}) }, x = { paginationListId: `uy:pagination-${g}__list` }, S = r((e) => {
p(e, f, Math.sign(e - f)), v.close(), requestAnimationFrame(() => {
let t = y.current.get(e);
t && t.focus();
});
}, [
p,
v,
y,
f
]), C = r((e) => {
e.preventDefault();
let t = f;
switch (e.key) {
case "ArrowLeft":
case "ArrowDown":
t = Math.max(1, f - 1);
break;
case "ArrowRight":
case "ArrowUp":
t = a === -1 ? f + 1 : Math.min(f + 1, a);
break;
case "Home":
t = 1;
break;
case "End":
a !== -1 && (t = a);
break;
}
t !== f && (p(t, f, Math.sign(t - f)), setTimeout(() => {
let e = y.current.get(t);
e && e.focus();
}, 0));
}, [
a,
f,
p
]), { base: w } = d();
return /* @__PURE__ */ o(t.Provider, {
value: {
pageCount: a,
currentPage: f,
onPageChange: p,
a11yIds: x,
pageRefs: y,
onKeyDown: C
},
children: /* @__PURE__ */ s("nav", {
"data-dd-privacy": "allow",
...m,
ref: h,
className: w(),
"aria-label": b.paginationLabel,
"aria-describedby": x.paginationListId,
children: [/* @__PURE__ */ o(e, {
pageCount: a,
onJumpToPage: S,
state: v
}), n]
})
});
});
f.displayName = "Pagination";
//#endregion
export { f as Pagination, d as pagination };