Add a WorkspaceMenu

__tests__/src/components/WorkspaceMenu.test.js

+import React from 'react';
+import { shallow } from 'enzyme';
+import { WorkspaceMenu } from '../../../src/components/WorkspaceMenu';
+
+describe('WorkspaceMenu', () => {
+  let wrapper;
+  let handleClose;
+  beforeEach(() => {
+    handleClose = jest.fn();
+    wrapper = shallow(<WorkspaceMenu handleClose={handleClose} />);
+  });
+
+  it('renders without an error', () => {
+    expect(wrapper.find('WithStyles(Menu)').length).toBe(1);
+  });
+});

src/components/WorkspaceMenu.js

+import React, { Component } from 'react';
+import { compose } from 'redux';
+import Menu from '@material-ui/core/Menu';
+// import MenuItem from '@material-ui/core/MenuItem';
+import { withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+/**
+ */
+export class WorkspaceMenu extends Component {
+  /**
+   * render
+   * @return
+   */
+  render() {
+    const { handleClose, anchorEl } = this.props;
+    return (
+      <Menu id="workspace-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose} />
+    );
+  }
+}
+
+WorkspaceMenu.propTypes = {
+  handleClose: PropTypes.func.isRequired,
+  anchorEl: PropTypes.string.isRequired,
+};
+
+/**
+ * mapDispatchToProps - used to hook up connect to action creators
+ * @memberof ManifestListItem
+ * @private
+ */
+const mapDispatchToProps = {};
+
+/**
+ * @private
+ */
+const styles = theme => ({
+});
+
+
+const enhance = compose(
+  connect(null, mapDispatchToProps),
+  withStyles(styles),
+  // further HOC go here
+);
+
+export default enhance(WorkspaceMenu);

src/components/WorkspaceMenuButton.js

@@ -6,6 +6,7 @@ import ListItem from '@material-ui/core/ListItem';
 import { withStyles } from '@material-ui/core/styles';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import ConnectedWorkspaceMenu from './WorkspaceMenu';
 
 /**
  */
@@ -15,16 +16,29 @@ export class WorkspaceMenuButton extends Component {
    */
   constructor(props) {
     super(props);
-
+    this.state = {
+      anchorEl: null,
+    };
     this.handleMenuClick = this.handleMenuClick.bind(this);
+    this.handleMenuClose = this.handleMenuClose.bind(this);
+  }
+
+  /**
+   * @private
+   */
+  handleMenuClick(event) {
+    this.setState({
+      anchorEl: event.currentTarget,
+    });
   }
 
   /**
    * @private
    */
-  handleMenuClick() {
-    const state = { ...this.state };
-    this.setState(state);
+  handleMenuClose() {
+    this.setState({
+      anchorEl: null,
+    });
   }
 
   /**
@@ -33,7 +47,10 @@ export class WorkspaceMenuButton extends Component {
    */
   render() {
     const { classes } = this.props;
+    const { anchorEl } = this.state;
+
     return (
+      <>
         <ListItem>
           <IconButton
             color="primary"
@@ -42,10 +59,16 @@ export class WorkspaceMenuButton extends Component {
             className={classes.ctrlBtn}
             aria-haspopup="true"
             onClick={this.handleMenuClick}
+            aria-owns={anchorEl ? 'workspace-menu' : undefined}
           >
             <MenuIcon />
           </IconButton>
         </ListItem>
+        <ConnectedWorkspaceMenu
+          anchorEl={anchorEl}
+          handleClose={this.handleMenuClose}
+        />
+      </>
     );
   }
 }