revenge-react-components/lib/DropdownMenu/Menu.js

react-components for revenge https://github.com/buildo/revenge

'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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; }; })();

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 _revenge = require('revenge');

var _lodashFunctionPartial = require('lodash/function/partial');

var _lodashFunctionPartial2 = _interopRequireDefault(_lodashFunctionPartial);

var _DividerDivider = require('../Divider/Divider');

var _DividerDivider2 = _interopRequireDefault(_DividerDivider);

var optionType = _revenge.t.struct({
  type: _revenge.t.enums.of(['title', 'item', 'divider']),
  title: _revenge.t.maybe(_revenge.t.ReactNode),
  metadata: _revenge.t.Any,
  onClick: _revenge.t.maybe(_revenge.t.Func)
}, 'optionType');

exports.optionType = optionType;

var Menu = (function (_React$Component) {
  _inherits(Menu, _React$Component);

  function Menu(props) {
    var _this = this;

    _classCallCheck(this, _Menu);

    _React$Component.call(this, props);

    this.onOptionClick = function (option) {
      _this.props.onClick();
      option.onClick(option);
    };

    this.menuItemTemplate = function (option, onOptionClick) {
      return _react2['default'].createElement(
        'div',
        { className: 'menu-item', onClick: _lodashFunctionPartial2['default'](onOptionClick, option) },
        _react2['default'].createElement(
          'span',
          { className: 'menu-item-title' },
          option.title
        ),
        _react2['default'].createElement(
          'span',
          { className: 'menu-item-metadata' },
          option.metadata
        )
      );
    };

    this.templateRenderedOptions = function (_ref) {
      var options = _ref.options;
      var onOptionClick = _ref.onOptionClick;

      return options.map(function (option, i) {
        return _react2['default'].createElement(
          'div',
          { className: 'menu-row', key: i },
          option.type === 'title' && _react2['default'].createElement(
            'div',
            { className: 'menu-title' },
            option.title
          ),
          option.type === 'item' && _this.menuItemTemplate(option, onOptionClick),
          option.type === 'divider' && _react2['default'].createElement(_DividerDivider2['default'], null)
        );
      });
    };

    this.state = {
      height: null
    };
  }

  Menu.prototype.componentDidMount = function componentDidMount() {
    var _React$findDOMNode$getBoundingClientRect = _react2['default'].findDOMNode(this).getBoundingClientRect();

    var scrollTop = _React$findDOMNode$getBoundingClientRect.top;
    var height = _React$findDOMNode$getBoundingClientRect.height;

    var _document$documentElement$getBoundingClientRect = document.documentElement.getBoundingClientRect();

    var wHeight = _document$documentElement$getBoundingClientRect.height;

    if (wHeight - (scrollTop + height) < 20) {
      this.setState({ // eslint-disable-line react/no-did-mount-set-state
        height: wHeight - scrollTop - 20
      });
    }
  };

  Menu.prototype.getLocals = function getLocals() {
    var _props = this.props;
    var options = _props.options;
    var style = _props.style;
    var maxHeightProp = _props.maxHeight;

    var maxHeight = this.state.height || maxHeightProp;
    var onOptionClick = this.onOptionClick;

    return {
      options: options,
      style: style,
      maxHeight: maxHeight,
      onOptionClick: onOptionClick
    };
  };

  Menu.prototype.template = function template(locals) {
    return _react2['default'].createElement(
      'div',
      { className: 'menu', style: _extends({}, locals.style, { maxHeight: locals.maxHeight }) },
      this.templateRenderedOptions(locals)
    );
  };

  _createClass(Menu, null, [{
    key: 'defaultProps',
    value: {
      style: {},
      onClick: function onClick() {}
    },
    enumerable: true
  }]);

  var _Menu = Menu;
  Menu = _revenge.props({
    style: _revenge.t.maybe(_revenge.t.Obj),
    maxHeight: _revenge.t.maybe(_revenge.t.Num),
    options: _revenge.t.maybe(_revenge.t.list(optionType)),
    onClick: _revenge.t.maybe(_revenge.t.Func)
  })(Menu) || Menu;
  Menu = _revenge.skinnable()(Menu) || Menu;
  Menu = _revenge.pure(Menu) || Menu;
  return Menu;
})(_react2['default'].Component);

exports['default'] = Menu;