X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/e5b901f7d6f87b56f43d3dbe002c9c90a3d41349..f9dea751e6f0143195a7b5614217ec04c94376bd:/src/components/dropdown-menu/dropdown-menu.tsx diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx index 4f2b83af65..e346eb8406 100644 --- a/src/components/dropdown-menu/dropdown-menu.tsx +++ b/src/components/dropdown-menu/dropdown-menu.tsx @@ -3,28 +3,31 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { Menu, IconButton } from '@material-ui/core'; +import Menu from '@material-ui/core/Menu'; +import IconButton from '@material-ui/core/IconButton'; import { PopoverOrigin } from '@material-ui/core/Popover'; - interface DropdownMenuProps { id: string; - icon: React.ComponentType; + icon: React.ReactElement; } -class DropdownMenu extends React.Component { +interface DropdownMenuState { + anchorEl: any; +} +export class DropdownMenu extends React.Component { state = { anchorEl: undefined }; transformOrigin: PopoverOrigin = { - vertical: "top", - horizontal: "center" + vertical: -50, + horizontal: 0 }; render() { - const { icon: Icon, id, children } = this.props; + const { icon, id, children } = this.props; const { anchorEl } = this.state; return (
@@ -32,10 +35,8 @@ class DropdownMenu extends React.Component { aria-owns={anchorEl ? id : undefined} aria-haspopup="true" color="inherit" - onClick={this.handleOpen} - - > - + onClick={this.handleOpen}> + {icon} { open={Boolean(anchorEl)} onClose={this.handleClose} onClick={this.handleClose} - anchorOrigin={this.transformOrigin} - transformOrigin={this.transformOrigin} - > + transformOrigin={this.transformOrigin}> {children}
@@ -60,6 +59,3 @@ class DropdownMenu extends React.Component { this.setState({ anchorEl: event.currentTarget }); } } - - -export default DropdownMenu;