import React from "react" ; import { useTheme , makeStyles , Theme , createStyles , } from "@material-ui/core/styles" ; import IconButton from "@material-ui/core/IconButton" ; import FirstPageIcon from "@material-ui/icons/FirstPage" ; import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft" ; import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" ; import LastPageIcon from "@material-ui/icons/LastPage" ; const useStyles = makeStyles ( ( theme ) => createStyles ( { root : { flexShrink : 0 , marginLeft : theme . spacing ( 2.5 ) , } , } ) ) ; interface TablePaginationActionsProps { count : number ; page : number ; rowsPerPage : number ; onPageChange : ( event : React . MouseEvent < HTMLButtonElement > , newPage : number ) => void ; } function TablePaginationActions ( props ) { const classes = useStyles ( ) ; const theme = useTheme ( ) ; const { count , page , rowsPerPage , onPageChange } = props ; const handleFirstPageButtonClick = ( event ) => { onPageChange ( event , 0 ) ; } ; const handleBackButtonClick = ( event ) => { onPageChange ( event , page - 1 ) ; } ; const handleNextButtonClick = ( event ) => { onPageChange ( event , page + 1 ) ; } ; const handleLastPageButtonClick = ( event ) => { onPageChange ( event , Math . max ( 0 , Math . ceil ( count / rowsPerPage ) - 1 ) ) ; } ; return ( < div className = { classes . root } > < IconButton onClick = { handleFirstPageButtonClick } disabled = { page === 0 } aria - label = "first page" > { theme . direction === "rtl" ? < LastPageIcon /> : <FirstPageIcon / > } < /IconButton> < IconButton onClick = { handleBackButtonClick } disabled = { page === 0 } aria - label = "previous page" > { theme . direction === "rtl" ? ( < KeyboardArrowRight />) : (<KeyboardArrowLeft / > ) } < /IconButton> < IconButton onClick = { handleNextButtonClick } disabled = { page >= Math . ceil ( count / rowsPerPage ) - 1 } aria - label = "next page" > { theme . direction === "rtl" ? ( < KeyboardArrowLeft />) : (<KeyboardArrowRight / > ) } < /IconButton> < IconButton onClick = { handleLastPageButtonClick } disabled = { page >= Math . ceil ( count / rowsPerPage ) - 1 } aria - label = "last page" > { theme . direction === "rtl" ? < FirstPageIcon /> : <LastPageIcon / > } < /IconButton> < /div>); } export default TablePaginationActions ; export const rowsPerPageOptions = [ 10 , 20 , 30 , 60 , 100 ] ; export const defaultPageSize = 20 ;