selectly/lib/Select.js

Build custom, accessible, select menus for React.

'use strict';

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

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

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 _reactAria = require('react-aria');

var _reactPopper = require('react-popper');

var _reactMeasure = require('react-measure');

var _reactMeasure2 = _interopRequireDefault(_reactMeasure);

var _reactTravel = require('react-travel');

var _reactTravel2 = _interopRequireDefault(_reactTravel);

var _tabbable = require('tabbable');

var _tabbable2 = _interopRequireDefault(_tabbable);

var _childrenPropType = require('./children-prop-type');

var _childrenPropType2 = _interopRequireDefault(_childrenPropType);

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 SelectManager = _reactAria.Select.Manager;

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

  function Select() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Select);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Select.__proto__ || Object.getPrototypeOf(Select)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      isOpen: false,
      width: null,
      currentOption: {}
    }, _this._handleMeasure = function (_ref2) {
      var width = _ref2.width;

      if (_this.props.autoWidth) {
        _this.setState({ width: width });
      }
    }, _this._handleTrigger = function (firstChild, event) {
      _this.setState(function (state) {
        return { isOpen: !state.isOpen };
      });

      if (typeof firstChild.props.onTrigger === 'function') {
        firstChild.props.onTrigger(event);
      }
    }, _this._handleTriggerKeyDown = function (firstChild, event) {
      // determine if we need to move focus to the options menu when pressing tab
      // while the menu is open
      if (event.key === 'Tab' && _this.state.isOpen) {
        // without setTimeout it will focus the second tabbable item, need to figure
        // out why this is happening
        setTimeout(function () {
          var tabbableChildren = (0, _tabbable2.default)((0, _reactDom.findDOMNode)(_this._optionsList));
          if (tabbableChildren.length) {
            tabbableChildren[0].focus();
          } else {
            _this.setOpen(false);
          }
        });
      }

      if (typeof firstChild.props.onKeyDown === 'function') {
        firstChild.props.onKeyDown(event);
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Select, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      // if there is an incoming disabled prop we need to make sure the options get closed
      if (this.props.disabled !== nextProps.disabled && nextProps.disabled === true) {
        this.setOpen(false);
      }
    }
  }, {
    key: 'setOpen',
    value: function setOpen(isOpen) {
      var cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
        return null;
      };

      this.setState({ isOpen: isOpen }, cb);
    }
  }, {
    key: '_handleRequestClose',
    value: function _handleRequestClose(secondChild) {
      this.setOpen(false);

      if (typeof secondChild.props.onRequestClose === 'function') {
        secondChild.props.onRequestClose();
      }
    }
  }, {
    key: '_handleOptionSelection',
    value: function _handleOptionSelection(secondChild, option, event) {
      if (!this.props.multiple) {
        this.setOpen(false);
      }

      // fire our own "onChange" when an option has been selected
      this.props.onChange(option);

      // store current option for initialFocus
      this.setState({ currentOption: option });

      if (typeof secondChild.props.onOptionSelection === 'function') {
        secondChild.props.onOptionSelection(option, event);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          autoWidth = _props.autoWidth,
          renderOverlayTo = _props.renderOverlayTo,
          placement = _props.placement,
          children = _props.children;
      var _state = this.state,
          isOpen = _state.isOpen,
          width = _state.width,
          currentOption = _state.currentOption;

      var _Children$toArray = _react.Children.toArray(children),
          _Children$toArray2 = _slicedToArray(_Children$toArray, 2),
          firstChild = _Children$toArray2[0],
          secondChild = _Children$toArray2[1];

      return _react2.default.createElement(
        SelectManager,
        null,
        _react2.default.createElement(
          _reactPopper.Manager,
          null,
          _react2.default.createElement(
            _reactMeasure2.default,
            { onMeasure: this._handleMeasure },
            _react2.default.createElement(
              _reactPopper.Target,
              { component: false },
              (0, _react.cloneElement)(firstChild, {
                isOpen: isOpen,
                keybindings: [' '],
                onTrigger: this._handleTrigger.bind(this, firstChild),
                onKeyDown: this._handleTriggerKeyDown.bind(this, firstChild)
              })
            )
          ),
          isOpen && _react2.default.createElement(
            _reactTravel2.default,
            { renderTo: renderOverlayTo },
            _react2.default.createElement(
              _reactPopper.Popper,
              {
                placement: placement,
                style: { width: width ? width + 'px' : '' }
              },
              (0, _react.cloneElement)(secondChild, {
                ref: function ref(c) {
                  return _this2._optionsList = c;
                },
                initialFocus: currentOption.index,
                closeOnOutsideClick: true,
                onOptionSelection: this._handleOptionSelection.bind(this, secondChild),
                onRequestClose: this._handleRequestClose.bind(this, secondChild)
              })
            )
          )
        )
      );
    }
  }, {
    key: 'isOpen',
    get: function get() {
      return this.state.isOpen;
    }
  }]);

  return Select;
}(_react.Component);

Select.propTypes = {
  multiple: _react.PropTypes.bool,
  disabled: _react.PropTypes.bool,
  autoWidth: _react.PropTypes.bool,
  placement: _react.PropTypes.any,
  renderOverlayTo: _react.PropTypes.any,
  onChange: _react.PropTypes.func,
  children: _childrenPropType2.default
};
Select.defaultProps = {
  multiple: false,
  disabled: false,
  autoWidth: true,
  onChange: function onChange() {
    return null;
  }
};
exports.default = Select;
module.exports = exports['default'];