material-components/lib/components/menu/index.js

Stateless UI components for react that follow material design

'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 _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

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 _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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactTransitionGroup = require('react-transition-group');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _mask = require('../mask');

var _mask2 = _interopRequireDefault(_mask);

var _item = require('./item');

var _item2 = _interopRequireDefault(_item);

var _separator = require('./separator');

var _separator2 = _interopRequireDefault(_separator);

var _helpersScreen = require('../helpers/screen');

var _helpersScreen2 = _interopRequireDefault(_helpersScreen);

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

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

    _get(Object.getPrototypeOf(Menu.prototype), 'constructor', this).apply(this, arguments);
  }

  _createClass(Menu, [{
    key: 'getChildContext',
    value: function getChildContext() {
      var _this = this;

      return {
        closeMenuHandler: function closeMenuHandler() {
          return _this.onClose();
        }
      };
    }
  }, {
    key: 'onClose',
    value: function onClose() {
      if (typeof this.props.onClose === 'function') {
        this.props.onClose();
      }
    }
  }, {
    key: 'checkBounds',
    value: function checkBounds() {
      var menuElement = _reactDom2['default'].findDOMNode(this.refs.menu);
      if (menuElement) {
        var screenHeight = _helpersScreen2['default'].getSize().height;

        var _menuElement$getBoundingClientRect = menuElement.getBoundingClientRect();

        var _top = _menuElement$getBoundingClientRect.top;
        var bottom = _menuElement$getBoundingClientRect.bottom;

        var originalHeight = bottom - _top;
        var minHeight = 32 * 8 + 20;

        var offsetTop = _top < 6 ? Math.ceil((_top - 16) / -32) * 32 : 0;
        var offsetBottom = bottom > screenHeight - 6 ? Math.ceil((bottom - screenHeight + 16) / 32) * 32 : 0;
        var height = bottom - _top - offsetTop - offsetBottom;
        if (height < minHeight) {
          height = minHeight > originalHeight ? originalHeight : minHeight;
          if (_top + offsetTop + height + 16 > screenHeight) {
            offsetTop -= _top + offsetTop + height + 16 - screenHeight;
          }
        }
        menuElement.style.top = menuElement.offsetTop + offsetTop + 'px';
        menuElement.style.height = height + 'px';
        menuElement.scrollTop += offsetTop;
      }
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      this.checkBounds();
      // close the options when resizing the window
      window.addEventListener('resize', this._resize = function () {
        if (_this2.props.isOpen) {
          _this2.onClose();
        }
      });
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.checkBounds();
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this._resize);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props = this.props;
      var children = _props.children;
      var className = _props.className;
      var isOpen = _props.isOpen;
      var rightAlign = _props.rightAlign;
      var style = _props.style;

      var menuStyle = {
        zIndex: 1001,
        padding: '10px 0',
        backgroundColor: '#fff',
        color: '#000',
        position: 'absolute',
        overflowY: 'auto',
        scrollbar: 'width: 4px',
        top: '-8px'
      };
      if (rightAlign) {
        menuStyle.right = '0';
      }

      var menu = isOpen ? _react2['default'].createElement(
        _reactTransitionGroup.CSSTransition,
        { key: 'menu', classNames: 'popup', timeout: { enter: 400, exit: 400 } },
        _react2['default'].createElement(
          'div',
          {
            style: {
              zIndex: 1000
            } },
          _react2['default'].createElement(_mask2['default'], { dark: false, onClick: function () {
              return _this3.onClose();
            } }),
          _react2['default'].createElement(
            'div',
            {
              ref: 'menu',
              className: (0, _classnames2['default'])('transition', 'paper1', className),
              style: Object.assign(menuStyle, style) },
            children
          )
        )
      ) : null;

      return _react2['default'].createElement(
        _reactTransitionGroup.TransitionGroup,
        {
          style: {
            zIndex: 1000,
            position: 'absolute',
            width: rightAlign ? null : '100%'
          } },
        menu
      );
    }
  }], [{
    key: 'displayName',
    value: 'Menu',
    enumerable: true
  }, {
    key: 'propTypes',
    value: {
      children: _propTypes2['default'].node,
      className: _propTypes2['default'].string,
      isOpen: _propTypes2['default'].bool,
      onClose: _propTypes2['default'].func,
      rightAlign: _propTypes2['default'].bool,
      style: _propTypes2['default'].object
    },
    enumerable: true
  }, {
    key: 'defaultProps',
    value: {
      className: '',
      isOpen: false,
      rightAlign: false,
      style: {}
    },
    enumerable: true
  }, {
    key: 'childContextTypes',
    value: {
      closeMenuHandler: _propTypes2['default'].func
    },
    enumerable: true
  }]);

  return Menu;
})(_react.Component);

Menu.Item = _item2['default'];
Menu.Separator = _separator2['default'];

exports['default'] = Menu;
module.exports = exports['default'];