This repository has been archived by the owner on Nov 23, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 27
/
Paginator.tsx
79 lines (70 loc) · 2.45 KB
/
Paginator.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
import makeStyles from '@material-ui/core/styles/makeStyles';
import TablePagination from '@material-ui/core/TablePagination';
import * as React from 'react';
import { ITbTableInstance } from 'tubular-react-common';
import { useResolutionSwitch } from 'uno-react';
import { AdvancePaginationActions } from './AdvancePaginationActions';
const useStyles = makeStyles({
caption: {
flexShrink: 1,
height: '55px',
},
root: {
height: '75px',
maxWidth: '95%',
},
});
const outerWidth = 800;
const timeout = 400;
const message = (totalRecordCount: number, filteredRecordCount: number) => ({ from, to, count }: any) =>
totalRecordCount === filteredRecordCount
? `${from}-${to} of ${count}`
: filteredRecordCount === 0
? '0 records found'
: `${from} to ${to} of ${count} from ${totalRecordCount} records`;
interface IPaginatorProps {
tbTableInstance: ITbTableInstance;
rowsPerPageOptions: number[];
advancePagination: boolean;
}
export const Paginator: React.FunctionComponent<IPaginatorProps> = ({
tbTableInstance,
rowsPerPageOptions,
advancePagination,
}: IPaginatorProps) => {
const [isMobileResolution] = useResolutionSwitch(outerWidth, timeout);
const classes = useStyles({});
const { state, api } = tbTableInstance;
if (!state.itemsPerPage) {
return null;
}
const newProps = {
count: state.filteredRecordCount,
labelDisplayedRows: message(state.totalRecordCount, state.filteredRecordCount),
onChangePage: (e: any, page: number) => api.goToPage(page),
onChangeRowsPerPage: (e: any) => api.updateItemPerPage(Number(e.target.value)),
page: state.filteredRecordCount > 0 ? state.page : 0,
rowsPerPage: state.itemsPerPage,
rowsPerPageOptions: rowsPerPageOptions || [10, 20, 50],
} as any;
// eslint-disable-next-line react/display-name
newProps.ActionsComponent = () => (
<AdvancePaginationActions
count={newProps.count}
isAdvanced={advancePagination}
isLoading={newProps.isLoading}
onChangePage={newProps.onChangePage}
page={newProps.page}
rowsPerPage={newProps.rowsPerPage}
/>
);
return (
<TablePagination
classes={{
caption: isMobileResolution && classes.caption,
root: classes.root,
}}
{...newProps}
/>
);
};