Source: Combo.js



'use strict';

var _inherits = require('babel-runtime/helpers/inherits')['default'];

var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default'];

var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactBootstrap = require('react-bootstrap');

var _lodashCollectionMap = require('lodash/collection/map');

var _lodashCollectionMap2 = _interopRequireDefault(_lodashCollectionMap);

var _lodashFunctionDebounce = require('lodash/function/debounce');

var _lodashFunctionDebounce2 = _interopRequireDefault(_lodashFunctionDebounce);

/**
 * A combo-box component for React Bootstrap
 *
 * @class
 * @param {Object} props - A props config
 */

var Combo = (function (_React$Component) {

  /**
   * Constructor
   *
   * @param {Object} props - A props config
   */

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

    _React$Component.call(this, props);

    /**
     * Invoked when the component is mounted into the DOM tree, debounced by 150ms
     *
     * @memberof Combo
     * @instance
     * @method handleResize
     */
    this.handleResize = (0, _lodashFunctionDebounce2['default'])(this.onResize.bind(this), 150);
  }

  _inherits(Combo, _React$Component);

  /**
   * A performance hook
   *
   * @memberof Combo
   * @instance
   * @protected
   * @method shouldComponentUpdate
   * @param  {Object}  props - A props config
   * @return {boolean} true if the component needs to be re-rendered
   */

  Combo.prototype.shouldComponentUpdate = function shouldComponentUpdate(props) {
    return props.onChange !== this.props.onChange || props.items !== this.props.items || props.value !== this.props.value;
  };

  /**
   * Invoked every time the viewport is resized
   *
   * @memberof Combo
   * @instance
   * @private
   * @method onResize
   */

  Combo.prototype.onResize = function onResize() {

    // TODO - when react bootstrap 1.0 comes out, make sure the following is still necessary
    var combo = this.refs.combo,
        menu = _react2['default'].findDOMNode(combo.refs.menu);

    combo.setDropdownState(true);
    menu.style.maxHeight = '' + (window.innerHeight - menu.getBoundingClientRect().top - 5) + 'px';
    combo.setDropdownState(false);
  };

  /**
   * Invoked when the component is mounted into the DOM tree
   *
   * @memberof Combo
   * @instance
   * @protected
   * @method componentDidMount
   */

  Combo.prototype.componentDidMount = function componentDidMount() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  };

  /**
   * Invoked when the component is about to be unmounted from the DOM tree
   *
   * @memberof Combo
   * @instance
   * @protected
   * @method componentWillUnmount
   */

  Combo.prototype.componentWillUnmount = function componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  };

  /**
   * Invoked when the component is about to be unmounted from the DOM tree
   *
   * @memberof Combo
   * @instance
   * @protected
   * @method render
   * @return {ReactElement} a virtual DOM tree representing the component
   */

  Combo.prototype.render = function render() {
    var _this = this;

    return _react2['default'].createElement(
      _reactBootstrap.DropdownButton,
      { block: true, ref: 'combo', className: 'al-combo', title: this.props.items[this.props.value],
        onSelect: this.props.onChange.bind(this) },
      (0, _lodashCollectionMap2['default'])(this.props.items, function (item, i) {
        return _react2['default'].createElement(
          _reactBootstrap.MenuItem,
          { key: i, eventKey: i, active: i === _this.props.value },
          item
        );
      })
    );
  };

  return Combo;
})(_react2['default'].Component);

exports.Combo = Combo;

Combo.propTypes = {
  onChange: _react2['default'].PropTypes.func,
  items: _react2['default'].PropTypes.object.isRequired,
  value: _react2['default'].PropTypes.string.isRequired
};
Combo.defaultProps = { onChange: Function.prototype };