Projekt

Obecné

Profil

Stáhnout (2.79 KB) Statistiky
| Větev: | Tag: | Revize:
1
import { KeyboardArrowLeft, KeyboardArrowRight } from '@mui/icons-material'
2
import { Box, IconButton, useTheme } from '@mui/material'
3
import FirstPageIcon from '@mui/icons-material/FirstPage'
4
import LastPageIcon from '@mui/icons-material/LastPage'
5

    
6
// Props for the pagination
7
export interface TablePaginationActionsProps {
8
    count: number
9
    page: number
10
    rowsPerPage: number
11
    onPageChange: (
12
        event: React.MouseEvent<HTMLButtonElement>,
13
        newPage: number
14
    ) => void
15
}
16

    
17
// Actions that can be performed
18
const TablePaginationActions = (props: TablePaginationActionsProps) => {
19
    const { count, page, rowsPerPage, onPageChange } = props
20

    
21
    const theme = useTheme()
22

    
23
    const onFirstPageButtonClick = (
24
        event: React.MouseEvent<HTMLButtonElement>
25
    ) => onPageChange(event, 0)
26
    const onPreviousPageButtonClick = (
27
        event: React.MouseEvent<HTMLButtonElement>
28
    ) => onPageChange(event, page - 1)
29
    const onNextPageButtonClick = (
30
        event: React.MouseEvent<HTMLButtonElement>
31
    ) => onPageChange(event, page + 1)
32
    const onLastPageButtonClick = (
33
        event: React.MouseEvent<HTMLButtonElement>
34
    ) => onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
35

    
36
    return (
37
        <Box sx={{ flexShrink: 0, ml: 2.5 }}>
38
            <IconButton
39
                onClick={onFirstPageButtonClick}
40
                disabled={page === 0}
41
                aria-label="first page"
42
            >
43
                {theme.direction === 'rtl' ? (
44
                    <LastPageIcon />
45
                ) : (
46
                    <FirstPageIcon />
47
                )}
48
            </IconButton>
49
            <IconButton
50
                onClick={onPreviousPageButtonClick}
51
                disabled={page === 0}
52
                aria-label="previous page"
53
            >
54
                {theme.direction === 'rtl' ? (
55
                    <KeyboardArrowRight />
56
                ) : (
57
                    <KeyboardArrowLeft />
58
                )}
59
            </IconButton>
60
            <IconButton
61
                onClick={onNextPageButtonClick}
62
                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
63
                aria-label="next page"
64
            >
65
                {theme.direction === 'rtl' ? (
66
                    <KeyboardArrowLeft />
67
                ) : (
68
                    <KeyboardArrowRight />
69
                )}
70
            </IconButton>
71
            <IconButton
72
                onClick={onLastPageButtonClick}
73
                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
74
                aria-label="last page"
75
            >
76
                {theme.direction === 'rtl' ? (
77
                    <FirstPageIcon />
78
                ) : (
79
                    <LastPageIcon />
80
                )}
81
            </IconButton>
82
        </Box>
83
    )
84
}
85

    
86
export default TablePaginationActions
(4-4/4)