import React from 'react' ; import { Box , Checkbox , FormControl , Input , InputLabel , ListItemText , MenuItem , Select , createStyles , makeStyles , } from '@material-ui/core' ; import { useStatuses } from '../../../hooks' ; import { SelectorsProps } from '../../../types' ; const useStyles = makeStyles ( ( ) => createStyles ( { formControl : { minWidth : 150 , } , } ) ) ; const ITEM_HEIGHT = 48 ; const ITEM_PADDING_TOP = 8 ; const MenuProps = { PaperProps : { style : { maxHeight : ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP , width : 350 , } , } , } ; export const Selectors = ( { projectKey , statusesNames , setStatusesNames , fetchProjectInfo , } ) => { const classes = useStyles ( ) ; const { statuses , statusesLoading , statusesError } = useStatuses ( projectKey ) ; const handleStatusesChange = ( event ) => { setStatusesNames ( event . target . value as string [ ] ) ; } ; return ! statusesLoading && ! statusesError && statuses && statuses . length >= 2 ? ( < Box display = "flex" justifyContent = "flex-end" > < FormControl className = { classes . formControl } > < InputLabel id = "select-multiple-projects-statuses" > filter issue status < /InputLabel> < Select labelId = "select-statuses-label" id = "select-statuses" multiple value = { statusesNames } onChange = { handleStatusesChange } input = { < Input / > } renderValue = { selected => ( selected as Array < string > ) . filter ( Boolean ) . join ( ', ' ) } MenuProps = { MenuProps } onClose = { fetchProjectInfo } > { statuses . map ( status => ( < MenuItem key = { status } value = { status } > < Checkbox checked = { statusesNames . indexOf ( status ) > - 1 } / > < ListItemText primary = { status } / > < /MenuItem>))} < /Select> < /FormControl> < /Box>) : null; } ;