Add DropdownMenu component with better CSSTransitionGroup implementation

Author: shockey

package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "boron": "^0.2.3",
+    "classnames": "^2.1.3",
     "immutable": "^3.x.x",
     "js-yaml": "^3.5.5",
     "json-beautify": "^1.0.1",
@@ -51,6 +52,7 @@
     "react-dom": "^15.x",
     "react-file-download": "^0.3.2",
     "react-redux": "^4.x.x",
+    "react-transition-group": "^1.1.1",
     "redux": "^3.x.x",
     "swagger-client": "~3.0.10",
     "swagger-ui": "^3.0.9",

src/standalone/topbar/DropdownMenu.js

@@ -0,0 +1,162 @@
+// Adapted from https://github.com/mlaursen/react-dd-menu/blob/master/src/js/DropdownMenu.js
+
+import React, { PureComponent, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+import classnames from 'classnames';
+
+const TAB = 9;
+const SPACEBAR = 32;
+const ALIGNMENTS = ['center', 'right', 'left'];
+const MENU_SIZES = ['sm', 'md', 'lg', 'xl'];
+
+
+export default class DropdownMenu extends PureComponent {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    close: PropTypes.func.isRequired,
+    toggle: PropTypes.node.isRequired,
+    children: PropTypes.node,
+    inverse: PropTypes.bool,
+    align: PropTypes.oneOf(ALIGNMENTS),
+    animAlign: PropTypes.oneOf(ALIGNMENTS),
+    textAlign: PropTypes.oneOf(ALIGNMENTS),
+    menuAlign: PropTypes.oneOf(ALIGNMENTS),
+    className: PropTypes.string,
+    size: PropTypes.oneOf(MENU_SIZES),
+    upwards: PropTypes.bool,
+    animate: PropTypes.bool,
+    enterTimeout: PropTypes.number,
+    leaveTimeout: PropTypes.number,
+    closeOnInsideClick: PropTypes.bool,
+    closeOnOutsideClick: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    inverse: false,
+    align: 'center',
+    animAlign: null,
+    textAlign: null,
+    menuAlign: null,
+    className: null,
+    size: null,
+    upwards: false,
+    animate: true,
+    enterTimeout: 150,
+    leaveTimeout: 150,
+    closeOnInsideClick: true,
+    closeOnOutsideClick: true,
+  };
+
+  static MENU_SIZES = MENU_SIZES;
+  static ALIGNMENTS = ALIGNMENTS;
+
+  componentDidUpdate(prevProps) {
+    if(this.props.isOpen === prevProps.isOpen) {
+      return;
+    }
+
+    const menuItems = ReactDOM.findDOMNode(this).querySelector('.dd-menu > .dd-menu-items');
+    if(this.props.isOpen && !prevProps.isOpen) {
+      this.lastWindowClickEvent = this.handleClickOutside;
+      document.addEventListener('click', this.lastWindowClickEvent);
+      if(this.props.closeOnInsideClick) {
+        menuItems.addEventListener('click', this.props.close);
+      }
+      menuItems.addEventListener('onkeydown', this.close);
+    } else if(!this.props.isOpen && prevProps.isOpen) {
+      document.removeEventListener('click', this.lastWindowClickEvent);
+      if(prevProps.closeOnInsideClick) {
+        menuItems.removeEventListener('click', this.props.close);
+      }
+      menuItems.removeEventListener('onkeydown', this.close);
+
+      this.lastWindowClickEvent = null;
+    }
+  }
+
+  componentWillUnmount() {
+    if(this.lastWindowClickEvent) {
+      document.removeEventListener('click', this.lastWindowClickEvent);
+    }
+  }
+
+  close = (e) => {
+    const key = e.which || e.keyCode;
+    if(key === SPACEBAR) {
+      this.props.close();
+      e.preventDefault();
+    }
+  };
+
+  handleClickOutside = (e) => {
+    if(!this.props.closeOnOutsideClick) {
+      return;
+    }
+
+    const node = ReactDOM.findDOMNode(this);
+    let target = e.target;
+
+    while(target.parentNode) {
+      if(target === node) {
+        return;
+      }
+
+      target = target.parentNode;
+    }
+
+    this.props.close(e);
+  };
+
+  handleKeyDown = (e) => {
+    const key = e.which || e.keyCode;
+    if(key !== TAB) {
+      return;
+    }
+
+    const items = ReactDOM.findDOMNode(this).querySelectorAll('button,a');
+    const id = e.shiftKey ? 1 : items.length - 1;
+
+    if(e.target === items[id]) {
+      this.props.close(e);
+    }
+  };
+
+
+  render() {
+    const { menuAlign, align, inverse, size, className } = this.props;
+
+    const menuClassName = classnames(
+      'dd-menu',
+      `dd-menu-${menuAlign || align}`,
+      { 'dd-menu-inverse': inverse },
+      className,
+      size ? ('dd-menu-' + size) : null
+    );
+
+    const { textAlign, upwards, animAlign, animate, enterTimeout, leaveTimeout } = this.props;
+
+    const listClassName = 'dd-items-' + (textAlign || align);
+    const transitionProps = {
+      transitionName: 'grow-from-' + (upwards ? 'up-' : '') + (animAlign || align),
+      component: 'div',
+      className: classnames('dd-menu-items', { 'dd-items-upwards': upwards }),
+      onKeyDown: this.handleKeyDown,
+      transitionEnter: animate,
+      transitionLeave: animate,
+      transitionEnterTimeout: enterTimeout,
+      transitionLeaveTimeout: leaveTimeout,
+    };
+
+    return (
+      <div className={menuClassName}>
+        {this.props.toggle}
+        <CSSTransitionGroup {...transitionProps}>
+          {this.props.isOpen &&
+          <ul key="items" className={listClassName}>{this.props.children}</ul>
+          }
+        </CSSTransitionGroup>
+      </div>
+    );
+  }
+}

src/standalone/topbar/topbar.jsx

@@ -1,7 +1,7 @@
 import React, { PropTypes } from "react"
 import Swagger from "swagger-client"
 import "whatwg-fetch"
-import DropdownMenu from "react-dd-menu"
+import DropdownMenu from "./DropdownMenu"
 import Modal from "boron/DropModal"
 import downloadFile from "react-file-download"
 import YAML from "js-yaml"