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