@drivy/cobalt/components/Pagination/index.js

Opinionated design system for Drivy's projects.

import React from 'react';
import cx from 'classnames';
import DefaultButton from '../Buttons/DefaultButton/index.js';
import '../Icon/index.js';
import DotsHorizontalIcon from '../Icon/__generated__/DotsHorizontalIcon.js';

const PaginationButton = ({ currentPage, pageNumber, onPageChange, }) => {
    const isActive = currentPage === pageNumber;
    return (React.createElement(DefaultButton, { className: cx("cobalt-pagination__DefaultButton"), selected: isActive, onClick: () => !isActive && onPageChange(pageNumber) }, pageNumber));
};
const PAGE_DOTS_VALUE = -1; // Unrevelant value only used to represent dots in the pages array
const generatePages = (currentPage, totalPages, options) => {
    const pages = [];
    const maxVisiblePages = options.maxVisibleLength; // Max visible pages (excluding dots)
    const edgeButtons = options.edgeVisibleLength; // Number of fixed edge buttons
    if (totalPages <= maxVisiblePages) {
        // Show all pages
        for (let i = 1; i <= totalPages; i++) {
            pages.push(i);
        }
        return pages;
    }
    // Calculate dynamic range for middle pages
    const middlePagesCount = maxVisiblePages - 2 * edgeButtons; // Remaining pages for the middle
    let startMiddlePage = Math.max(currentPage - Math.floor(middlePagesCount / 2), edgeButtons + 1);
    let endMiddlePage = Math.min(currentPage + Math.floor(middlePagesCount / 2), totalPages - edgeButtons);
    // Adjust start and end pages if they exceed boundaries
    if (startMiddlePage === edgeButtons + 1) {
        endMiddlePage = startMiddlePage + middlePagesCount - 1;
    }
    else if (endMiddlePage === totalPages - edgeButtons) {
        startMiddlePage = endMiddlePage - middlePagesCount + 1;
    }
    // Add leading edge buttons
    for (let i = 1; i <= edgeButtons; i++) {
        pages.push(i);
    }
    if (startMiddlePage > edgeButtons + 1) {
        pages.push(PAGE_DOTS_VALUE);
    }
    // Add middle pages
    for (let i = startMiddlePage; i <= endMiddlePage; i++) {
        pages.push(i);
    }
    // Add trailing edge buttons
    if (endMiddlePage < totalPages - edgeButtons) {
        pages.push(PAGE_DOTS_VALUE);
    }
    for (let i = totalPages - edgeButtons + 1; i <= totalPages; i++) {
        pages.push(i);
    }
    return pages;
};
// eslint-disable-next-line complexity
const Pagination = ({ onPageChange, currentPage, totalPages, options = {
    maxVisibleLength: 11,
    edgeVisibleLength: 3,
}, }) => {
    if (totalPages <= 1)
        return null;
    const pages = generatePages(currentPage, totalPages, options);
    return (React.createElement("div", { className: "cobalt-pagination" },
        React.createElement(DefaultButton, { className: cx("cobalt-pagination__DefaultButton"), disabled: currentPage === 1, onClick: () => onPageChange(currentPage - 1), icon: "chevronLeft" }),
        pages.map((page, index) => page === PAGE_DOTS_VALUE ? (React.createElement(DotsHorizontalIcon, { key: `dots-${index}`, className: "cobalt-pagination__threeDots", color: "primary" })) : (React.createElement(PaginationButton, { key: page, currentPage: currentPage, pageNumber: page, onPageChange: onPageChange }))),
        React.createElement(DefaultButton, { className: cx("cobalt-pagination__DefaultButton"), disabled: currentPage === totalPages, onClick: () => onPageChange(currentPage + 1), icon: "chevronRight" })));
};

export { Pagination as default };
//# sourceMappingURL=index.js.map