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 interface DropdownMenuState {
  16     anchorEl: any;
  17 }
  18
  19 export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMenuState> {
  20     state = {
  21         anchorEl: undefined
  22     };
  23
  24     transformOrigin: PopoverOrigin = {
  25         vertical: "top",
  26         horizontal: "center"
  27     };
  28
  29     render() {
  30         const { icon, id, children } = this.props;
  31         const { anchorEl } = this.state;
  32         return (
  33             <div>
  34                 <IconButton
  35                     aria-owns={anchorEl ? id : undefined}
  36                     aria-haspopup="true"
  37                     color="inherit"
  38                     onClick={this.handleOpen}>
  39                     {icon}
  40                 </IconButton>
  41                 <Menu
  42                     id={id}
  43                     anchorEl={anchorEl}
  44                     open={Boolean(anchorEl)}
  45                     onClose={this.handleClose}
  46                     onClick={this.handleClose}
  47                     anchorOrigin={this.transformOrigin}
  48                     transformOrigin={this.transformOrigin}>
  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 }