18874: Add 'services/workbench2/' from commit 'f6f88d9ca9cdeeeebfadcfe999789bfb9f69e5c6'

[arvados.git] / services / workbench2 / src / components / dropdown-menu / dropdown-menu.tsx

diff --git a/services/workbench2/src/components/dropdown-menu/dropdown-menu.tsx b/services/workbench2/src/components/dropdown-menu/dropdown-menu.tsx
new file mode 100644 (file)
index 0000000..bb661bc
--- /dev/null
+++ b/services/workbench2/src/components/dropdown-menu/dropdown-menu.tsx
@@ -0,0 +1,65 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+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;
+}
+
+interface DropdownMenuState {
+    anchorEl: any;
+}
+
+export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMenuState> {
+    state = {
+        anchorEl: undefined
+    };
+
+    transformOrigin: PopoverOrigin = {
+        vertical: -50,
+        horizontal: 0
+    };
+
+    render() {
+        const { icon, id, children, title } = this.props;
+        const { anchorEl } = this.state;
+        return (
+            <div>
+                <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}
+                    transformOrigin={this.transformOrigin}>
+                    {children}
+                </Menu>
+            </div>
+        );
+    }
+
+    handleClose = () => {
+        this.setState({ anchorEl: undefined });
+    }
+
+    handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+        this.setState({ anchorEl: event.currentTarget });
+    }
+}