Create dropdown menu component

Feature #13590

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/main-app-bar/dropdown-menu/dropdown-menu.tsx b/src/components/main-app-bar/dropdown-menu/dropdown-menu.tsx
new file mode 100644 (file)
index 0000000..533e5a4
--- /dev/null
+++ b/src/components/main-app-bar/dropdown-menu/dropdown-menu.tsx
@@ -0,0 +1,71 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Button, Grid, StyleRulesCallback, WithStyles, Menu, MenuItem } from '@material-ui/core';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import { withStyles } from '@material-ui/core';
+import { IconButton } from '@material-ui/core/es';
+import { PopoverOrigin } from '@material-ui/core/Popover';
+
+
+interface DropdownMenuDataProps {
+    id: string,
+    icon: React.ComponentType,
+}
+
+
+type DropdownMenuProps = DropdownMenuDataProps;
+
+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