components/pagination/pagination.react.tsx

Functions

Imports

It imports components/pagination/pagination.ts. Imported by components/catalog/catalog.react.tsx.

Source

1import type { ReactElement } from "react";
2import { pageItems, statusText } from "./pagination.ts";
3
4export interface PaginationProps {
5  page: number;
6  pageCount: number;
7  // Links (server-rendered): the address of a page. Without it the pager is buttons and
8  // onPageChange says which page was chosen.
9  hrefFor?: (page: number) => string;
10  onPageChange?: (page: number) => void;
11  // With both, the "Showing 21 to 40 of 312 posts" line is shown.
12  total?: number;
13  perPage?: number;
14  // What the items are, in the plural: "posts".
15  noun?: string;
16  // Newer and Older for a newest-first list.
17  prevLabel?: string;
18  nextLabel?: string;
19  label?: string;
20}
21
22// The HTML contract in pagination.md. One page or none renders nothing: there is nowhere to go.
23export function Pagination({ page, pageCount, hrefFor, onPageChange, total, perPage, noun = "items", prevLabel = "Previous", nextLabel = "Next", label = "Pagination" }: PaginationProps): ReactElement | null {
24  if (pageCount <= 1) return null;
25  const links = typeof hrefFor === "function";
26  const control = (to: number, className: string, content: string, extra: { kind?: "prev" | "next"; current?: boolean; name?: string; rel?: string }) => {
27    const common = {
28      className,
29      "data-kind": extra.kind,
30      "aria-label": extra.name,
31      "aria-current": extra.current ? ("page" as const) : undefined,
32    };
33    const off = !extra.current && (to < 1 || to > pageCount);
34    if (links) {
35      return off ? (
36        <a {...common} role="link" aria-disabled="true">
37          {content}
38        </a>
39      ) : (
40        <a {...common} href={hrefFor(to)} rel={extra.rel}>
41          {content}
42        </a>
43      );
44    }
45    return (
46      <button type="button" {...common} aria-disabled={off ? true : undefined} onClick={() => (!off && !extra.current ? onPageChange?.(to) : undefined)}>
47        {content}
48      </button>
49    );
50  };
51  return (
52    <nav className="cap-pagination" aria-label={label}>
53      {perPage && total != null ? (
54        <p className="cap-pagination-status" role={links ? undefined : "status"}>
55          {statusText(page, perPage, total, noun)}
56        </p>
57      ) : null}
58      <ul className="cap-pagination-list">
59        <li key="prev">{control(page - 1, "cap-page", prevLabel, { kind: "prev", rel: "prev" })}</li>
60        {pageItems(page, pageCount).map((it) =>
61          typeof it === "number" ? (
62            <li className="cap-pagination-num" key={it}>
63              {control(it, "cap-page", String(it), { current: it === page, name: `Page ${it}` })}
64            </li>
65          ) : (
66            <li className="cap-pagination-num" key={it}>
67              <span className="cap-page-gap">
68                <span aria-hidden="true">{"…"}</span>
69                <span className="cap-sr-only">More pages</span>
70              </span>
71            </li>
72          ),
73        )}
74        <li className="cap-pagination-where" key="where">
75          Page {page} of {pageCount}
76        </li>
77        <li key="next">{control(page + 1, "cap-page", nextLabel, { kind: "next", rel: "next" })}</li>
78      </ul>
79    </nav>
80  );
81}