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 } from '@material-ui/core';
   7 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
   8 import { withStyles } from '@material-ui/core';
   9 import { IconButton } from '@material-ui/core/es';
  10 import { PopoverOrigin } from '@material-ui/core/Popover';
  11
  12
  13 interface DropdownMenuDataProps {
  14     id: string,
  15     icon: React.ComponentType,
  16 }
  17
  18
  19 type DropdownMenuProps = DropdownMenuDataProps;
  20
  21 class DropdownMenu extends React.Component<DropdownMenuProps> {
  22
  23     state = {
  24         anchorEl: undefined
  25     }
  26
  27     transformOrigin: PopoverOrigin = {
  28         vertical: "top",
  29         horizontal: "center"
  30     }
  31
  32     render() {
  33         const { icon: Icon, id, children } = this.props;
  34         const { anchorEl } = this.state;
  35         return (
  36             <div>
  37                 <IconButton
  38                     aria-owns={anchorEl ? id : undefined}
  39                     aria-haspopup="true"
  40                     color="inherit"
  41                     onClick={this.handleOpen}
  42
  43                 >
  44                     <Icon />
  45                 </IconButton>
  46                 <Menu
  47                     id={id}
  48                     anchorEl={anchorEl}
  49                     open={Boolean(anchorEl)}
  50                     onClose={this.handleClose}
  51                     onClick={this.handleClose}
  52                     anchorOrigin={this.transformOrigin}
  53                     transformOrigin={this.transformOrigin}
  54                 >
  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 }
  69
  70
  71 export default DropdownMenu