@amsterdam/design-system-react/dist/Pagination/Pagination.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import { ChevronBackwardIcon, ChevronForwardIcon } from '@amsterdam/design-system-react-icons';
import clsx from 'clsx';
import { forwardRef } from 'react';
import { LinkItem } from './LinkItem';
import { Spacer } from './Spacer';
import { getRange } from './getRange';
import { Icon } from '../Icon/Icon';
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-pagination--docs Pagination docs at Amsterdam Design System}
 */
export const Pagination = forwardRef(({ className, linkComponent = (props) => _jsx("a", { ...props }), linkTemplate, maxVisiblePages = 7, nextLabel = 'volgende', nextVisuallyHiddenLabel = 'Volgende pagina', page = 1, previousLabel = 'vorige', previousVisuallyHiddenLabel = 'Vorige pagina', totalPages, visuallyHiddenLabel = 'Paginering', visuallyHiddenLabelId = 'ams-pagination-a11y-label', ...restProps }, ref) => {
    // Don't show pagination if you only have one page
    if (totalPages <= 1) {
        return null;
    }
    const Link = linkComponent;
    // Get array of page numbers and / or spacers
    const range = getRange(page, totalPages, maxVisiblePages);
    return (_jsxs("nav", { ...restProps, "aria-labelledby": visuallyHiddenLabelId, className: clsx('ams-pagination', className), ref: ref, children: [_jsx("span", { className: "ams-visually-hidden", id: visuallyHiddenLabelId, children: visuallyHiddenLabel }), page !== 1 && (_jsxs(Link, { className: "ams-pagination__link", href: linkTemplate(page - 1), rel: "prev", children: [_jsx(Icon, { svg: ChevronBackwardIcon }), _jsx("span", { className: "ams-visually-hidden", children: previousVisuallyHiddenLabel }), _jsx("span", { "aria-hidden": true, children: previousLabel })] })), _jsx("ol", { className: "ams-pagination__list", children: range.map((pageNumberOrSpacer) => typeof pageNumberOrSpacer === 'number' ? (_jsx(LinkItem, { currentPage: page, linkComponent: linkComponent, linkTemplate: linkTemplate, pageNumber: pageNumberOrSpacer }, pageNumberOrSpacer)) : (_jsx(Spacer, {}, pageNumberOrSpacer))) }), page !== totalPages && (_jsxs(Link, { className: "ams-pagination__link", href: linkTemplate(page + 1), rel: "next", children: [_jsx("span", { className: "ams-visually-hidden", children: nextVisuallyHiddenLabel }), _jsx("span", { "aria-hidden": true, children: nextLabel }), _jsx(Icon, { svg: ChevronForwardIcon })] }))] }));
});
Pagination.displayName = 'Pagination';