@payfit/unity-components
Version:
131 lines (130 loc) • 4.08 kB
JavaScript
import { usePagination as e } from "./hooks/use-pagination.js";
import { PaginationEllipsis as t } from "./parts/PaginationEllipsis.js";
import { PaginationJumpDialog as n } from "./parts/PaginationJumpDialog.js";
import { PaginationNavButton as r } from "./parts/PaginationNavButton.js";
import { RawPaginationLink as i } from "./parts/RawPaginationLink.js";
import { generatePaginationWithWindow as a } from "./utils/pagination-window.js";
import { forwardRef as o, useMemo as s, useRef as c } from "react";
import { uyTv as l } from "@payfit/unity-themes";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
import { useIntl as f } from "react-intl";
import { useId as p } from "react-aria/useId";
import { useOverlayTriggerState as m } from "react-stately/useOverlayTriggerState";
//#region src/components/client-side-pagination/ClientSidePagination.tsx
var h = l({ slots: {
base: "uy:flex uy:gap-100 uy:relative",
pagesList: "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0"
} }), g = 7, _ = o(({ pageCount: o, defaultPage: l, currentPage: _, onPageHover: v, onPageChange: y, onNextPress: b, onPreviousPress: x, LinkComponent: S = i, ...C }, w) => {
let T = p(), E = f(), D = _ !== void 0 && y !== void 0 && l === void 0, { currentPage: O, goToPage: k } = e({
pageCount: o,
initialPage: D ? _ : l,
onPageChange: y,
isControlled: D
}), A = m({}), j = c(/* @__PURE__ */ new Map()), M = s(() => a(o, O, g), [o, O]), N = new Intl.NumberFormat(E.locale, { notation: "standard" }), P = (e) => {
k(e), A.close(), requestAnimationFrame(() => {
let t = j.current.get(e);
t && t.focus();
});
}, F = (e, t) => {
switch (e.key) {
case "ArrowLeft":
case "ArrowUp":
e.preventDefault(), t > 1 && (k(t - 1), requestAnimationFrame(() => {
j.current.get(t - 1)?.focus();
}));
break;
case "ArrowRight":
case "ArrowDown":
e.preventDefault(), t < o && (k(t + 1), requestAnimationFrame(() => {
j.current.get(t + 1)?.focus();
}));
break;
case "Home":
e.preventDefault(), k(1), requestAnimationFrame(() => {
j.current.get(1)?.focus();
});
break;
case "End":
e.preventDefault(), k(o), requestAnimationFrame(() => {
j.current.get(o)?.focus();
});
break;
}
}, I = {
paginationLabel: E.formatMessage({
id: "unity:component:pagination:label",
defaultMessage: "Pagination"
}),
pageListLabel: E.formatMessage({
id: "unity:component:pagination:page-list:label",
defaultMessage: "Page {current} of {total}"
}, {
current: O,
total: o
})
}, { base: L, pagesList: R } = h();
return /* @__PURE__ */ d("nav", {
"data-dd-privacy": "allow",
...C,
ref: w,
className: L(),
"aria-labelledby": I.paginationLabel,
children: [
/* @__PURE__ */ u(n, {
pageCount: o,
onJumpToPage: P,
state: A
}),
/* @__PURE__ */ u(r, {
variant: "previous",
isDisabled: O === 1,
onClick: () => {
k("previous"), x?.();
}
}),
/* @__PURE__ */ u("ul", {
className: R(),
"aria-label": I.pageListLabel,
children: M.map((e, n) => e.type === "page" ? /* @__PURE__ */ u("li", {
"aria-setsize": o,
"aria-posinset": e.value,
children: /* @__PURE__ */ u(S, {
ref: (t) => {
t ? j.current.set(e.value, t) : j.current.delete(e.value);
},
onPress: () => {
k(e.value);
},
onHoverChange: (t) => {
t && v?.(e.value);
},
onKeyDown: (t) => {
F(t, e.value);
},
isActive: e.value === O,
value: e.value,
children: N.format(e.value)
})
}, `pagination-${T}-item-${n}`) : /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u(t, {
value: e.value,
onKeyDown: (e) => {
F(e, -1);
},
onPress: () => {
A.open();
}
}) }, `pagination-${T}-item-${n}`))
}),
/* @__PURE__ */ u(r, {
variant: "next",
isDisabled: O === o,
onClick: () => {
k("next"), b?.();
}
})
]
});
});
_.displayName = "ClientSidePagination";
//#endregion
export { _ as ClientSidePagination };