@vertisanpro/flowbite-react/lib/src/components/Pagination/Pagination.js

Non-Official React components built for Flowbite and Tailwind CSS

import { HiChevronLeft, HiChevronRight } from '@vertisanpro/react-icons/hi';
import { twMerge } from '@vertisanpro/tailwind-merge';
import React from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { getTheme } from '../../theme-store';
import { PaginationButton, PaginationNavigation } from './PaginationButton';
import { range } from './helpers';
const PaginationComponent = ({ className, currentPage, layout = 'pagination', nextLabel = 'Next', onPageChange, previousLabel = 'Previous', renderPaginationButton = (props) => React.createElement(PaginationButton, { ...props }), showIcons: showIcon = false, theme: customTheme = {}, totalPages, ...props }) => {
    const theme = mergeDeep(getTheme().pagination, customTheme);
    const lastPage = Math.min(Math.max(layout === 'pagination' ? currentPage + 2 : currentPage + 4, 5), totalPages);
    const firstPage = Math.max(1, lastPage - 4);
    const goToNextPage = () => {
        onPageChange(Math.min(currentPage + 1, totalPages));
    };
    const goToPreviousPage = () => {
        onPageChange(Math.max(currentPage - 1, 1));
    };
    return (React.createElement("nav", { className: twMerge(theme.base, className), ...props },
        layout === 'table' && (React.createElement("div", { className: theme.layout.table.base },
            "Showing ",
            React.createElement("span", { className: theme.layout.table.span }, firstPage),
            " to\u00A0",
            React.createElement("span", { className: theme.layout.table.span }, lastPage),
            " of\u00A0",
            React.createElement("span", { className: theme.layout.table.span }, totalPages),
            " Entries")),
        React.createElement("ul", { className: theme.pages.base },
            React.createElement("li", null,
                React.createElement(PaginationNavigation, { className: twMerge(theme.pages.previous.base, showIcon && theme.pages.showIcon), onClick: goToPreviousPage, disabled: currentPage === 1 },
                    showIcon && React.createElement(HiChevronLeft, { "aria-hidden": true, className: theme.pages.previous.icon }),
                    previousLabel)),
            layout === 'pagination' &&
                range(firstPage, lastPage).map((page) => (React.createElement("li", { "aria-current": page === currentPage ? 'page' : undefined, key: page }, renderPaginationButton({
                    className: twMerge(theme.pages.selector.base, currentPage === page && theme.pages.selector.active),
                    active: page === currentPage,
                    onClick: () => onPageChange(page),
                    children: page,
                })))),
            React.createElement("li", null,
                React.createElement(PaginationNavigation, { className: twMerge(theme.pages.next.base, showIcon && theme.pages.showIcon), onClick: goToNextPage, disabled: currentPage === totalPages },
                    nextLabel,
                    showIcon && React.createElement(HiChevronRight, { "aria-hidden": true, className: theme.pages.next.icon }))))));
};
PaginationComponent.displayName = 'Pagination';
export const Pagination = Object.assign(PaginationComponent, {
    Button: PaginationButton,
});