import Menu from '@material-ui/core/Menu';
import IconButton from '@material-ui/core/IconButton';
import { PopoverOrigin } from '@material-ui/core/Popover';
-import IconBase, { IconTypes } from '../icon/icon';
+import { Tooltip } from '@material-ui/core';
interface DropdownMenuProps {
id: string;
- icon: IconTypes;
+ icon: React.ReactElement<any>;
+ title: string;
}
-class DropdownMenu extends React.Component<DropdownMenuProps> {
+interface DropdownMenuState {
+ anchorEl: any;
+}
+export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMenuState> {
state = {
anchorEl: undefined
};
transformOrigin: PopoverOrigin = {
- vertical: "top",
- horizontal: "center"
+ vertical: -50,
+ horizontal: 0
};
render() {
- const { icon, id, children } = this.props;
+ const { icon, id, children, title } = this.props;
const { anchorEl } = this.state;
return (
<div>
- <IconButton
- aria-owns={anchorEl ? id : undefined}
- aria-haspopup="true"
- color="inherit"
- onClick={this.handleOpen}>
- <IconBase icon={icon} />
- </IconButton>
+ <Tooltip title={title}>
+ <IconButton
+ aria-owns={anchorEl ? id : undefined}
+ aria-haspopup="true"
+ color="inherit"
+ onClick={this.handleOpen}>
+ {icon}
+ </IconButton>
+ </Tooltip>
<Menu
id={id}
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
onClick={this.handleClose}
- anchorOrigin={this.transformOrigin}
- transformOrigin={this.transformOrigin}
- >
+ transformOrigin={this.transformOrigin}>
{children}
</Menu>
</div>
this.setState({ anchorEl: event.currentTarget });
}
}
-
-
-export default DropdownMenu;