Merge branch '21128-toolbar-context-menu'

[arvados-workbench2.git] / 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 98c29c6416af047554c103bfba0ef8eb3f61a7d1..39cce0483496237bbd65202e6da4955836c8b687 100644 (file)
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -2,46 +2,54 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
-import Menu from '@material-ui/core/Menu';
-import IconButton from '@material-ui/core/IconButton';
-import { PopoverOrigin } from '@material-ui/core/Popover';
+import React from "react";
+import Menu from "@material-ui/core/Menu";
+import IconButton from "@material-ui/core/IconButton";
+import { PopoverOrigin } from "@material-ui/core/Popover";
+import { Tooltip } from "@material-ui/core";
 
 interface DropdownMenuProps {
     id: string;
     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
+        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}>
-                    {icon}
-                </IconButton>
+                <Tooltip
+                    title={title}
+                    disableFocusListener>
+                    <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}>
                     {children}
                 </Menu>
@@ -51,12 +59,9 @@ class DropdownMenu extends React.Component<DropdownMenuProps> {
 
     handleClose = () => {
         this.setState({ anchorEl: undefined });
-    }
+    };
 
     handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
         this.setState({ anchorEl: event.currentTarget });
-    }
+    };
 }
-
-
-export default DropdownMenu;