import ButtonBase from "@material-ui/core/ButtonBase" ; import ChevronLeft from "@material-ui/icons/ChevronLeft" ; import ChevronRight from "@material-ui/icons/ChevronRight" ; import clsx from "clsx" ; import React from "react" ; import { useTheme } from "../theme" ; import useStyles from "./styles" ; export interface PaginationActionsProps { className ? : string ; disabled ? : boolean ; hasNextPage : boolean ; hasPreviousPage : boolean ; nextIconButtonProps ? : any ; onNextPage : ( ) => void ; onPreviousPage : ( ) => void ; } export const PaginationActions = ( { className , disabled , hasNextPage , hasPreviousPage , nextIconButtonProps , onNextPage , onPreviousPage , ... other } ) => { const classes = useStyles ( ) ; const { direction , themeType } = useTheme ( ) ; const isDark = themeType === "dark" ; const previousDisabled = ! hasPreviousPage || disabled ; const nextDisabled = ! hasNextPage || disabled ; return ( < div className = { clsx ( classes . actions , className ) } { ... other } > < ButtonBase className = { clsx ( classes . actionsButton , { [ classes . dark ] : isDark , [ classes . actionsButtonDisabled ] : previousDisabled } ) } disableRipple onClick = { onPreviousPage } disabled = { previousDisabled } data - test = "button-pagination-back" aria - label = "previous page" > { direction === "rtl" ? < ChevronRight /> : <ChevronLeft / > } < /ButtonBase> < ButtonBase className = { clsx ( classes . actionsButton , { [ classes . dark ] : isDark , [ classes . actionsButtonDisabled ] : nextDisabled } ) } disableRipple onClick = { onNextPage } disabled = { nextDisabled } data - test = "button-pagination-next" aria - label = "next page" { ... nextIconButtonProps } > { direction === "rtl" ? < ChevronLeft /> : <ChevronRight / > } < /ButtonBase> < /div>); } ; PaginationActions . displayName = "PaginationActions" ;