@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
46 lines (45 loc) • 1.89 kB
JavaScript
/**
* @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 - 2) {
return [...acc, 'lastSpacer', totalPages];
}
// Skip a number when spacer is already added
if ((acc.includes('firstSpacer') && index === 1) || (acc.includes('lastSpacer') && index === visiblePages - 1)) {
return acc;
}
return [...acc, pageNr];
}, []);
return pages;
}