src/components/dropdown-menu/dropdown-menu.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import Menu from '@material-ui/core/Menu';
   7 import IconButton from '@material-ui/core/IconButton';
   8 import { PopoverOrigin } from '@material-ui/core/Popover';
   9
  10 interface DropdownMenuProps {
  11     id: string;
  12     icon: React.ReactElement<any>;
  13 }
  14
  15 class DropdownMenu extends React.Component<DropdownMenuProps> {
  16
  17     state = {
  18         anchorEl: undefined
  19     };
  20
  21     transformOrigin: PopoverOrigin = {
  22         vertical: "top",
  23         horizontal: "center"
  24     };
  25
  26     render() {
  27         const { icon, id, children } = this.props;
  28         const { anchorEl } = this.state;
  29         return (
  30             <div>
  31                 <IconButton
  32                     aria-owns={anchorEl ? id : undefined}
  33                     aria-haspopup="true"
  34                     color="inherit"
  35                     onClick={this.handleOpen}>
  36                     {icon}
  37                 </IconButton>
  38                 <Menu
  39                     id={id}
  40                     anchorEl={anchorEl}
  41                     open={Boolean(anchorEl)}
  42                     onClose={this.handleClose}
  43                     onClick={this.handleClose}
  44                     anchorOrigin={this.transformOrigin}
  45                     transformOrigin={this.transformOrigin}>
  46                     {children}
  47                 </Menu>
  48             </div>
  49         );
  50     }
  51
  52     handleClose = () => {
  53         this.setState({ anchorEl: undefined });
  54     }
  55
  56     handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
  57         this.setState({ anchorEl: event.currentTarget });
  58     }
  59 }
  60
  61
  62 export default DropdownMenu;