welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
201 lines (200 loc) • 6.49 kB
JavaScript
"use client";
import './Pagination.css';
import { jsx as s, jsxs as $ } from "react/jsx-runtime";
import { useMemo as Y, forwardRef as Z, useRef as M, useCallback as k } from "react";
import { Icon as A } from "./Icon.js";
import { Text as H } from "./Text.js";
import { c as I } from "./index-B6iGEm-i.js";
const a = "_list_134xt_6", C = "_item_134xt_16", x = "_page_134xt_55", v = {
"condensed-range": "_condensed-range_134xt_3",
list: a,
item: C,
"disabled-arrow": "_disabled-arrow_134xt_46",
page: x,
"with-text-left": "_with-text-left_134xt_75",
"with-text-right": "_with-text-right_134xt_76",
"size-lg": "_size-lg_134xt_79",
"size-md": "_size-md_134xt_94"
}, o = 5, g = 3;
function T({ page: e, pageCount: r, rangeDisplay: _ }) {
return Y(() => {
if (r <= _ || r <= o + 1)
return B(r, (d) => d + 1);
const m = ll(e, r), N = m === "before" ? B(o, (d) => d + 1) : [1], h = m === "center" ? B(g, (d) => d + e - 1) : [], c = m === "after" ? B(o, (d) => d + r - o + 1) : [r];
return rl([N, h, c], "-");
}, [e, r, _]);
}
function B(e, r) {
return Array.from({ length: e }, (_, m) => r(m));
}
function ll(e, r) {
return e < o ? "before" : e >= o && e <= r - o + 1 ? "center" : e > r - o + 1 ? "after" : "center";
}
function rl(e, r) {
return e.reduce((_, m, N) => {
const h = [];
return h.push(..._), h.push(...m), m.length && N < e.length - 1 && h.push(r), h;
}, []);
}
const u = I(v), el = Z(
({
"aria-label": e,
buttonFirstProps: r,
buttonLastProps: _,
buttonNextProps: m,
buttonPrevProps: N,
condensed: h = !1,
dataTestId: c,
getHref: d,
listProps: G,
navigationTexts: l,
onChange: b,
page: t,
pageCount: i,
rangeDisplay: n = 5,
showEdgeControls: D = !1,
size: P = "lg",
...p
}, q) => {
const J = T({ page: t, pageCount: i, rangeDisplay: n }), K = M(null), O = M(null), w = t === 1, z = t === i, y = t === 1, R = t === i, j = (l == null ? void 0 : l.firstPage) || "First Page", E = (l == null ? void 0 : l.lastPage) || "Last Page", F = (l == null ? void 0 : l.nextPage) || "Next Page", L = (l == null ? void 0 : l.previousPage) || "Previous Page", Q = k(() => {
y || b(1);
}, [y, b]), S = k(() => {
R || b(i);
}, [R, i, b]), U = k(() => {
if (w) return;
const f = Math.max(t - 1, 1);
b(f);
}, [w, t, b]), V = k(() => {
if (z) return;
const f = Math.min(t + 1, i);
b(f);
}, [z, t, i, b]);
return /* @__PURE__ */ s("nav", { "aria-label": e ?? "Pagination", "data-testid": c, ref: q, ...p, children: /* @__PURE__ */ $("ol", { className: u("list"), ...G, children: [
D ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ $(
"button",
{
"aria-label": j,
className: u(
"item",
`size-${P}`,
(l == null ? void 0 : l.firstPage) && "with-text-right",
y && "disabled-arrow"
),
"data-testid": c ? `${c}-arrow-first` : void 0,
disabled: y,
onClick: Q,
type: "button",
...r,
children: [
/* @__PURE__ */ s(A, { className: u("icon"), name: "angle-double-left", size: "lg" }),
l != null && l.firstPage ? j : null
]
}
) }) : null,
/* @__PURE__ */ s("li", { children: /* @__PURE__ */ $(
"button",
{
"aria-label": L,
className: u(
"item",
`size-${P}`,
(l == null ? void 0 : l.previousPage) && "with-text-right",
w && "disabled-arrow"
),
"data-testid": c ? `${c}-arrow-prev` : void 0,
disabled: w,
onClick: U,
ref: K,
type: "button",
...N,
children: [
/* @__PURE__ */ s(A, { className: u("icon"), name: "angle-left", size: "lg" }),
l != null && l.previousPage ? L : null
]
}
) }),
h ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
H,
{
"aria-label": `Page ${t} of ${i}`,
as: "span",
className: u("condensed-range"),
"data-testid": c ? `${c}-range` : void 0,
role: "status",
variant: `body-${P}`,
children: `${t} / ${i}`
}
) }) : J.map(
(f, W) => f === "-" ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
"button",
{
"aria-label": "Collapsed Pages",
className: u("item", `size-${P}`),
type: "button",
children: "..."
}
) }, `${W}-`) : /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
"a",
{
"aria-current": f === t,
className: u("item", "page", `size-${P}`),
"data-testid": c ? `${c}-${f}` : void 0,
href: d == null ? void 0 : d(f),
onClick: (X) => {
b && (X.preventDefault(), b(f));
},
children: f
}
) }, f)
),
/* @__PURE__ */ s("li", { children: /* @__PURE__ */ $(
"button",
{
"aria-label": F,
className: u(
"item",
`size-${P}`,
(l == null ? void 0 : l.nextPage) && "with-text-left",
z && "disabled-arrow"
),
"data-testid": c ? `${c}-arrow-next` : void 0,
disabled: z,
onClick: V,
ref: O,
type: "button",
...m,
children: [
l != null && l.nextPage ? F : null,
/* @__PURE__ */ s(A, { name: "angle-right", size: "lg" })
]
}
) }),
D ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ $(
"button",
{
"aria-label": E,
className: u(
"item",
`size-${P}`,
(l == null ? void 0 : l.lastPage) && "with-text-left",
R && "disabled-arrow"
),
"data-testid": c ? `${c}-arrow-last` : void 0,
disabled: R,
onClick: S,
type: "button",
..._,
children: [
l != null && l.lastPage ? E : null,
/* @__PURE__ */ s(A, { className: u("icon"), name: "angle-double-right", size: "lg" })
]
}
) }) : null
] }) });
}
);
el.displayName = "Pagination";
export {
el as Pagination,
v as paginationClasses
};