react-mdl-portal-menu/lib/Menu.js

React MDL Portal Menu Component

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

require('./Menu.scss');

var _keycodes = require('./keycodes');

var _keycodes2 = _interopRequireDefault(_keycodes);

var _MenuList = require('./MenuList');

var _MenuList2 = _interopRequireDefault(_MenuList);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Menu = function (_Component) {
  _inherits(Menu, _Component);

  function Menu(props) {
    _classCallCheck(this, Menu);

    var _this = _possibleConstructorReturn(this, (Menu.__proto__ || Object.getPrototypeOf(Menu)).call(this, props));

    _this.onDocumentMouseUp = function (e) {
      var portal = (0, _reactDom.findDOMNode)(_this.portal);
      if (portal.contains(e.target) || e.button && e.button !== 0) return;
      e.stopPropagation();
      _this.closeMenu();
    };

    _this.onTargetMouseUp = function () {
      _this.openMenu(_this.props);
    };

    _this.closeMenu = function () {
      document.removeEventListener('keydown', _this.onDocumentKeydown);
      document.removeEventListener('mouseup', _this.onDocumentMouseUp);
      _reactDom2.default.unmountComponentAtNode(_this.node);
      document.body.removeChild(_this.node);
      _this.portal = null;
      _this.node = null;
      _this.open = false;
    };

    _this.node = null;
    _this.portal = null;
    _this.menu = null;
    _this.open = false;
    _this.onDocumentKeydown = _this.onDocumentKeydown.bind(_this);
    _this.onDocumentMouseUp = _this.onDocumentMouseUp.bind(_this);
    _this.onTargetMouseUp = _this.onTargetMouseUp.bind(_this);
    _this.onTargetKeydown = _this.onTargetKeydown.bind(_this);
    return _this;
  }

  _createClass(Menu, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.open) {
        this.renderMenu(nextProps);
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this.open) {
        this.closeMenu();
      }
    }
  }, {
    key: 'onDocumentKeydown',
    value: function onDocumentKeydown(e) {
      if (e.keyCode === _keycodes2.default.ESCAPE) {
        this.closeMenu();
      }
    }
  }, {
    key: 'onTargetKeydown',
    value: function onTargetKeydown(e) {
      if (e.keyCode === _keycodes2.default.ENTER || e.keyCode === _keycodes2.default.DOWN) {
        this.openMenu();
      }
    }
  }, {
    key: 'positionMenu',
    value: function positionMenu() {
      var _this2 = this;

      var _props = this.props;
      var align = _props.align;
      var valign = _props.valign;
      var _window = window;
      var innerWidth = _window.innerWidth;
      var innerHeight = _window.innerHeight;
      var scrollX = _window.scrollX;
      var scrollY = _window.scrollY;

      var targetNode = (0, _reactDom.findDOMNode)(this);
      var portalNode = (0, _reactDom.findDOMNode)(this.portal);
      var target = targetNode.getBoundingClientRect();
      var portal = portalNode.getBoundingClientRect();

      var menuX = void 0,
          menuY = void 0,
          originX = void 0,
          originY = void 0,
          above = void 0,
          below = void 0,
          maxHeight = void 0,
          constrain = void 0;

      if (align === 'left') {
        // align left
        menuX = target.left + scrollX;
        originX = 'left';
        // out of bounds, move to right
        if (menuX + portal.width > innerWidth + scrollX) {
          menuX = target.right + scrollX - portal.width;
          originX = 'right';
        }
      } else {
        // align right
        menuX = target.right + scrollX - portal.width;
        originX = 'right';
        // out of bounds, move to left
        if (menuX < 0) {
          menuX = target.left + scrollX;
          originX = 'left';
        }
      }

      // calculate space above/below target
      above = target.top;
      below = innerHeight - target.bottom;

      if (valign === 'top') {
        // show at the top
        menuY = target.top - portal.height + scrollY;
        originY = 'bottom';
        // out of bounds, move to bottom if there is more space
        if (menuY < 0 && below > above) {
          menuY = target.bottom + scrollY;
          originY = 'top';
        }
      } else {
        // show at the bottom
        menuY = target.bottom + scrollY;
        originY = 'top';
        // out of bounds, move to top if there is more space
        if (menuY + portal.height > innerHeight + scrollY && above > below) {
          menuY = target.top - portal.height + scrollY;
          originY = 'bottom';
        }
      }

      // set max height
      maxHeight = portal.height;

      // constrain to viewport
      if (originY === 'top') {
        // originY is top, which means show menu at the bottom
        if (portal.height > innerHeight - target.bottom) {
          maxHeight = innerHeight - target.bottom - 10;
          constrain = true;
        }
      } else {
        // originY is top, which means show menu at the top
        if (portal.height > target.top) {
          maxHeight = target.top - 10;
          menuY = scrollY + 10;
          constrain = true;
        }
      }

      // set initial style
      this.node.style.height = '0px';
      this.node.style.left = menuX + 'px';
      this.node.style.top = menuY + 'px';
      this.node.style.transform = 'scale3d(0.01, 0.01, 1)';
      this.node.style.transformOrigin = originX + ' ' + originY;

      // constrain portal
      if (constrain) {
        portalNode.style.maxHeight = maxHeight + 'px';
      }

      // do the animation with a slight delay
      // TODO: figure out how to wait for initial styles
      setTimeout(function () {
        _this2.node.style.opacity = '1';
        _this2.node.style.height = maxHeight + 'px';
        _this2.node.style.transform = 'scale3d(1, 1, 1)';
        _this2.node.style.transition = 'transform 0.2s ease';
      }, 20);
    }
  }, {
    key: 'focusMenu',
    value: function focusMenu() {
      var portal = (0, _reactDom.findDOMNode)(this.portal);
      portal.firstChild.focus();
    }
  }, {
    key: 'renderMenu',
    value: function renderMenu(props) {
      var children = props.children;
      var className = props.className;

      if (!this.node) {
        this.node = document.createElement('div');
        this.node.className = (0, _classnames2.default)('react-mdl-portal-menu', className);
        document.body.appendChild(this.node);
        document.addEventListener('keydown', this.onDocumentKeydown);
        document.addEventListener('mouseup', this.onDocumentMouseUp);
      }
      var list = _react2.default.createElement(
        _MenuList2.default,
        { closeMenu: this.closeMenu },
        children
      );
      this.portal = _reactDom2.default.unstable_renderSubtreeIntoContainer(this, list, this.node);
      this.open = true;
      this.positionMenu();
    }
  }, {
    key: 'openMenu',
    value: function openMenu(props) {
      if (!this.open) {
        this.renderMenu(props || this.props);
        this.focusMenu();
      }
    }
  }, {
    key: 'render',
    value: function render() {
      return (0, _react.cloneElement)(this.props.target, {
        onMouseUp: this.onTargetMouseUp,
        onKeyDown: this.onTargetKeydown
      });
    }
  }]);

  return Menu;
}(_react.Component);

Menu.propTypes = {
  align: _react.PropTypes.oneOf(['left', 'right']),
  children: _react.PropTypes.any.isRequired,
  className: _react.PropTypes.string,
  target: _react.PropTypes.element.isRequired,
  valign: _react.PropTypes.oneOf(['bottom', 'top'])
};
Menu.defaultProps = {
  align: 'left',
  valign: 'bottom'
};
exports.default = Menu;