@primer/react
Version:
An implementation of GitHub's Primer Design System using React
398 lines (394 loc) • 11.7 kB
JavaScript
'use strict';
var reactCompilerRuntime = require('react-compiler-runtime');
var octiconsReact = require('@primer/octicons-react');
var React = require('react');
var ButtonReset = require('../internal/components/ButtonReset.js');
var LiveRegion = require('../internal/components/LiveRegion.js');
var warning = require('../utils/warning.js');
var useResponsiveValue = require('../hooks/useResponsiveValue.js');
var model = require('../Pagination/model.js');
var Pagination_module = require('./Pagination.module.css.js');
var clsx = require('clsx');
var jsxRuntime = require('react/jsx-runtime');
var VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
const defaultShowPages = {
narrow: false
};
function Pagination({
'aria-label': label,
defaultPageIndex,
id,
onChange,
pageSize = 25,
showPages = defaultShowPages,
totalCount
}) {
const {
pageIndex,
pageStart,
pageEnd,
pageCount,
hasPreviousPage,
hasNextPage,
selectPage,
selectNextPage,
selectPreviousPage
} = usePagination({
defaultPageIndex,
onChange,
pageSize,
totalCount
});
const getViewportRangesToHidePages = React.useCallback(() => {
if (typeof showPages !== 'boolean') {
return Object.keys(showPages).filter(key => !showPages[key]);
}
if (showPages) {
return [];
} else {
return Object.keys(useResponsiveValue.viewportRanges);
}
}, [showPages]);
const model$1 = React.useMemo(() => {
return model.buildPaginationModel(pageCount, pageIndex + 1, !!showPages, 1, 2);
}, [pageCount, pageIndex, showPages]);
return /*#__PURE__*/jsxRuntime.jsxs(LiveRegion.LiveRegion, {
children: [/*#__PURE__*/jsxRuntime.jsx(LiveRegion.LiveRegionOutlet, {}), /*#__PURE__*/jsxRuntime.jsxs("nav", {
"aria-label": label,
className: clsx.clsx('TablePagination', Pagination_module.TablePagination),
id: id,
children: [/*#__PURE__*/jsxRuntime.jsx(Range, {
pageStart: pageStart,
pageEnd: pageEnd,
totalCount: totalCount
}), /*#__PURE__*/jsxRuntime.jsxs("ol", {
className: clsx.clsx('TablePaginationSteps', Pagination_module.TablePaginationSteps),
"data-hidden-viewport-ranges": getViewportRangesToHidePages().join(' '),
children: [/*#__PURE__*/jsxRuntime.jsx(Step, {
children: /*#__PURE__*/jsxRuntime.jsxs(ButtonReset.Button, {
className: clsx.clsx('TablePaginationAction', Pagination_module.TablePaginationAction),
type: "button",
"data-has-page": hasPreviousPage ? true : undefined,
"aria-disabled": !hasPreviousPage ? true : undefined,
onClick: () => {
if (!hasPreviousPage) {
return;
}
selectPreviousPage();
},
children: [hasPreviousPage ? /*#__PURE__*/jsxRuntime.jsx(octiconsReact.ChevronLeftIcon, {}) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
children: "Previous"
}), /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, {
children: "\xA0page"
})]
})
}), model$1.map((page, i) => {
if (page.type === 'BREAK') {
return /*#__PURE__*/jsxRuntime.jsx(TruncationStep, {}, `truncation-${i}`);
} else if (page.type === 'NUM') {
return /*#__PURE__*/jsxRuntime.jsx(Step, {
children: /*#__PURE__*/jsxRuntime.jsxs(Page, {
active: !!page.selected,
onClick: () => {
selectPage(page.num - 1);
},
children: [page.num, page.precedesBreak ? /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, {
children: "\u2026"
}) : null]
})
}, i);
}
}), /*#__PURE__*/jsxRuntime.jsx(Step, {
children: /*#__PURE__*/jsxRuntime.jsxs(ButtonReset.Button, {
className: clsx.clsx('TablePaginationAction', Pagination_module.TablePaginationAction),
type: "button",
"data-has-page": hasNextPage ? true : undefined,
"aria-disabled": !hasNextPage ? true : undefined,
onClick: () => {
if (!hasNextPage) {
return;
}
selectNextPage();
},
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
children: "Next"
}), /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, {
children: "\xA0page"
}), hasNextPage ? /*#__PURE__*/jsxRuntime.jsx(octiconsReact.ChevronRightIcon, {}) : null]
})
})]
})]
})]
});
}
Pagination.displayName = "Pagination";
function Range(t0) {
const $ = reactCompilerRuntime.c(12);
const {
pageStart,
pageEnd,
totalCount
} = t0;
const start = pageStart + 1;
const end = pageEnd;
const t1 = `Showing ${start} through ${end} of ${totalCount}`;
let t2;
if ($[0] !== t1) {
t2 = /*#__PURE__*/jsxRuntime.jsx(LiveRegion.Message, {
value: t1
});
$[0] = t1;
$[1] = t2;
} else {
t2 = $[1];
}
let t3;
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
t3 = clsx.clsx("TablePaginationRange", Pagination_module.TablePaginationRange);
$[2] = t3;
} else {
t3 = $[2];
}
let t4;
let t5;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
t4 = /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, {
children: "\xA0through\xA0"
});
t5 = /*#__PURE__*/jsxRuntime.jsx("span", {
"aria-hidden": "true",
children: "\u2012"
});
$[3] = t4;
$[4] = t5;
} else {
t4 = $[3];
t5 = $[4];
}
let t6;
if ($[5] !== end || $[6] !== start || $[7] !== totalCount) {
t6 = /*#__PURE__*/jsxRuntime.jsxs("p", {
className: t3,
children: [start, t4, t5, end, " of ", totalCount]
});
$[5] = end;
$[6] = start;
$[7] = totalCount;
$[8] = t6;
} else {
t6 = $[8];
}
let t7;
if ($[9] !== t2 || $[10] !== t6) {
t7 = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [t2, t6]
});
$[9] = t2;
$[10] = t6;
$[11] = t7;
} else {
t7 = $[11];
}
return t7;
}
function TruncationStep() {
const $ = reactCompilerRuntime.c(1);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = /*#__PURE__*/jsxRuntime.jsx("li", {
"aria-hidden": "true",
className: clsx.clsx("TablePaginationTruncationStep", Pagination_module.TablePaginationTruncationStep),
children: "\u2026"
});
$[0] = t0;
} else {
t0 = $[0];
}
return t0;
}
function Step(t0) {
const $ = reactCompilerRuntime.c(3);
const {
children
} = t0;
let t1;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t1 = clsx.clsx("TablePaginationStep", Pagination_module.TablePaginationStep);
$[0] = t1;
} else {
t1 = $[0];
}
let t2;
if ($[1] !== children) {
t2 = /*#__PURE__*/jsxRuntime.jsx("li", {
className: t1,
children: children
});
$[1] = children;
$[2] = t2;
} else {
t2 = $[2];
}
return t2;
}
function Page(t0) {
const $ = reactCompilerRuntime.c(7);
const {
active,
children,
onClick
} = t0;
let t1;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t1 = clsx.clsx("TablePaginationPage", Pagination_module.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__*/jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, {
children: "Page\xA0"
});
$[1] = t4;
} else {
t4 = $[1];
}
let t5;
if ($[2] !== children || $[3] !== onClick || $[4] !== t2 || $[5] !== t3) {
t5 = /*#__PURE__*/jsxRuntime.jsxs(ButtonReset.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 $ = reactCompilerRuntime.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.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] = React.useState(t0);
const [pageIndex, setPageIndex] = React.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;
}
exports.Pagination = Pagination;