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