@primer/react
Version:
An implementation of GitHub's Primer Design System using React
478 lines (477 loc) • 13.4 kB
JavaScript
import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
import { warning } from "../utils/warning.js";
import { AriaStatus } from "../live-region/AriaStatus.js";
import { viewportRanges } from "../hooks/useResponsiveValue.js";
import { buildPaginationModel } from "../Pagination/model.js";
import { Button } from "../internal/components/ButtonReset.js";
import Pagination_module_css_default from "./Pagination.module.css.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react";
//#region src/DataTable/Pagination.tsx
const defaultShowPages = { narrow: false };
function Pagination(t0) {
const $ = c(60);
const { "aria-label": label, defaultPageIndex, id, onChange, pageSize: t1, showPages: t2, totalCount } = t0;
const pageSize = t1 === void 0 ? 25 : t1;
const showPages = t2 === void 0 ? defaultShowPages : t2;
let t3;
if ($[0] !== defaultPageIndex || $[1] !== onChange || $[2] !== pageSize || $[3] !== totalCount) {
t3 = {
defaultPageIndex,
onChange,
pageSize,
totalCount
};
$[0] = defaultPageIndex;
$[1] = onChange;
$[2] = pageSize;
$[3] = totalCount;
$[4] = t3;
} else t3 = $[4];
const { pageIndex, pageStart, pageEnd, pageCount, hasPreviousPage, hasNextPage, selectPage, selectNextPage, selectPreviousPage } = usePagination(t3);
let t4;
if ($[5] !== showPages) {
t4 = () => {
if (typeof showPages !== "boolean") return Object.keys(showPages).filter((key) => !showPages[key]);
if (showPages) return [];
else return Object.keys(viewportRanges);
};
$[5] = showPages;
$[6] = t4;
} else t4 = $[6];
const getViewportRangesToHidePages = t4;
const t5 = pageIndex + 1;
const t6 = !!showPages;
let t7;
if ($[7] !== pageCount || $[8] !== t5 || $[9] !== t6) {
t7 = buildPaginationModel(pageCount, t5, t6, 1, 2);
$[7] = pageCount;
$[8] = t5;
$[9] = t6;
$[10] = t7;
} else t7 = $[10];
const model = t7;
let t8;
if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
t8 = clsx("TablePagination", Pagination_module_css_default.TablePagination);
$[11] = t8;
} else t8 = $[11];
let t9;
if ($[12] !== pageEnd || $[13] !== pageStart || $[14] !== totalCount) {
t9 = /*#__PURE__*/ jsx(Range, {
pageStart,
pageEnd,
totalCount
});
$[12] = pageEnd;
$[13] = pageStart;
$[14] = totalCount;
$[15] = t9;
} else t9 = $[15];
let t10;
if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
t10 = clsx("TablePaginationSteps", Pagination_module_css_default.TablePaginationSteps);
$[16] = t10;
} else t10 = $[16];
let t11;
if ($[17] !== getViewportRangesToHidePages) {
t11 = getViewportRangesToHidePages();
$[17] = getViewportRangesToHidePages;
$[18] = t11;
} else t11 = $[18];
const t12 = t11.join(" ");
let t13;
if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
t13 = clsx("TablePaginationAction", Pagination_module_css_default.TablePaginationAction);
$[19] = t13;
} else t13 = $[19];
const t14 = hasPreviousPage ? true : void 0;
const t15 = !hasPreviousPage ? true : void 0;
let t16;
if ($[20] !== hasPreviousPage || $[21] !== selectPreviousPage) {
t16 = () => {
if (!hasPreviousPage) return;
selectPreviousPage();
};
$[20] = hasPreviousPage;
$[21] = selectPreviousPage;
$[22] = t16;
} else t16 = $[22];
let t17;
if ($[23] !== hasPreviousPage) {
t17 = hasPreviousPage ? /*#__PURE__*/ jsx(ChevronLeftIcon, {}) : null;
$[23] = hasPreviousPage;
$[24] = t17;
} else t17 = $[24];
let t18;
let t19;
if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
t18 = /*#__PURE__*/ jsx("span", { children: "Previous" });
t19 = /*#__PURE__*/ jsx(VisuallyHidden, { children: "\xA0page" });
$[25] = t18;
$[26] = t19;
} else {
t18 = $[25];
t19 = $[26];
}
let t20;
if ($[27] !== t14 || $[28] !== t15 || $[29] !== t16 || $[30] !== t17) {
t20 = /*#__PURE__*/ jsx(Step, { children: /*#__PURE__*/ jsxs(Button, {
className: t13,
type: "button",
"data-has-page": t14,
"aria-disabled": t15,
"data-component": "Table.Pagination.PreviousPageButton",
onClick: t16,
children: [
t17,
t18,
t19
]
}) });
$[27] = t14;
$[28] = t15;
$[29] = t16;
$[30] = t17;
$[31] = t20;
} else t20 = $[31];
let t21;
if ($[32] !== model || $[33] !== selectPage) {
let t22;
if ($[35] !== selectPage) {
t22 = (page, i) => {
if (page.type === "BREAK") return /*#__PURE__*/ jsx(TruncationStep, {}, `truncation-${i}`);
else if (page.type === "NUM") return /*#__PURE__*/ jsx(Step, { children: /*#__PURE__*/ jsxs(Page, {
active: !!page.selected,
onClick: () => {
selectPage(page.num - 1);
},
children: [page.num, page.precedesBreak ? /*#__PURE__*/ jsx(VisuallyHidden, { children: "…" }) : null]
}) }, i);
};
$[35] = selectPage;
$[36] = t22;
} else t22 = $[36];
t21 = model.map(t22);
$[32] = model;
$[33] = selectPage;
$[34] = t21;
} else t21 = $[34];
let t22;
if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
t22 = clsx("TablePaginationAction", Pagination_module_css_default.TablePaginationAction);
$[37] = t22;
} else t22 = $[37];
const t23 = hasNextPage ? true : void 0;
const t24 = !hasNextPage ? true : void 0;
let t25;
if ($[38] !== hasNextPage || $[39] !== selectNextPage) {
t25 = () => {
if (!hasNextPage) return;
selectNextPage();
};
$[38] = hasNextPage;
$[39] = selectNextPage;
$[40] = t25;
} else t25 = $[40];
let t26;
let t27;
if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
t26 = /*#__PURE__*/ jsx("span", { children: "Next" });
t27 = /*#__PURE__*/ jsx(VisuallyHidden, { children: "\xA0page" });
$[41] = t26;
$[42] = t27;
} else {
t26 = $[41];
t27 = $[42];
}
let t28;
if ($[43] !== hasNextPage) {
t28 = hasNextPage ? /*#__PURE__*/ jsx(ChevronRightIcon, {}) : null;
$[43] = hasNextPage;
$[44] = t28;
} else t28 = $[44];
let t29;
if ($[45] !== t23 || $[46] !== t24 || $[47] !== t25 || $[48] !== t28) {
t29 = /*#__PURE__*/ jsx(Step, { children: /*#__PURE__*/ jsxs(Button, {
className: t22,
type: "button",
"data-has-page": t23,
"aria-disabled": t24,
"data-component": "Table.Pagination.NextPageButton",
onClick: t25,
children: [
t26,
t27,
t28
]
}) });
$[45] = t23;
$[46] = t24;
$[47] = t25;
$[48] = t28;
$[49] = t29;
} else t29 = $[49];
let t30;
if ($[50] !== t12 || $[51] !== t20 || $[52] !== t21 || $[53] !== t29) {
t30 = /*#__PURE__*/ jsxs("ol", {
className: t10,
"data-hidden-viewport-ranges": t12,
children: [
t20,
t21,
t29
]
});
$[50] = t12;
$[51] = t20;
$[52] = t21;
$[53] = t29;
$[54] = t30;
} else t30 = $[54];
let t31;
if ($[55] !== id || $[56] !== label || $[57] !== t30 || $[58] !== t9) {
t31 = /*#__PURE__*/ jsxs("nav", {
"aria-label": label,
className: t8,
id,
"data-component": "Table.Pagination",
children: [t9, t30]
});
$[55] = id;
$[56] = label;
$[57] = t30;
$[58] = t9;
$[59] = t31;
} else t31 = $[59];
return t31;
}
function Range(t0) {
const $ = c(14);
const { pageStart, pageEnd, totalCount } = t0;
const start = pageStart + 1;
const end = pageEnd;
let t1;
if ($[0] !== end || $[1] !== start || $[2] !== totalCount) {
t1 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsxs(AriaStatus, { children: [
"Showing ",
start,
" through ",
end,
" of ",
totalCount
] }) });
$[0] = end;
$[1] = start;
$[2] = totalCount;
$[3] = t1;
} else t1 = $[3];
let t2;
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
t2 = clsx("TablePaginationRange", Pagination_module_css_default.TablePaginationRange);
$[4] = t2;
} else t2 = $[4];
let t3;
let t4;
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
t3 = /*#__PURE__*/ jsx(VisuallyHidden, { children: "\xA0through\xA0" });
t4 = /*#__PURE__*/ jsx("span", {
"aria-hidden": "true",
children: "‒"
});
$[5] = t3;
$[6] = t4;
} else {
t3 = $[5];
t4 = $[6];
}
let t5;
if ($[7] !== end || $[8] !== start || $[9] !== totalCount) {
t5 = /*#__PURE__*/ jsxs("p", {
className: t2,
"data-component": "Table.Pagination.Range",
children: [
start,
t3,
t4,
end,
" of ",
totalCount
]
});
$[7] = end;
$[8] = start;
$[9] = totalCount;
$[10] = t5;
} else t5 = $[10];
let t6;
if ($[11] !== t1 || $[12] !== t5) {
t6 = /*#__PURE__*/ jsxs(Fragment, { children: [t1, t5] });
$[11] = t1;
$[12] = t5;
$[13] = t6;
} else t6 = $[13];
return t6;
}
function TruncationStep() {
const $ = c(1);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = /*#__PURE__*/ jsx("li", {
"aria-hidden": "true",
className: clsx("TablePaginationTruncationStep", Pagination_module_css_default.TablePaginationTruncationStep),
"data-component": "Table.Pagination.TruncationStep",
children: "…"
});
$[0] = t0;
} else t0 = $[0];
return t0;
}
function Step(t0) {
const $ = c(3);
const { children } = t0;
let t1;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t1 = clsx("TablePaginationStep", Pagination_module_css_default.TablePaginationStep);
$[0] = t1;
} else t1 = $[0];
let t2;
if ($[1] !== children) {
t2 = /*#__PURE__*/ jsx("li", {
className: t1,
"data-component": "Table.Pagination.Step",
children
});
$[1] = children;
$[2] = t2;
} else t2 = $[2];
return t2;
}
function Page(t0) {
const $ = c(7);
const { active, children, onClick } = t0;
let t1;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t1 = clsx("TablePaginationPage", Pagination_module_css_default.TablePaginationPage);
$[0] = t1;
} else t1 = $[0];
const t2 = active ? true : void 0;
const t3 = active ? true : void 0;
let t4;
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
t4 = /*#__PURE__*/ jsx(VisuallyHidden, { children: "Page\xA0" });
$[1] = t4;
} else t4 = $[1];
let t5;
if ($[2] !== children || $[3] !== onClick || $[4] !== t2 || $[5] !== t3) {
t5 = /*#__PURE__*/ jsxs(Button, {
className: t1,
type: "button",
"data-active": t2,
"aria-current": t3,
onClick,
"data-component": "Table.Pagination.Page",
children: [t4, children]
});
$[2] = children;
$[3] = onClick;
$[4] = t2;
$[5] = t3;
$[6] = t5;
} else t5 = $[6];
return t5;
}
function usePagination(config) {
const $ = c(24);
const { defaultPageIndex, onChange, pageSize, totalCount } = config;
const pageCount = Math.ceil(totalCount / pageSize);
let t0;
if ($[0] !== defaultPageIndex || $[1] !== pageCount) {
t0 = () => {
if (defaultPageIndex !== void 0) {
if (defaultPageIndex >= 0 && defaultPageIndex < pageCount) return defaultPageIndex;
warning(true, "<Pagination> expected `defaultPageIndex` to be less than the total number of pages. Instead, received a `defaultPageIndex` of %s with %s total pages.", defaultPageIndex, pageCount);
}
return 0;
};
$[0] = defaultPageIndex;
$[1] = pageCount;
$[2] = t0;
} else t0 = $[2];
const [defaultIndex, setDefaultIndex] = useState(t0);
const [pageIndex, setPageIndex] = useState(defaultIndex);
if (defaultPageIndex !== void 0 && defaultPageIndex >= 0 && defaultPageIndex < pageCount && defaultIndex !== defaultPageIndex) {
setDefaultIndex(defaultPageIndex);
setPageIndex(defaultPageIndex);
onChange === null || onChange === void 0 || onChange({ pageIndex: defaultPageIndex });
}
const pageStart = pageIndex * pageSize;
const pageEnd = Math.min((pageIndex + 1) * pageSize, totalCount);
const hasNextPage = pageIndex + 1 < pageCount;
const hasPreviousPage = pageIndex > 0;
let t1;
if ($[3] !== onChange || $[4] !== pageIndex) {
t1 = function selectPage(newPageIndex) {
if (pageIndex !== newPageIndex) {
setPageIndex(newPageIndex);
onChange === null || onChange === void 0 || onChange({ pageIndex: newPageIndex });
}
};
$[3] = onChange;
$[4] = pageIndex;
$[5] = t1;
} else t1 = $[5];
const selectPage = t1;
let t2;
if ($[6] !== hasPreviousPage || $[7] !== pageIndex || $[8] !== selectPage) {
t2 = function selectPreviousPage() {
if (hasPreviousPage) selectPage(pageIndex - 1);
};
$[6] = hasPreviousPage;
$[7] = pageIndex;
$[8] = selectPage;
$[9] = t2;
} else t2 = $[9];
const selectPreviousPage = t2;
let t3;
if ($[10] !== hasNextPage || $[11] !== pageIndex || $[12] !== selectPage) {
t3 = function selectNextPage() {
if (hasNextPage) selectPage(pageIndex + 1);
};
$[10] = hasNextPage;
$[11] = pageIndex;
$[12] = selectPage;
$[13] = t3;
} else t3 = $[13];
const selectNextPage = t3;
let t4;
if ($[14] !== hasNextPage || $[15] !== hasPreviousPage || $[16] !== pageCount || $[17] !== pageEnd || $[18] !== pageIndex || $[19] !== pageStart || $[20] !== selectNextPage || $[21] !== selectPage || $[22] !== selectPreviousPage) {
t4 = {
pageIndex,
pageStart,
pageEnd,
pageCount,
hasNextPage,
hasPreviousPage,
selectPage,
selectPreviousPage,
selectNextPage
};
$[14] = hasNextPage;
$[15] = hasPreviousPage;
$[16] = pageCount;
$[17] = pageEnd;
$[18] = pageIndex;
$[19] = pageStart;
$[20] = selectNextPage;
$[21] = selectPage;
$[22] = selectPreviousPage;
$[23] = t4;
} else t4 = $[23];
return t4;
}
//#endregion
export { Pagination };