boldr-ui/Select/Popup.js

UI components for Boldr

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _isArray = require('lodash/isArray');

var _isArray2 = _interopRequireDefault(_isArray);

var _Search = require('./components/Search');

var _Search2 = _interopRequireDefault(_Search);

var _Option = require('./components/Option');

var _Option2 = _interopRequireDefault(_Option);

var _constants = require('./constants');

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

if (typeof exports !== 'undefined') Object.defineProperty(exports, 'babelPluginFlowReactPropTypes_proptype_Props', {
  value: {
    cid: require('prop-types').string,
    keyword: require('prop-types').any,
    selectedItems: require('prop-types').arrayOf(require('prop-types').any),
    searchPlaceholder: require('prop-types').string,
    emptyText: require('prop-types').any,
    prefixCls: require('prop-types').string,
    extraFilter: require('prop-types').bool,
    filter: require('prop-types').func,
    onAsyncFilter: require('prop-types').func,
    onFocus: require('prop-types').func,
    onBlur: require('prop-types').func
  }
});

var Popup = function (_Component) {
  (0, _inherits3.default)(Popup, _Component);

  function Popup(props) {
    (0, _classCallCheck3.default)(this, Popup);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Popup.__proto__ || (0, _getPrototypeOf2.default)(Popup)).call(this, props));

    _this.state = {
      data: props.data,
      currentId: 0,
      keyword: props.keyword || ''
    };
    _this.currentId = 0;
    _this.sourceData = props.data;
    _this.searchFilterHandler = _this.searchFilterHandler.bind(_this);
    _this.optionChangedHandler = _this.optionChangedHandler.bind(_this);
    _this.keydownHandler = _this.keydownHandler.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Popup, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      if (!this.props.filter) {
        this.popup.focus();
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.sourceData = nextProps.data;
      if (nextProps.keyword !== null) {
        this.setState({
          data: nextProps.data,
          keyword: nextProps.keyword
        });
      }
    }
  }, {
    key: 'optionChangedHandler',
    value: function optionChangedHandler(ev, cid) {
      this.setState({
        keyword: ''
      });
      this.props.onBlur();
      this.props.onChange(ev, this.props.data.filter(function (item) {
        return item.cid === cid;
      })[0]);
    }
  }, {
    key: 'searchFilterHandler',
    value: function searchFilterHandler(keyword) {
      var _this2 = this;

      var _props = this.props,
          filter = _props.filter,
          onAsyncFilter = _props.onAsyncFilter;


      if (typeof onAsyncFilter === 'function') {
        onAsyncFilter('' + keyword, function (data) {
          _this2.setState({
            keyword: keyword,
            data: _this2.sourceData.filter(function (item) {
              return (0, _isArray2.default)(data) && data.indexOf(item.value) > -1;
            })
          });
        });
      } else {
        this.setState({
          keyword: keyword,
          data: this.sourceData.filter(function (item) {
            return !keyword || !filter || filter(item, '' + keyword);
          })
        });
      }
    }
  }, {
    key: 'keydownHandler',
    value: function keydownHandler(ev) {
      var code = ev.keyCode;
      var itemIds = this.itemIds;
      var _state = this.state,
          currentId = _state.currentId,
          keyword = _state.keyword;

      var index = itemIds.indexOf(currentId);
      switch (code) {
        case _constants.KEY_DOWN:
          ev.preventDefault();
          if (this.itemIds[index + 1]) {
            currentId = this.itemIds[index + 1];
            this.currentIdUpdated = true;
          }
          break;
        case _constants.KEY_UP:
          ev.preventDefault();
          if (index > 0) {
            currentId = this.itemIds[index - 1];
            this.currentIdUpdated = true;
          }
          break;
        case _constants.KEY_EN:
          ev.preventDefault();
          this.optionChangedHandler(keyword, currentId);
          this.currentIdUpdated = false;
          break;
        default:
          break;
      }
      this.setState({
        currentId: currentId
      });
    }
  }, {
    key: 'updateCurrentId',
    value: function updateCurrentId(cid) {
      this.setState({
        currentId: cid
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props2 = this.props,
          cid = _props2.cid,
          selectedItems = _props2.selectedItems,
          emptyText = _props2.emptyText,
          prefixCls = _props2.prefixCls,
          extraFilter = _props2.extraFilter,
          searchPlaceholder = _props2.searchPlaceholder,
          filter = _props2.filter,
          onFocus = _props2.onFocus,
          onBlur = _props2.onBlur;
      var _state2 = this.state,
          keyword = _state2.keyword,
          data = _state2.data,
          currentId = _state2.currentId;


      var filterData = data.filter(function (item) {
        return !keyword || !filter || filter(item, '' + keyword);
      });
      var showEmpty = data.length === 0 || filterData.length === 0;

      this.itemIds = filterData.map(function (item) {
        return item.cid;
      });

      return _react2.default.createElement(
        'div',
        {
          ref: function ref(popup) {
            return _this3.popup = popup;
          },
          tabIndex: '0',
          className: prefixCls + '-popup',
          onFocus: onFocus,
          onBlur: onBlur,
          onKeyDown: this.keydownHandler
        },
        !extraFilter && filter ? _react2.default.createElement(_Search2.default, {
          keyword: keyword,
          prefixCls: prefixCls,
          placeholder: searchPlaceholder,
          onChange: this.searchFilterHandler
        }) : '',
        filterData.map(function (item, index) {
          if (index === 0 && !currentId) {
            currentId = item.cid;
            _this3.state.currentId = currentId;
          }
          if (keyword && item.text === keyword) {
            currentId = item.cid;
          }
          var currentCls = item.cid === currentId ? 'current' : '';
          var activeCls = selectedItems.filter(function (o) {
            return o.cid === item.cid;
          }).length > 0 || item.cid === cid ? 'active' : '';
          return _react2.default.createElement(_Option2.default, (0, _extends3.default)({
            key: index,
            className: prefixCls + '-option ' + activeCls + ' ' + currentCls
          }, item, {
            onClick: _this3.optionChangedHandler,
            onMouseEnter: _this3.updateCurrentId.bind(_this3, item.cid)
          }));
        }),
        showEmpty && _react2.default.createElement(_Option2.default, {
          className: prefixCls + '-empty',
          text: emptyText,
          onClick: this.optionChangedHandler
        })
      );
    }
  }]);
  return Popup;
}(_react.Component);

Popup.propTypes = process.env.NODE_ENV !== "production" ? {
  cid: require('prop-types').string,
  keyword: require('prop-types').any,
  selectedItems: require('prop-types').arrayOf(require('prop-types').any),
  searchPlaceholder: require('prop-types').string,
  emptyText: require('prop-types').any,
  prefixCls: require('prop-types').string,
  extraFilter: require('prop-types').bool,
  filter: require('prop-types').func,
  onAsyncFilter: require('prop-types').func,
  onFocus: require('prop-types').func,
  onBlur: require('prop-types').func
} : {};


Popup.defaultProps = {
  cid: -1,
  keyword: '',
  selectedItems: [],
  emptyText: '',
  prefixCls: '',
  extraFilter: false,
  searchPlaceholder: ''
};

exports.default = Popup;