aswi2022code-of-duty-gitlab/frontend/src/features/Reusables/TableNavigation.tsx @ 8c57f958

import { KeyboardArrowLeft, KeyboardArrowRight } from '@mui/icons-material'
import { Box, IconButton, useTheme } from '@mui/material'
import FirstPageIcon from '@mui/icons-material/FirstPage'
import LastPageIcon from '@mui/icons-material/LastPage'

// Props for the pagination
export interface TablePaginationActionsProps {
    count: number
    page: number
    rowsPerPage: number
    onPageChange: (
        event: React.MouseEvent<HTMLButtonElement>,
        newPage: number
    ) => void
}

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

    const theme = useTheme()

    const onFirstPageButtonClick = (
        event: React.MouseEvent<HTMLButtonElement>
    ) => onPageChange(event, 0)
    const onPreviousPageButtonClick = (
        event: React.MouseEvent<HTMLButtonElement>
    ) => onPageChange(event, page - 1)
    const onNextPageButtonClick = (
        event: React.MouseEvent<HTMLButtonElement>
    ) => onPageChange(event, page + 1)
    const onLastPageButtonClick = (
        event: React.MouseEvent<HTMLButtonElement>
    ) => onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))

    return (
        <Box sx={{ flexShrink: 0, ml: 2.5 }}>
            <IconButton
                onClick={onFirstPageButtonClick}
                disabled={page === 0}
                aria-label="first page"
            >
                {theme.direction === 'rtl' ? (
                    <LastPageIcon />
                ) : (
                    <FirstPageIcon />
                )}
            </IconButton>
            <IconButton
                onClick={onPreviousPageButtonClick}
                disabled={page === 0}
                aria-label="previous page"
            >
                {theme.direction === 'rtl' ? (
                    <KeyboardArrowRight />
                ) : (
                    <KeyboardArrowLeft />
                )}
            </IconButton>
            <IconButton
                onClick={onNextPageButtonClick}
                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
                aria-label="next page"
            >
                {theme.direction === 'rtl' ? (
                    <KeyboardArrowLeft />
                ) : (
                    <KeyboardArrowRight />
                )}
            </IconButton>
            <IconButton
                onClick={onLastPageButtonClick}
                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
                aria-label="last page"
            >
                {theme.direction === 'rtl' ? (
                    <FirstPageIcon />
                ) : (
                    <LastPageIcon />
                )}
            </IconButton>
        </Box>
    )
}

export default TablePaginationActions