usePagination.js
3.36 KB
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
'use client';
import useControlled from '@mui/utils/useControlled';
export default function usePagination(props = {}) {
// keep default values in sync with @default tags in Pagination.propTypes
const {
boundaryCount = 1,
componentName = 'usePagination',
count = 1,
defaultPage = 1,
disabled = false,
hideNextButton = false,
hidePrevButton = false,
onChange: handleChange,
page: pageProp,
showFirstButton = false,
showLastButton = false,
siblingCount = 1,
...other
} = props;
const [page, setPageState] = useControlled({
controlled: pageProp,
default: defaultPage,
name: componentName,
state: 'page'
});
const handleClick = (event, value) => {
if (!pageProp) {
setPageState(value);
}
if (handleChange) {
handleChange(event, value);
}
};
// https://dev.to/namirsab/comment/2050
const range = (start, end) => {
const length = end - start + 1;
return Array.from({
length
}, (_, i) => start + i);
};
const startPages = range(1, Math.min(boundaryCount, count));
const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
const siblingsStart = Math.max(Math.min(
// Natural start
page - siblingCount,
// Lower boundary when page is high
count - boundaryCount - siblingCount * 2 - 1),
// Greater than startPages
boundaryCount + 2);
const siblingsEnd = Math.min(Math.max(
// Natural end
page + siblingCount,
// Upper boundary when page is low
boundaryCount + siblingCount * 2 + 2),
// Less than endPages
count - boundaryCount - 1);
// Basic list of items to render
// for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
const itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages,
// Start ellipsis
// eslint-disable-next-line no-nested-ternary
...(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : []),
// Sibling pages
...range(siblingsStart, siblingsEnd),
// End ellipsis
// eslint-disable-next-line no-nested-ternary
...(siblingsEnd < count - boundaryCount - 1 ? ['end-ellipsis'] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : []), ...endPages, ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : [])];
// Map the button type to its page number
const buttonPage = type => {
switch (type) {
case 'first':
return 1;
case 'previous':
return page - 1;
case 'next':
return page + 1;
case 'last':
return count;
default:
return null;
}
};
// Convert the basic item list to PaginationItem props objects
const items = itemList.map(item => {
return typeof item === 'number' ? {
onClick: event => {
handleClick(event, item);
},
type: 'page',
page: item,
selected: item === page,
disabled,
'aria-current': item === page ? 'page' : undefined
} : {
onClick: event => {
handleClick(event, buttonPage(item));
},
type: item,
page: buttonPage(item),
selected: false,
disabled: disabled || !item.includes('ellipsis') && (item === 'next' || item === 'last' ? page >= count : page <= 1)
};
});
return {
items,
...other
};
}