import ClickAwayListener from "@material-ui/core/ClickAwayListener" ; import MenuItem from "@material-ui/core/MenuItem" ; import Paper from "@material-ui/core/Paper" ; import Popper from "@material-ui/core/Popper" ; import Typography from "@material-ui/core/Typography" ; import React from "react" ; import { useFilters } from "./context" ; import useStyles from "./styles" ; import { getAvailableFilters } from "./utils" ; export type FilterMenuLabels = Record < "header" , string > ; export interface FilterMenuProps { anchorEl : HTMLElement | null ; labels : FilterMenuLabels ; open : boolean ; onClose : ( ) => void ; } export const FilterMenu = ( { anchorEl , labels , open , onClose , } ) => { const classes = useStyles ( ) ; const { filters , toggle } = useFilters ( ) ; const availableFilters = getAvailableFilters ( filters ) ; const handleFilterClick = ( filterName ) => { toggle ( filterName ) ; onClose ( ) ; } ; return ( < Popper anchorEl = { anchorEl } open = { open } disablePortal placement = "bottom-start" > < ClickAwayListener onClickAway = { onClose } > < Paper elevation = { 20 } className = { classes . menuPaper } > < div className = { classes . menuContent } > < Typography className = { classes . menuHeader } color = "textSecondary" variant = "caption" > { labels . header } < /Typography> < /div> { availableFilters . map ( ( filter ) => ( < MenuItem key = { filter . name } onClick = { ( ) => handleFilterClick ( filter . name ) } > { filter . label } < /MenuItem>))} < /Paper> < /ClickAwayListener> < /Popper>); } ; FilterMenu . displayName = "FilterMenu" ;