react-responsive-pagination/dist/paginationItem.js

React component for responsive pagination

import { preventDefault } from "./helpers/dom.js";
export const compositionToPaginationItems = (compositionItems, { handlePageChange, previousLabel, nextLabel, ariaPreviousLabel, ariaNextLabel, ariaPageLabel, ariaCurrentAttr, linkHref, }) => compositionItems.map(({ type, page }) => {
    switch (type) {
        case '<':
        case '>': {
            const fullType = type === '<' ? 'previous' : 'next';
            const label = type === '<' ? previousLabel : nextLabel;
            const optionsAriaLabel = type === '<' ? ariaPreviousLabel : ariaNextLabel;
            const ariaLabel = optionsAriaLabel === label ? undefined : optionsAriaLabel;
            return {
                type: fullType,
                key: `${fullType}${page === undefined ? '_disabled' : ''}`,
                label,
                a11yLabel: ariaLabel,
                ...(page === undefined
                    ? {
                        anchorProps: {
                            'aria-label': ariaLabel,
                            'aria-disabled': 'true',
                            role: 'link',
                        },
                        spanAsAnchorProps: {
                            'aria-label': ariaLabel,
                            'aria-disabled': 'true',
                            role: 'link',
                        },
                        buttonProps: {
                            'aria-label': ariaLabel,
                            disabled: true,
                        },
                    }
                    : {
                        gotoPage: page,
                        anchorProps: {
                            href: getHref(linkHref, page),
                            onClick: handlePageChange && preventDefault(() => handlePageChange(page)),
                            'aria-label': ariaLabel,
                        },
                        buttonProps: {
                            onClick: handlePageChange && (() => handlePageChange(page)),
                            'aria-label': ariaLabel,
                        },
                    }),
            };
        }
        case '…L':
        case '…R':
            return {
                type: 'ellipsis',
                key: `ellipsis_${type === '…L' ? 'l' : 'r'}`,
                label: '…',
                listItemProps: { 'aria-hidden': 'true' },
                gotoPage: undefined,
            };
        default: {
            const ariaLabel = ariaPageLabel?.(page, type === 'active');
            return {
                type: 'page',
                key: `${type}_${page}`,
                label: page.toString(),
                a11yLabel: ariaLabel,
                gotoPage: page,
                active: type === 'active',
                listItemProps: type === 'active' && ariaCurrentAttr
                    ? { 'aria-current': 'page' }
                    : undefined,
                anchorProps: {
                    href: getHref(linkHref, page),
                    onClick: handlePageChange && preventDefault(() => handlePageChange(page)),
                    'aria-label': ariaLabel,
                },
            };
        }
    }
});
function getHref(linkHref, page) {
    if (typeof linkHref === 'function') {
        return linkHref(page);
    }
    else if (linkHref === 'hash') {
        return '#';
    }
    else {
        return undefined;
    }
}