1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
type UsePaginationProps = {
currentPage: number;
totalPages: number;
paginationItemsToDisplay: number;
};
type UsePaginationReturn = {
pages: number[];
showLeftEllipsis: boolean;
showRightEllipsis: boolean;
};
export function usePagination({
currentPage,
totalPages,
paginationItemsToDisplay,
}: UsePaginationProps): UsePaginationReturn {
const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;
const showRightEllipsis =
totalPages - currentPage + 1 > paginationItemsToDisplay / 2;
function calculatePaginationRange(): number[] {
if (totalPages <= paginationItemsToDisplay) {
return Array.from({ length: totalPages }, (_, i) => i + 1);
}
const halfDisplay = Math.floor(paginationItemsToDisplay / 2);
const initialRange = {
start: currentPage - halfDisplay,
end: currentPage + halfDisplay,
};
const adjustedRange = {
start: Math.max(1, initialRange.start),
end: Math.min(totalPages, initialRange.end),
};
if (adjustedRange.start === 1) {
adjustedRange.end = paginationItemsToDisplay;
}
if (adjustedRange.end === totalPages) {
adjustedRange.start = totalPages - paginationItemsToDisplay + 1;
}
if (showLeftEllipsis) adjustedRange.start++;
if (showRightEllipsis) adjustedRange.end--;
return Array.from(
{ length: adjustedRange.end - adjustedRange.start + 1 },
(_, i) => adjustedRange.start + i,
);
}
const pages = calculatePaginationRange();
return {
pages,
showLeftEllipsis,
showRightEllipsis,
};
}
|
