boldr-ui/Select/Select.js

UI components for Boldr

'use strict';

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

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

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 _assign = require('lodash/assign');

var _assign2 = _interopRequireDefault(_assign);

var _omit = require('lodash/omit');

var _omit2 = _interopRequireDefault(_omit);

var _cloneDeep = require('lodash/cloneDeep');

var _cloneDeep2 = _interopRequireDefault(_cloneDeep);

var _isEqual = require('lodash/isEqual');

var _isEqual2 = _interopRequireDefault(_isEqual);

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

var _isArray2 = _interopRequireDefault(_isArray);

var _noop = require('lodash/noop');

var _noop2 = _interopRequireDefault(_noop);

var _Index = require('./triggers/Index');

var _Index2 = _interopRequireDefault(_Index);

var _Popup = require('./Popup');

var _Popup2 = _interopRequireDefault(_Popup);

var _SimpleTrigger = require('./triggers/SimpleTrigger');

var _SimpleTrigger2 = _interopRequireDefault(_SimpleTrigger);

var _SelectTrigger = require('./triggers/SelectTrigger');

var _SelectTrigger2 = _interopRequireDefault(_SelectTrigger);

var _InputTrigger = require('./triggers/InputTrigger');

var _InputTrigger2 = _interopRequireDefault(_InputTrigger);

var _TagsTrigger = require('./triggers/TagsTrigger');

var _TagsTrigger2 = _interopRequireDefault(_TagsTrigger);

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: {
    data: require('prop-types').arrayOf(require('prop-types').any),
    prefix: require('prop-types').string,
    className: require('prop-types').string,
    disabled: require('prop-types').bool,
    placeholder: require('prop-types').string,
    searchPlaceholder: require('prop-types').string,
    emptyText: require('prop-types').string,
    selectedItem: require('prop-types').shape({
      value: require('prop-types').any,
      text: require('prop-types').string
    }),
    trigger: require('prop-types').func,
    optionValue: require('prop-types').string,
    optionText: require('prop-types').string,
    onChange: require('prop-types').func,
    onDelete: require('prop-types').func,
    filter: require('prop-types').func,
    onAsyncFilter: require('prop-types').func,
    onEmptySelected: require('prop-types').func,
    onOpen: require('prop-types').func
  }
});

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

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

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

    var data = [];

    /**
     * Takes arrays of strings or objects
     * @return {object}
     */

    if (props.children) {
      var children = props.children;
      if (!(0, _isArray2.default)(children)) {
        children = [children];
      }
      data = children.map(function (item) {
        var value = item.props.value;
        value = typeof value === 'undefined' ? item : value;
        return (0, _assign2.default)({}, item.props, {
          value: value,
          text: item.props.children
        });
      });
    }

    if (props.data) {
      data = props.data;
    }

    if (props.simple) {
      _this.trigger = _SimpleTrigger2.default;
    } else if (props.search) {
      _this.trigger = _InputTrigger2.default;
    } else if (props.tags) {
      _this.trigger = _TagsTrigger2.default;
    } else {
      _this.trigger = props.trigger;
    }

    _this.state = (0, _assign2.default)({
      selectedItems: []
    }, props);

    _this.formateData(data);

    _this.blurHandler = _this.blurHandler.bind(_this);
    _this.keyupHandler = _this.keyupHandler.bind(_this);
    _this.triggerChangeHandler = _this.triggerChangeHandler.bind(_this);
    _this.triggerDeleteHandler = _this.triggerDeleteHandler.bind(_this);
    _this.optionChangedHandler = _this.optionChangedHandler.bind(_this);
    _this.popupFocusHandler = _this.popupFocusHandler.bind(_this);
    _this.popupBlurHandler = _this.popupBlurHandler.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Select, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var open = this.state.open;

      open = nextProps.open || this.focus;
      var nextState = (0, _extends3.default)({}, nextProps, { open: open });
      var selectedItems = [];
      if ('' + nextProps.value || '' + nextProps.index) {
        this.state.selectedItem = this.props.selectedItem;
      }
      this.formateData(nextProps.data, nextProps);
      if ((0, _isArray2.default)(nextProps.value)) {
        this.sourceData.forEach(function (item) {
          if (nextProps.value.indexOf(item.value) > -1) {
            selectedItems.push(item);
          }
        });
      }
      nextState.selectedItem = this.state.selectedItem;
      nextState.selectedItems = selectedItems;
      this.setState(nextState);
    }
  }, {
    key: 'formateData',
    value: function formateData(data, props) {
      var selectedItems = [];
      data = data || this.sourceData;
      props = props || this.props;
      var that = this;
      this.sourceData = (0, _cloneDeep2.default)(data).map(function (item) {
        var result = {};
        if ((typeof item === 'undefined' ? 'undefined' : (0, _typeof3.default)(item)) === 'object') {
          result.value = item[props.optionValue];
          result.text = item[props.optionText];
          result = (0, _extends3.default)({}, item, result);
        } else {
          result.value = item;
          result.text = item;
        }
        return result;
      }).map(function (item, index) {
        item.cid = '' + index;
        if ((0, _isArray2.default)(props.value) && props.value.indexOf(item.value) > -1) {
          selectedItems.push(item);
        } else if ((0, _typeof3.default)(props.value) === 'object' && (0, _isEqual2.default)(props.value, item.value)) {
          that.state.selectedItem = item;
        } else if (typeof props.value !== 'undefined' && (0, _typeof3.default)(props.value) !== 'object' && '' + item.value === '' + props.value || props.index !== 'undefined' && '' + index === '' + props.index) {
          that.state.selectedItem = item;
        }

        return item;
      });
      this.state.selectedItems = selectedItems;
      return this.sourceData;
    }
  }, {
    key: 'triggerChangeHandler',
    value: function triggerChangeHandler(data) {
      if (data.open) {
        this.props.onOpen();
      }
      this.setState(data);
    }
  }, {
    key: 'triggerDeleteHandler',
    value: function triggerDeleteHandler(data) {
      var _this2 = this;

      var selectedItems = this.state.selectedItems;

      selectedItems = selectedItems.filter(function (item) {
        return item.cid !== data.cid;
      });
      this.setState({
        selectedItems: selectedItems
      }, function () {
        _this2.props.onDelete(data);
      });
    }
  }, {
    key: 'optionChangedHandler',
    value: function optionChangedHandler(ev, selectedItem) {
      var result = {};
      ev = ev || {
        preventDefault: _noop2.default,
        stopPropagation: _noop2.default
      };
      var _props = this.props,
          onEmptySelected = _props.onEmptySelected,
          optionValue = _props.optionValue,
          optionText = _props.optionText,
          tags = _props.tags,
          onChange = _props.onChange;
      var selectedItems = this.state.selectedItems;

      if (!selectedItem) {
        onEmptySelected(ev);
        return;
      }
      var args = (0, _omit2.default)(selectedItem, ['cid']);
      result[optionValue] = selectedItem.value;
      result[optionText] = selectedItem.text;
      var data = (0, _extends3.default)({}, args, result);
      if (tags) {
        if (!selectedItems.some(function (item) {
          return item.cid === selectedItem.cid;
        })) {
          selectedItems.push(selectedItem);
        }
      }
      onChange({
        target: (0, _extends3.default)({}, this.props, {
          type: tags ? 'select-multiple' : 'select-one',
          value: selectedItem.value
        }),

        preventDefault: function preventDefault() {
          ev.preventDefault();
        },
        stopPropagation: function stopPropagation() {
          ev.stopPropagation();
        }
      }, data);
      this.setState({
        keyword: null,
        selectedItems: selectedItems,
        selectedItem: selectedItem,
        open: this.focus
      });
    }
  }, {
    key: 'popupFocusHandler',
    value: function popupFocusHandler() {
      this.focus = this.state.open;
    }
  }, {
    key: 'popupBlurHandler',
    value: function popupBlurHandler() {
      this.focus = false;
    }
  }, {
    key: 'blurHandler',
    value: function blurHandler() {
      var _this3 = this;

      var that = this;
      setTimeout(function () {
        that.setState({
          open: _this3.focus
        });
      }, 0);
    }
  }, {
    key: 'keyupHandler',
    value: function keyupHandler(ev) {
      var code = ev.keyCode;
      if (!this.state.open) return false;
      if (code === _constants.KEY_ESC) {
        this.setState({
          open: false
        });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          placeholder = _props2.placeholder,
          className = _props2.className,
          disabled = _props2.disabled,
          emptyText = _props2.emptyText,
          _props2$filter = _props2.filter,
          filter = _props2$filter === undefined ? this.props.onFilter : _props2$filter,
          onAsyncFilter = _props2.onAsyncFilter,
          searchPlaceholder = _props2.searchPlaceholder;
      var _state = this.state,
          selectedItems = _state.selectedItems,
          _state$selectedItem = _state.selectedItem,
          selectedItem = _state$selectedItem === undefined ? {} : _state$selectedItem,
          extraFilter = _state.extraFilter,
          open = _state.open,
          _state$keyword = _state.keyword,
          keyword = _state$keyword === undefined ? null : _state$keyword;
      var _selectedItem$cid = selectedItem.cid,
          cid = _selectedItem$cid === undefined ? '' : _selectedItem$cid;


      var openCls = open && !disabled ? 'open' : '';
      var disabledCls = disabled ? 'disabled' : '';
      var prefixCls = this.props.prefix + '-select';

      return _react2.default.createElement(
        'div',
        {
          tabIndex: '0',
          className: prefixCls + ' ' + className + ' ' + openCls + ' ' + disabledCls,
          onBlur: this.blurHandler,
          onKeyDown: this.keyupHandler
        },
        _react2.default.createElement(_Index2.default, (0, _extends3.default)({
          prefixCls: prefixCls,
          trigger: this.trigger,
          placeholder: placeholder,
          selectedItems: selectedItems,
          open: open,
          keyword: keyword
        }, selectedItem, {
          onChange: this.triggerChangeHandler,
          onDelete: this.triggerDeleteHandler
        })),
        open ? _react2.default.createElement(_Popup2.default, {
          cid: cid,
          prefixCls: prefixCls,
          data: this.sourceData,
          selectedItems: selectedItems,
          extraFilter: extraFilter,
          searchPlaceholder: searchPlaceholder,
          emptyText: emptyText,
          keyword: keyword,
          filter: filter,
          onAsyncFilter: onAsyncFilter,
          onChange: this.optionChangedHandler,
          onFocus: this.popupFocusHandler,
          onBlur: this.popupBlurHandler
        }) : ''
      );
    }
  }]);
  return Select;
}(_react.Component);

Select.propTypes = process.env.NODE_ENV !== "production" ? {
  data: require('prop-types').arrayOf(require('prop-types').any),
  prefix: require('prop-types').string,
  className: require('prop-types').string,
  disabled: require('prop-types').bool,
  placeholder: require('prop-types').string,
  searchPlaceholder: require('prop-types').string,
  emptyText: require('prop-types').string,
  selectedItem: require('prop-types').shape({
    value: require('prop-types').any,
    text: require('prop-types').string
  }),
  trigger: require('prop-types').func,
  optionValue: require('prop-types').string,
  optionText: require('prop-types').string,
  onChange: require('prop-types').func,
  onDelete: require('prop-types').func,
  filter: require('prop-types').func,
  onAsyncFilter: require('prop-types').func,
  onEmptySelected: require('prop-types').func,
  onOpen: require('prop-types').func
} : {};


Select.defaultProps = {
  prefix: 'boldrui',
  disabled: false,
  className: '',
  trigger: _SelectTrigger2.default,
  open: false,
  placeholder: 'Choose an option',
  searchPlaceholder: '',
  emptyText: 'No results',
  selectedItem: {
    value: '',
    text: ''
  },
  selectedItems: [],
  optionValue: 'value',
  optionText: 'text',
  onChange: _noop2.default,
  onDelete: _noop2.default,
  onEmptySelected: _noop2.default,
  onOpen: _noop2.default
};

exports.default = Select;