src/components/main-app-bar/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 { Button, Grid, StyleRulesCallback, WithStyles, Menu, MenuItem, IconButton } from '@material-ui/core';
   7 import { PopoverOrigin } from '@material-ui/core/Popover';
   8
   9
  10 interface DropdownMenuDataProps {
  11     id: string,
  12     icon: React.ComponentType,
  13 }
  14
  15
  16 type DropdownMenuProps = DropdownMenuDataProps;
  17
  18 class DropdownMenu extends React.Component<DropdownMenuProps> {
  19
  20     state = {
  21         anchorEl: undefined
  22     }
  23
  24     transformOrigin: PopoverOrigin = {
  25         vertical: "top",
  26         horizontal: "center"
  27     }
  28
  29     render() {
  30         const { icon: 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
  40                 >
  41                     <Icon />
  42                 </IconButton>
  43                 <Menu
  44                     id={id}
  45                     anchorEl={anchorEl}
  46                     open={Boolean(anchorEl)}
  47                     onClose={this.handleClose}
  48                     onClick={this.handleClose}
  49                     anchorOrigin={this.transformOrigin}
  50                     transformOrigin={this.transformOrigin}
  51                 >
  52                     {children}
  53                 </Menu>
  54             </div>
  55         )
  56     }
  57
  58     handleClose = () => {
  59         this.setState({ anchorEl: undefined })
  60     }
  61
  62     handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
  63         this.setState({ anchorEl: event.currentTarget })
  64     }
  65 }
  66
  67
  68 export default DropdownMenu