@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
58 lines (57 loc) • 3.75 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Pagination = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./Pagination.css");
const Button_1 = require("../Button");
const Icon_1 = require("../Icon");
const Pagination = ({ currentPage, totalPages, onPageChange, size = 'medium', showFirstLast = true, siblingCount = 1, className = '', }) => {
const generatePageNumbers = () => {
const pages = [];
const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
const showLeftDots = leftSiblingIndex > 2;
const showRightDots = rightSiblingIndex < totalPages - 1;
// Always show first page
pages.push(1);
if (showLeftDots) {
pages.push('...');
}
// Show pages around current
for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
if (i !== 1 && i !== totalPages) {
pages.push(i);
}
}
if (showRightDots) {
pages.push('...');
}
// Always show last page if more than 1
if (totalPages > 1) {
pages.push(totalPages);
}
return pages;
};
const pages = generatePageNumbers();
const handlePageClick = (page) => {
if (page >= 1 && page <= totalPages && page !== currentPage) {
onPageChange(page);
}
};
const rootClassName = [
'ds-pagination',
`ds-pagination--${size}`,
className,
]
.filter(Boolean)
.join(' ');
return ((0, jsx_runtime_1.jsx)("nav", { className: rootClassName, "aria-label": "Pagination", children: (0, jsx_runtime_1.jsxs)("div", { className: "ds-pagination__list", children: [showFirstLast && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", size: size, shape: "icon", onClick: () => handlePageClick(1), disabled: currentPage === 1, "aria-label": "Primera p\u00E1gina", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevrons-left", size: 20 }) })), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", size: size, shape: "icon", onClick: () => handlePageClick(currentPage - 1), disabled: currentPage === 1, "aria-label": "P\u00E1gina anterior", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-left", size: 20 }) }), pages.map((page, index) => {
if (page === '...') {
return ((0, jsx_runtime_1.jsx)("span", { className: "ds-pagination__ellipsis", children: "..." }, `ellipsis-${index}`));
}
const pageNumber = page;
const isActive = pageNumber === currentPage;
return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: isActive ? 'primary' : 'ghost', size: size, onClick: () => handlePageClick(pageNumber), "aria-label": `Página ${pageNumber}`, "aria-current": isActive ? 'page' : undefined, children: pageNumber }, pageNumber));
}), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", size: size, shape: "icon", onClick: () => handlePageClick(currentPage + 1), disabled: currentPage === totalPages, "aria-label": "P\u00E1gina siguiente", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-right", size: 20 }) }), showFirstLast && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", size: size, shape: "icon", onClick: () => handlePageClick(totalPages), disabled: currentPage === totalPages, "aria-label": "\u00DAltima p\u00E1gina", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevrons-right", size: 20 }) }))] }) }));
};
exports.Pagination = Pagination;