import React from "react" ; import { DocRepoDropdownMenu } from "./DocRepoDropdownMenu" ; import IconButton from "@material-ui/core/IconButton" ; import grey from "@material-ui/core/colors/grey" ; import MoreVertIcon from "@material-ui/icons/MoreVert" ; import { Callback1 } from "polar-shared/src/util/Functions" ; import { deepMemo } from "../../../../web/js/react/ReactUtils" ; interface IProps { readonly onClick : Callback1 < React . MouseEvent > ; } interface IState { readonly anchorEl : HTMLElement | null ; } export const MUIDocDropdownButton = deepMemo ( function MUIDocDropdownButton ( props ) { const [ state , setState ] = React . useState < IState > ( { anchorEl : null } ) ; const handleClick = ( event ) => { props . onClick ( event ) ; setState ( { anchorEl : event . currentTarget } ) ; } ; const handleClose = ( ) => { setState ( { anchorEl : null } ) ; } ; const { anchorEl } = state ; return ( < div > < IconButton aria - controls = "doc-dropdown-menu" aria - haspopup = "true" color = "default" onClick = { handleClick } size = "small" style = { { color : grey [ 500 ] } } > < MoreVertIcon /> < /IconButton> { anchorEl && < DocRepoDropdownMenu anchorEl = { anchorEl } onClose = { handleClose } / > } < /div>); } ) ;