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, IconButton } from '@material-ui/core';
   7 import { PopoverOrigin } from '@material-ui/core/Popover';
   8
   9
  10 interface DropdownMenuProps {
  11     id: string;
  12     icon: React.ComponentType;
  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: 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
  37                 >
  38                     <Icon />
  39                 </IconButton>
  40                 <Menu
  41                     id={id}
  42                     anchorEl={anchorEl}
  43                     open={Boolean(anchorEl)}
  44                     onClose={this.handleClose}
  45                     onClick={this.handleClose}
  46                     anchorOrigin={this.transformOrigin}
  47                     transformOrigin={this.transformOrigin}
  48                 >
  49                     {children}
  50                 </Menu>
  51             </div>
  52         );
  53     }
  54
  55     handleClose = () => {
  56         this.setState({ anchorEl: undefined });
  57     }
  58
  59     handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
  60         this.setState({ anchorEl: event.currentTarget });
  61     }
  62 }
  63
  64
  65 export default DropdownMenu;