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