import MenuItem from "@material-ui/core/MenuItem" ; import Select from "@material-ui/core/Select" ; import clsx from "clsx" ; import React from "react" ; import useStyles from "./styles" ; export type PaginationRowNumberSelectLabels = Record < "noOfRows" , string > ; export interface PaginationRowNumberSelectProps { choices : number [ ] ; className ? : string ; disabled ? : boolean ; labels : PaginationRowNumberSelectLabels ; rowNumber : number ; onChange ? : ( value : number ) => void ; } export const PaginationRowNumberSelect = ( { className , choices , disabled , labels , rowNumber , onChange } ) => { const classes = useStyles ( { } ) ; return ( < div className = { clsx ( classes . rowNumber , className ) } > < span className = { classes . rowNumberLabel } > { labels . noOfRows } < /span> { onChange ? ( < Select data - test - id = "PaginationRowNumberSelect" disabled = { disabled } inputProps = { { className : classes . rowNumberSelectLabel } } className = { classes . rowNumberSelect } value = { rowNumber } onChange = { ( event ) => onChange ( event . target . value as number ) } > { choices . length > 0 && choices . map ( ( choice ) => ( < MenuItem value = { choice } key = { choice } data - test - id = "rowNumberOption" > { choice } < /MenuItem>))} < /Select>) : (` ${rowNumber}`)} < /div>); } ; PaginationRowNumberSelect . displayName = "PaginationRowNumberSelect" ;