Merge commit '3b735dd9330e0989f51a76771c3303031154154e' into 21158-wf-page-list
[arvados.git] / 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 "@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 }