@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
70 lines (69 loc) • 3.27 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import Button from "../Buttons/Button/index.js";
import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "../Icon/index.js";
const PaginationButton = ({ currentPage, pageNumber, onPageChange })=>{
const isActive = currentPage === pageNumber;
return /*#__PURE__*/ jsx(Button, {
className: classnames("cobalt-pagination__Button"),
selected: isActive,
onClick: ()=>!isActive && onPageChange(pageNumber),
children: pageNumber
});
};
const PAGE_DOTS_VALUE = -1;
const generatePages = (currentPage, totalPages, options)=>{
const pages = [];
const maxVisiblePages = options.maxVisibleLength;
const edgeButtons = options.edgeVisibleLength;
if (totalPages <= maxVisiblePages) {
for(let i = 1; i <= totalPages; i++)pages.push(i);
return pages;
}
const middlePagesCount = maxVisiblePages - 2 * edgeButtons;
let startMiddlePage = Math.max(currentPage - Math.floor(middlePagesCount / 2), edgeButtons + 1);
let endMiddlePage = Math.min(currentPage + Math.floor(middlePagesCount / 2), totalPages - edgeButtons);
if (startMiddlePage === edgeButtons + 1) endMiddlePage = startMiddlePage + middlePagesCount - 1;
else if (endMiddlePage === totalPages - edgeButtons) startMiddlePage = endMiddlePage - middlePagesCount + 1;
for(let i = 1; i <= edgeButtons; i++)pages.push(i);
if (startMiddlePage > edgeButtons + 1) pages.push(PAGE_DOTS_VALUE);
for(let i = startMiddlePage; i <= endMiddlePage; i++)pages.push(i);
if (endMiddlePage < totalPages - edgeButtons) pages.push(PAGE_DOTS_VALUE);
for(let i = totalPages - edgeButtons + 1; i <= totalPages; i++)pages.push(i);
return pages;
};
const Pagination = ({ onPageChange, currentPage, totalPages, options = {
maxVisibleLength: 11,
edgeVisibleLength: 3
} })=>{
if (totalPages <= 1) return null;
const pages = generatePages(currentPage, totalPages, options);
return /*#__PURE__*/ jsxs("div", {
className: "cobalt-pagination",
children: [
/*#__PURE__*/ jsx(Button, {
className: classnames("cobalt-pagination__Button"),
disabled: 1 === currentPage,
onClick: ()=>onPageChange(currentPage - 1),
icon: /*#__PURE__*/ jsx(ChevronLeftIcon, {})
}),
pages.map((page)=>page === PAGE_DOTS_VALUE ? /*#__PURE__*/ jsx(DotsHorizontalIcon, {
className: "cobalt-pagination__threeDots",
color: "primary"
}, `dots-${page}`) : /*#__PURE__*/ jsx(PaginationButton, {
currentPage: currentPage,
pageNumber: page,
onPageChange: onPageChange
}, page)),
/*#__PURE__*/ jsx(Button, {
className: classnames("cobalt-pagination__Button"),
disabled: currentPage === totalPages,
onClick: ()=>onPageChange(currentPage + 1),
icon: /*#__PURE__*/ jsx(ChevronRightIcon, {})
})
]
});
};
const components_Pagination = Pagination;
export default components_Pagination;
//# sourceMappingURL=index.js.map