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
  37                     title={title}
  38                     disableFocusListener>
  39                     <IconButton
  40                         aria-owns={anchorEl ? id : undefined}
  41                         aria-haspopup="true"
  42                         color="inherit"
  43                         onClick={this.handleOpen}>
  44                         {icon}
  45                     </IconButton>
  46                 </Tooltip>
  47                 <Menu
  48                     id={id}
  49                     anchorEl={anchorEl}
  50                     open={Boolean(anchorEl)}
  51                     onClose={this.handleClose}
  52                     onClick={this.handleClose}
  53                     transformOrigin={this.transformOrigin}>
  54                     {children}
  55                 </Menu>
  56             </div>
  57         );
  58     }
  59
  60     handleClose = () => {
  61         this.setState({ anchorEl: undefined });
  62     };
  63
  64     handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
  65         this.setState({ anchorEl: event.currentTarget });
  66     };
  67 }