services/workbench2/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 "@mui/material/Menu";
   7 import IconButton from "@mui/material/IconButton";
   8 import { PopoverOrigin } from "@mui/material/Popover";
   9 import { Tooltip } from "@mui/material";
  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                         size="large">
  45                         {icon}
  46                     </IconButton>
  47                 </Tooltip>
  48                 <Menu
  49                     id={id}
  50                     anchorEl={anchorEl}
  51                     open={Boolean(anchorEl)}
  52                     onClose={this.handleClose}
  53                     onClick={this.handleClose}
  54                     transformOrigin={this.transformOrigin}>
  55                     {children}
  56                 </Menu>
  57             </div>
  58         );
  59     }
  60
  61     handleClose = () => {
  62         this.setState({ anchorEl: undefined });
  63     };
  64
  65     handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
  66         this.setState({ anchorEl: event.currentTarget });
  67     };
  68 }