@primer/react
Version:
An implementation of GitHub's Primer Design System using React
599 lines (596 loc) • 14.6 kB
JavaScript
import { c } from 'react-compiler-runtime';
import { ChevronLeftIcon, ChevronRightIcon } from '@primer/octicons-react';
import { useState } from 'react';
import { Button } from '../internal/components/ButtonReset.js';
import { warning } from '../utils/warning.js';
import { viewportRanges } from '../hooks/useResponsiveValue.js';
import { buildPaginationModel } from '../Pagination/model.js';
import classes from './Pagination.module.css.js';
import { clsx } from 'clsx';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
import { AriaStatus } from '../live-region/AriaStatus.js';
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 === undefined ? 25 : t1;
const showPages = t2 === undefined ? 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", classes.TablePagination);
$[11] = t8;
} else {
t8 = $[11];
}
let t9;
if ($[12] !== pageEnd || $[13] !== pageStart || $[14] !== totalCount) {
t9 = /*#__PURE__*/jsx(Range, {
pageStart: pageStart,
pageEnd: pageEnd,
totalCount: 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", classes.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", classes.TablePaginationAction);
$[19] = t13;
} else {
t13 = $[19];
}
const t14 = hasPreviousPage ? true : undefined;
const t15 = !hasPreviousPage ? true : undefined;
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,
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: "\u2026"
}) : 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", classes.TablePaginationAction);
$[37] = t22;
} else {
t22 = $[37];
}
const t23 = hasNextPage ? true : undefined;
const t24 = !hasNextPage ? true : undefined;
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,
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: id,
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", classes.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: "\u2012"
});
$[5] = t3;
$[6] = t4;
} else {
t3 = $[5];
t4 = $[6];
}
let t5;
if ($[7] !== end || $[8] !== start || $[9] !== totalCount) {
t5 = /*#__PURE__*/jsxs("p", {
className: t2,
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", classes.TablePaginationTruncationStep),
children: "\u2026"
});
$[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", classes.TablePaginationStep);
$[0] = t1;
} else {
t1 = $[0];
}
let t2;
if ($[1] !== children) {
t2 = /*#__PURE__*/jsx("li", {
className: t1,
children: 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", classes.TablePaginationPage);
$[0] = t1;
} else {
t1 = $[0];
}
const t2 = active ? true : undefined;
const t3 = active ? true : undefined;
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: onClick,
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 !== undefined) {
if (defaultPageIndex >= 0 && defaultPageIndex < pageCount) {
return defaultPageIndex;
}
process.env.NODE_ENV !== "production" ? 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) : void 0;
}
return 0;
};
$[0] = defaultPageIndex;
$[1] = pageCount;
$[2] = t0;
} else {
t0 = $[2];
}
const [defaultIndex, setDefaultIndex] = useState(t0);
const [pageIndex, setPageIndex] = useState(defaultIndex);
const validDefaultPageCount = defaultPageIndex !== undefined && defaultPageIndex >= 0 && defaultPageIndex < pageCount;
if (validDefaultPageCount && defaultIndex !== defaultPageIndex) {
setDefaultIndex(defaultPageIndex);
setPageIndex(defaultPageIndex);
onChange === null || onChange === void 0 ? 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 ? 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;
}
export { Pagination };