-
-
Notifications
You must be signed in to change notification settings - Fork 5.2k
/
ListPaginationContext.tsx
98 lines (93 loc) · 2.96 KB
/
ListPaginationContext.tsx
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
import { createContext, useMemo } from 'react';
import pick from 'lodash/pick';
import { ListControllerResult } from './useListController';
/**
* Context to store the pagination part of the useListController() result.
*
* Use the useListPaginationContext() hook to read the pagination information.
* That's what List components do in react-admin (e.g. <Pagination>).
*
* @typedef {Object} ListPaginationContextValue
* @prop {boolean} isLoading boolean that is false until the data is available
* @prop {integer} total the total number of results for the current filters, excluding pagination. Useful to build the pagination controls. e.g. 23
* @prop {integer} page the current page. Starts at 1
* @prop {Function} setPage a callback to change the page, e.g. setPage(3)
* @prop {integer} perPage the number of results per page. Defaults to 25
* @prop {Function} setPerPage a callback to change the number of results per page, e.g. setPerPage(25)
* @prop {Boolean} hasPreviousPage true if the current page is not the first one
* @prop {Boolean} hasNextPage true if the current page is not the last one
* @prop {string} resource the resource name, deduced from the location. e.g. 'posts'
*
* @typedef Props
* @prop {ListPaginationContextValue} value
*
* @param {Props}
*
* @see useListController
* @see useListContext
*
* @example
*
* import { useListController, ListPaginationContext } from 'ra-core';
*
* const List = props => {
* const controllerProps = useListController(props);
* return (
* <ListPaginationContext.Provider value={controllerProps}>
* ...
* </ListPaginationContext.Provider>
* );
* };
*/
export const ListPaginationContext = createContext<ListPaginationContextValue>({
isLoading: null,
page: null,
perPage: null,
setPage: null,
setPerPage: null,
hasPreviousPage: null,
hasNextPage: null,
total: undefined,
resource: null,
});
ListPaginationContext.displayName = 'ListPaginationContext';
export type ListPaginationContextValue = Pick<
ListControllerResult,
| 'isLoading'
| 'hasPreviousPage'
| 'hasNextPage'
| 'page'
| 'perPage'
| 'setPage'
| 'setPerPage'
| 'total'
| 'resource'
>;
export const usePickPaginationContext = (
context: ListControllerResult
): ListPaginationContextValue =>
useMemo(
() =>
pick(context, [
'isLoading',
'hasPreviousPage',
'hasNextPage',
'page',
'perPage',
'setPage',
'setPerPage',
'total',
'resource',
]),
// eslint-disable-next-line react-hooks/exhaustive-deps
[
context.isLoading,
context.hasPreviousPage,
context.hasNextPage,
context.page,
context.perPage,
context.setPage,
context.setPerPage,
context.total,
]
);