Added collection service, reorganized components structure

[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
new file mode 100644 (file)
index 0000000..4f2b83a
--- /dev/null
+++ b/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 * as React from 'react';
+import { Menu, IconButton } from '@material-ui/core';
+import { PopoverOrigin } from '@material-ui/core/Popover';
+
+
+interface DropdownMenuProps {
+    id: string;
+    icon: React.ComponentType;
+}
+
+class DropdownMenu extends React.Component<DropdownMenuProps> {
+
+    state = {
+        anchorEl: undefined
+    };
+
+    transformOrigin: PopoverOrigin = {
+        vertical: "top",
+        horizontal: "center"
+    };
+
+    render() {
+        const { icon: Icon, id, children } = this.props;
+        const { anchorEl } = this.state;
+        return (
+            <div>
+                <IconButton
+                    aria-owns={anchorEl ? id : undefined}
+                    aria-haspopup="true"
+                    color="inherit"
+                    onClick={this.handleOpen}
+
+                >
+                    <Icon />
+                </IconButton>
+                <Menu
+                    id={id}
+                    anchorEl={anchorEl}
+                    open={Boolean(anchorEl)}
+                    onClose={this.handleClose}
+                    onClick={this.handleClose}
+                    anchorOrigin={this.transformOrigin}
+                    transformOrigin={this.transformOrigin}
+                >
+                    {children}
+                </Menu>
+            </div>
+        );
+    }
+
+    handleClose = () => {
+        this.setState({ anchorEl: undefined });
+    }
+
+    handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+        this.setState({ anchorEl: event.currentTarget });
+    }
+}
+
+
+export default DropdownMenu;