Refactored Dropdown components

frontend/components/DropdownMenu/DropdownMenu.js

@@ -1,66 +1,111 @@
 // @flow
 import React from 'react';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import styled from 'styled-components';
+import Flex from 'components/Flex';
+import { color } from 'styles/constants';
 
-import styles from './DropdownMenu.scss';
-
-const MenuItem = ({
-  onClick,
-  children,
-}: {
+type MenuItemProps = {
   onClick?: Function,
   children?: React.Element<any>,
-}) => {
+};
+
+const DropdownMenuItem = ({ onClick, children }: MenuItemProps) => {
   return (
-    <div className={styles.menuItem} onClick={onClick}>
+    <MenuItem onClick={onClick}>
       {children}
-    </div>
+    </MenuItem>
   );
 };
 
-//
+type DropdownMenuProps = {
+  label: React.Element<any>,
+  children: React.Element<any>,
+};
 
-class DropdownMenu extends React.Component {
-  static propTypes = {
-    label: React.PropTypes.node.isRequired,
-    children: React.PropTypes.node.isRequired,
-  };
+@observer class DropdownMenu extends React.Component {
+  props: DropdownMenuProps;
+  @observable menuOpen: boolean = false;
 
-  state = {
-    menuVisible: false,
-  };
-
-  onMouseEnter = () => {
-    this.setState({ menuVisible: true });
-  };
-
-  onMouseLeave = () => {
-    this.setState({ menuVisible: false });
-  };
-
-  onClick = () => {
-    this.setState({ menuVisible: !this.state.menuVisible });
+  handleClick = () => {
+    this.menuOpen = !this.menuOpen;
   };
 
   render() {
     return (
-      <div
-        className={styles.menuContainer}
-        onMouseEnter={this.onMouseEnter}
-        onMouseLeave={this.onMouseLeave}
-      >
-        <div className={styles.label} onClick={this.onClick}>
-          {this.props.label}
-        </div>
+      <MenuContainer onClick={this.handleClick}>
+        {this.menuOpen && <Backdrop />}
 
-        {this.state.menuVisible
-          ? <div className={styles.menu}>
+        <Label>
+          {this.props.label}
+        </Label>
+
+        {this.menuOpen &&
+          <Menu>
             {this.props.children}
-            </div>
-          : null}
-      </div>
+          </Menu>}
+      </MenuContainer>
     );
   }
 }
 
-export default DropdownMenu;
-export { MenuItem };
+const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+`;
+
+const Label = styled(Flex).attrs({
+  justify: 'center',
+  align: 'center',
+})`
+  cursor: pointer;
+  z-index: 1000;
+
+  min-height: 43px;
+  margin: 0 5px;
+`;
+
+const MenuContainer = styled.div`
+  position: relative;
+`;
+
+const Menu = styled.div`
+  position: absolute;
+  right: 0;
+  z-index: 1000;
+  border: 1px solid #eee;
+  background-color: #fff;
+  min-width: 160px;
+`;
+
+const MenuItem = styled.div`
+  margin: 0;
+  padding: 5px 10px;
+  height: 32px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  border-left: 2px solid transparent;
+
+  span {
+    margin-top: 2px;
+  }
+
+  a {
+    text-decoration: none;
+    width: 100%;
+  }
+
+  &:hover {
+    border-left: 2px solid ${color.primary};
+  }
+`;
+
+export { DropdownMenu, DropdownMenuItem };

frontend/components/DropdownMenu/DropdownMenu.scss

@@ -1,52 +0,0 @@
-@import '~styles/constants.scss';
-
-.label {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-
-  min-height: 43px;
-  margin: 0 5px;
-  color: $actionColor;
-}
-
-.menuContainer {
-  position: relative;
-
-  .menu {
-    position: absolute;
-    top: $headerHeight;
-    right: 0;
-    z-index: 1000;
-    border: 1px solid #eee;
-    background-color: #fff;
-    min-width: 160px;
-  }
-}
-
-.menuItem {
-  margin: 0;
-  padding: 5px 10px;
-  height: 32px;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  border-left: 2px solid transparent;
-
-  span {
-    margin-top: 2px;
-  }
-
-  a {
-    color: $textColor;
-    text-decoration: none;
-    width: 100%;
-  }
-
-  &:hover {
-    border-left: 2px solid $actionColor;
-  }
-}

frontend/components/DropdownMenu/index.js

@@ -1,5 +1,4 @@
 // @flow
-import DropdownMenu, { MenuItem } from './DropdownMenu';
+import { DropdownMenu, DropdownMenuItem } from './DropdownMenu';
 import MoreIcon from './components/MoreIcon';
-export default DropdownMenu;
-export { MenuItem, MoreIcon };
+export { DropdownMenu, DropdownMenuItem, MoreIcon };

frontend/components/Layout/Layout.js

@@ -9,7 +9,7 @@ import keydown from 'react-keydown';
 import Flex from 'components/Flex';
 import { color, layout } from 'styles/constants';
 
-import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
 import Avatar from 'components/Avatar';
@@ -88,17 +88,19 @@ type Props = {
                 </Flex>
                 <DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
                   <MenuLink to="/settings">
-                    <MenuItem>Settings</MenuItem>
+                    <DropdownMenuItem>Settings</DropdownMenuItem>
                   </MenuLink>
                   <MenuLink to="/keyboard-shortcuts">
-                    <MenuItem>
+                    <DropdownMenuItem>
                       Keyboard shortcuts
-                    </MenuItem>
+                    </DropdownMenuItem>
                   </MenuLink>
                   <MenuLink to="/developers">
-                    <MenuItem>API</MenuItem>
+                    <DropdownMenuItem>API</DropdownMenuItem>
                   </MenuLink>
-                  <MenuItem onClick={this.handleLogout}>Logout</MenuItem>
+                  <DropdownMenuItem onClick={this.handleLogout}>
+                    Logout
+                  </DropdownMenuItem>
                 </DropdownMenu>
               </Header>
 

frontend/scenes/Document/components/Menu.js

@@ -5,7 +5,11 @@ import get from 'lodash/get';
 import { withRouter } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import Document from 'models/Document';
-import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  MoreIcon,
+} from 'components/DropdownMenu';
 
 type Props = {
   history: Object,
@@ -63,12 +67,13 @@ type Props = {
         <DropdownMenu label={<MoreIcon />}>
           {collection &&
             <div>
-              <MenuItem onClick={this.onCreateDocument}>
+              <DropdownMenuItem onClick={this.onCreateDocument}>
                 New document
-              </MenuItem>
+              </DropdownMenuItem>
             </div>}
-          <MenuItem onClick={this.onExport}>Export</MenuItem>
-          {allowDelete && <MenuItem onClick={this.onDelete}>Delete</MenuItem>}
+          <DropdownMenuItem onClick={this.onExport}>Export</DropdownMenuItem>
+          {allowDelete &&
+            <DropdownMenuItem onClick={this.onDelete}>Delete</DropdownMenuItem>}
         </DropdownMenu>
       );
     }