@primer/react
Version:
An implementation of GitHub's Primer Design System using React
219 lines (218 loc) • 6.25 kB
JavaScript
import { viewportRanges } from "../hooks/useResponsiveValue.js";
import { buildComponentData, buildPaginationModel } from "./model.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 "react";
import { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react";
//#region src/Pagination/Pagination.tsx
const getViewportRangesToHidePages = (showPages) => {
if (showPages && typeof showPages !== "boolean") return Object.keys(showPages).filter((key) => !showPages[key]);
if (showPages) return [];
else return Object.keys(viewportRanges);
};
const PageLabel = (t0) => {
const $ = c(8);
const { children, direction } = t0;
let t1;
if ($[0] !== direction) {
t1 = direction === "page-prev" ? /*#__PURE__*/ jsx(ChevronLeftIcon, { "data-component": "Pagination.PreviousPageIcon" }) : null;
$[0] = direction;
$[1] = t1;
} else t1 = $[1];
let t2;
if ($[2] !== direction) {
t2 = direction === "page-next" ? /*#__PURE__*/ jsx(ChevronRightIcon, { "data-component": "Pagination.NextPageIcon" }) : null;
$[2] = direction;
$[3] = t2;
} else t2 = $[3];
let t3;
if ($[4] !== children || $[5] !== t1 || $[6] !== t2) {
t3 = /*#__PURE__*/ jsxs(Fragment, { children: [
t1,
children,
t2
] });
$[4] = children;
$[5] = t1;
$[6] = t2;
$[7] = t3;
} else t3 = $[7];
return t3;
};
function usePaginationPages(t0) {
const $ = c(17);
const { pageCount, currentPage, onPageChange, hrefBuilder, marginPageCount, showPages, surroundingPageCount, renderPage } = t0;
let t1;
if ($[0] !== onPageChange) {
t1 = (n) => (e) => onPageChange(e, n);
$[0] = onPageChange;
$[1] = t1;
} else t1 = $[1];
const pageChange = t1;
const t2 = !!showPages;
let t3;
if ($[2] !== currentPage || $[3] !== marginPageCount || $[4] !== pageCount || $[5] !== surroundingPageCount || $[6] !== t2) {
t3 = buildPaginationModel(pageCount, currentPage, t2, marginPageCount, surroundingPageCount);
$[2] = currentPage;
$[3] = marginPageCount;
$[4] = pageCount;
$[5] = surroundingPageCount;
$[6] = t2;
$[7] = t3;
} else t3 = $[7];
const model = t3;
let t4;
if ($[8] !== hrefBuilder || $[9] !== model || $[10] !== pageChange || $[11] !== renderPage) {
let t5;
if ($[13] !== hrefBuilder || $[14] !== pageChange || $[15] !== renderPage) {
t5 = (page) => {
const { props, key, content } = buildComponentData(page, hrefBuilder, pageChange(page.num));
if (renderPage && props.as !== "span") return renderPage({
key,
children: /*#__PURE__*/ jsx(PageLabel, {
direction: key,
children: content
}),
number: page.num,
className: Pagination_module_css_default.Page,
"data-component": "Pagination.Page",
...props
});
const Component = props.as || "a";
const dataComponentAttribute = props.rel === "prev" ? "Pagination.PreviousPage" : props.rel === "next" ? "Pagination.NextPage" : "Pagination.Page";
return /*#__PURE__*/ jsx(Component, {
className: clsx(Pagination_module_css_default.Page),
"data-component": dataComponentAttribute,
...props,
children: /*#__PURE__*/ jsx(PageLabel, {
direction: key,
children: content
})
}, key);
};
$[13] = hrefBuilder;
$[14] = pageChange;
$[15] = renderPage;
$[16] = t5;
} else t5 = $[16];
t4 = model.map(t5);
$[8] = hrefBuilder;
$[9] = model;
$[10] = pageChange;
$[11] = renderPage;
$[12] = t4;
} else t4 = $[12];
return t4;
}
function Pagination(t0) {
const $ = c(31);
let className;
let currentPage;
let pageCount;
let renderPage;
let rest;
let t1;
let t2;
let t3;
let t4;
let t5;
if ($[0] !== t0) {
({className, pageCount, currentPage, onPageChange: t1, hrefBuilder: t2, marginPageCount: t3, showPages: t4, surroundingPageCount: t5, renderPage, ...rest} = t0);
$[0] = t0;
$[1] = className;
$[2] = currentPage;
$[3] = pageCount;
$[4] = renderPage;
$[5] = rest;
$[6] = t1;
$[7] = t2;
$[8] = t3;
$[9] = t4;
$[10] = t5;
} else {
className = $[1];
currentPage = $[2];
pageCount = $[3];
renderPage = $[4];
rest = $[5];
t1 = $[6];
t2 = $[7];
t3 = $[8];
t4 = $[9];
t5 = $[10];
}
const onPageChange = t1 === void 0 ? noop : t1;
const hrefBuilder = t2 === void 0 ? defaultHrefBuilder : t2;
const marginPageCount = t3 === void 0 ? 1 : t3;
const showPages = t4 === void 0 ? true : t4;
const surroundingPageCount = t5 === void 0 ? 2 : t5;
let t6;
if ($[11] !== currentPage || $[12] !== hrefBuilder || $[13] !== marginPageCount || $[14] !== onPageChange || $[15] !== pageCount || $[16] !== renderPage || $[17] !== showPages || $[18] !== surroundingPageCount) {
t6 = {
pageCount,
currentPage,
onPageChange,
hrefBuilder,
marginPageCount,
showPages,
surroundingPageCount,
renderPage
};
$[11] = currentPage;
$[12] = hrefBuilder;
$[13] = marginPageCount;
$[14] = onPageChange;
$[15] = pageCount;
$[16] = renderPage;
$[17] = showPages;
$[18] = surroundingPageCount;
$[19] = t6;
} else t6 = $[19];
const pageElements = usePaginationPages(t6);
let t7;
if ($[20] !== className) {
t7 = clsx(Pagination_module_css_default.PaginationContainer, className);
$[20] = className;
$[21] = t7;
} else t7 = $[21];
let t8;
if ($[22] !== showPages) {
t8 = getViewportRangesToHidePages(showPages).join(" ");
$[22] = showPages;
$[23] = t8;
} else t8 = $[23];
let t9;
if ($[24] !== pageElements || $[25] !== t8) {
t9 = /*#__PURE__*/ jsx("div", {
className: Pagination_module_css_default.TablePaginationSteps,
"data-hidden-viewport-ranges": t8,
children: pageElements
});
$[24] = pageElements;
$[25] = t8;
$[26] = t9;
} else t9 = $[26];
let t10;
if ($[27] !== rest || $[28] !== t7 || $[29] !== t9) {
t10 = /*#__PURE__*/ jsx("nav", {
className: t7,
"aria-label": "Pagination",
"data-component": "Pagination",
...rest,
children: t9
});
$[27] = rest;
$[28] = t7;
$[29] = t9;
$[30] = t10;
} else t10 = $[30];
return t10;
}
function defaultHrefBuilder(pageNum) {
return `#${pageNum}`;
}
function noop() {}
//#endregion
export { Pagination as default };