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 import IconBase, { IconTypes } from '../icon/icon';
  10
  11 interface DropdownMenuProps {
  12     id: string;
  13     icon: IconTypes;
  14 }
  15
  16 class DropdownMenu extends React.Component<DropdownMenuProps> {
  17
  18     state = {
  19         anchorEl: undefined
  20     };
  21
  22     transformOrigin: PopoverOrigin = {
  23         vertical: "top",
  24         horizontal: "center"
  25     };
  26
  27     render() {
  28         const { icon, id, children } = this.props;
  29         const { anchorEl } = this.state;
  30         return (
  31             <div>
  32                 <IconButton
  33                     aria-owns={anchorEl ? id : undefined}
  34                     aria-haspopup="true"
  35                     color="inherit"
  36                     onClick={this.handleOpen}>
  37                     <IconBase icon={icon} />
  38                 </IconButton>
  39                 <Menu
  40                     id={id}
  41                     anchorEl={anchorEl}
  42                     open={Boolean(anchorEl)}
  43                     onClose={this.handleClose}
  44                     onClick={this.handleClose}
  45                     anchorOrigin={this.transformOrigin}
  46                     transformOrigin={this.transformOrigin}
  47                 >
  48                     {children}
  49                 </Menu>
  50             </div>
  51         );
  52     }
  53
  54     handleClose = () => {
  55         this.setState({ anchorEl: undefined });
  56     }
  57
  58     handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
  59         this.setState({ anchorEl: event.currentTarget });
  60     }
  61 }
  62
  63
  64 export default DropdownMenu;