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

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

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * This returns an array of the range, including spacers
 *
 * @example
 * currentPage = 4, totalPages = 7, maxVisiblePages = 7
 * // returns [1, 2, 3, 4, 5, 6, 7]
 *
 * @example
 * currentPage = 5, totalPages = 100, maxVisiblePages = 7
 * // returns [1, 'firstSpacer', 4, 5, 6, 'lastSpacer', 100]
 *
 * @example
 * currentPage = 97, totalPages = 100, maxVisiblePages = 7
 * // returns [1, 'firstSpacer', 96, 97, 98, 99, 100]
 */
export function getRange(currentPage, totalPages, maxVisiblePages) {
    // the total amount of visible pages is whatever's lower, totalPages or maxVisiblePages
    // maxVisiblePages has a lower limit of 5
    const visiblePages = Math.min(totalPages, Math.max(maxVisiblePages, 5));
    const min = 1;
    // the center part of the range starts with the current page minus half of the visible pages
    let centerStartPage = currentPage - Math.floor(visiblePages / 2);
    // centerStartPage has a lower limit of 1
    centerStartPage = Math.max(centerStartPage, min);
    // centerStartPage has an upper limit of 1 plus total pages minus visible pages
    centerStartPage = Math.min(centerStartPage, min + totalPages - visiblePages);
    const pages = Array.from({ length: visiblePages }, (_el, i) => centerStartPage + i).reduce((acc, pageNr, index) => {
        if (index === 0 && pageNr !== 1) {
            return [1, 'firstSpacer'];
        }
        if (totalPages > visiblePages &&
            index === visiblePages - 2 &&
            currentPage < totalPages - Math.floor(visiblePages / 2)) {
            return [...acc, 'lastSpacer', totalPages];
        }
        // Skip a number when spacer is already added
        if (acc[index] === 'firstSpacer' || acc[index - 1] === 'lastSpacer') {
            return acc;
        }
        return [...acc, pageNr];
    }, []);
    return pages;
}