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