rmc-select-list/lib/MSelectList.js

m-select-list ui component for react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _util = require('./util');

var _zh_CN = require('./locale/zh_CN');

var _zh_CN2 = _interopRequireDefault(_zh_CN);

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
// import assign from 'object-assign';


function noop() {}

var MSelectList = _react2.default.createClass({
  displayName: 'MSelectList',

  propTypes: {
    children: _react.PropTypes.any,
    className: _react.PropTypes.string,
    prefixCls: _react.PropTypes.string,
    placeholder: _react.PropTypes.string,
    locale: _react.PropTypes.object,
    valueProp: _react.PropTypes.string,
    labelProp: _react.PropTypes.string,
    showCurrentSelected: _react.PropTypes.bool,
    showQuickSearchBar: _react.PropTypes.bool,
    showInput: _react.PropTypes.bool,
    data: _react.PropTypes.array,
    inputValue: _react.PropTypes.string,
    defaultInputValue: _react.PropTypes.string,
    value: _react.PropTypes.string,
    defaultValue: _react.PropTypes.string,
    onInputChange: _react.PropTypes.func,
    onChange: _react.PropTypes.func,
    onQfSelect: _react.PropTypes.func
  },
  getDefaultProps: function getDefaultProps() {
    return {
      prefixCls: 'rmc-select-list',
      placeholder: '搜索',
      locale: _zh_CN2.default,
      valueProp: 'value',
      labelProp: 'label',
      showCurrentSelected: true,
      showQuickSearchBar: true,
      showInput: false,
      onInputChange: noop,
      onChange: noop,
      onQfSelect: noop
    };
  },
  getInitialState: function getInitialState() {
    return {
      clickFeedBack: false,
      showSearchClear: false,
      showLighter: false,
      showQuickSearchBar: this.props.showQuickSearchBar,
      inputValue: this.props.inputValue || this.props.defaultInputValue || '',
      value: this.props.value || this.props.defaultValue
    };
  },
  componentDidMount: function componentDidMount() {
    var _refs = this.refs;
    var viewport = _refs.viewport;
    var quickSearchBar = _refs.quickSearchBar;

    quickSearchBar.style['margin-top'] = -(quickSearchBar.offsetHeight / 2 + 20) + 'px';

    var eventManager = new _util.EventManager(viewport);
    (0, _util.handleTapping)(eventManager, this);
    this.qfListEvent = (0, _util.handleQuickBar)(this, _reactDom2.default.findDOMNode(this));
    this.viewportEvent = eventManager;
  },
  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
    if ('inputValue' in nextProps) {
      this.setState({
        inputValue: nextProps.inputValue
      });
    }
    if ('value' in nextProps) {
      this.setState({
        value: nextProps.value
      });
    }
  },
  componentWillUnmount: function componentWillUnmount() {
    this.qfListEvent.endEvent();
    this.viewportEvent.endEvent();
  },
  onQfSelect: function onQfSelect(selectedItem) {
    this.props.onQfSelect(selectedItem);
  },
  onChange: function onChange(selectedItem) {
    this.props.onChange(selectedItem[this.props.valueProp], selectedItem);
  },
  onInputChange: function onInputChange(e) {
    var inputValue = e.target.value;
    this.setState({
      inputValue: inputValue
    });
    this.props.onInputChange(inputValue, e);
  },
  onSearch: function onSearch() {
    this.setState({
      showQuickSearchBar: false,
      showSearchClear: true
    });
  },
  onClear: function onClear() {
    var _this = this;

    this.setState({
      inputValue: '',
      showQuickSearchBar: true,
      showSearchClear: false
    }, function () {
      _this.refs.sinput.blur();
    });
  },
  getMatchData: function getMatchData(v) {
    var _this2 = this;

    var data = this.data;
    var found = [];
    var val = v.trim().toLowerCase();
    Object.keys(data).forEach(function (item) {
      data[item].forEach(function (d) {
        if (d[_this2.props.labelProp].indexOf(val) > -1 || d[_this2.props.valueProp].indexOf(val) > -1 || d.spell.toLowerCase().indexOf(val) > -1 || d.abbr.toLowerCase().indexOf(val) > -1) {
          found.push(d);
        }
      });
    });
    return found;
  },
  _initData: function _initData(data) {
    var _this3 = this;

    data.sort(function (a, b) {
      return a.spell.localeCompare(b.spell);
    });
    var transData = {};
    var cache = {};
    data.forEach(function (item) {
      /* eslint no-param-reassign:0 */
      item.QF = item.QF || item.spell[0].toUpperCase();
      item.abbr = item.abbr || item.spell.replace(/[a-z]+/g, '');
      transData[item.QF] = transData[item.QF] || [];
      cache[item[_this3.props.valueProp] + '_' + item.spell] = item;
      transData[item.QF].push(item);
    });
    this.cache = cache;
    return transData;
  },
  renderCommonItem: function renderCommonItem(data) {
    var _this4 = this;

    return data.map(function (item, index) {
      return _react2.default.createElement(
        'li',
        { key: index },
        _react2.default.createElement(
          'a',
          {
            'data-key': item[_this4.props.valueProp],
            'data-spell': item.spell
          },
          item[_this4.props.labelProp]
        )
      );
    });
  },
  renderData: function renderData() {
    var _this5 = this;

    var locale = this.props.locale;
    var data = this._initData([].concat(_toConsumableArray(this.props.data)));
    this.data = data;
    var searchKey = '_J_qf_key_DQ';
    var qfHtml = [];
    var normalHtml = [];
    var keyIndex = 1;
    var getQfItem = function getQfItem(sk, QF) {
      keyIndex++;
      return _react2.default.createElement(
        'li',
        { key: keyIndex },
        _react2.default.createElement(
          'a',
          { onClick: _this5.onQfSelect, 'data-qf-target': '.' + sk },
          QF
        )
      );
    };
    var getSection = function getSection(sk, QF, d) {
      return [_react2.default.createElement(
        'div',
        { className: (0, _classnames2.default)(_this5.props.prefixCls + '-item-order', searchKey) },
        QF
      ), _react2.default.createElement(
        'ul',
        { className: _this5.props.prefixCls + '-item' },
        _this5.renderCommonItem(d)
      )];
    };
    if (this.state.value) {
      var sel = this.props.data.filter(function (item) {
        return item[_this5.props.valueProp] === _this5.state.value;
      });
      if (this.props.showCurrentSelected) {
        qfHtml.push(getQfItem(searchKey, locale.currentQuickSearchText));
        normalHtml.push(getSection(searchKey, locale.currentSelectedTitle, sel));
      }
    }
    Object.keys(data).forEach(function (item) {
      var QF = data[item][0].QF;
      searchKey = '_J_qf_key_' + QF;
      qfHtml.push(getQfItem(searchKey, QF));
      normalHtml.push(getSection(searchKey, QF, data[item]));
    });
    return {
      qfHtml: qfHtml,
      normalHtml: normalHtml
    };
  },
  render: function render() {
    var _quickSearchBarCls, _normalViewCls, _searchViewCls, _lighterCls;

    var _props = this.props;
    var className = _props.className;
    var prefixCls = _props.prefixCls;
    var placeholder = _props.placeholder;
    var showInput = _props.showInput;

    var _renderData = this.renderData();

    var qfHtml = _renderData.qfHtml;
    var normalHtml = _renderData.normalHtml;

    var quickSearchBarCls = (_quickSearchBarCls = {}, _defineProperty(_quickSearchBarCls, prefixCls + '-quick-search-bar', true), _defineProperty(_quickSearchBarCls, prefixCls + '-hide', !this.state.showQuickSearchBar), _defineProperty(_quickSearchBarCls, prefixCls + '-on', this.state.clickFeedBack), _quickSearchBarCls);
    var normalViewCls = (_normalViewCls = {}, _defineProperty(_normalViewCls, prefixCls + '-content', true), _defineProperty(_normalViewCls, prefixCls + '-hide', this.state.showSearchClear && !!this.state.inputValue.length), _normalViewCls);
    var searchViewCls = (_searchViewCls = {}, _defineProperty(_searchViewCls, prefixCls + '-content', true), _defineProperty(_searchViewCls, prefixCls + '-hide', !this.state.showSearchClear || !this.state.inputValue.length), _searchViewCls);
    var lighterCls = (_lighterCls = {}, _defineProperty(_lighterCls, prefixCls + '-lighter', true), _defineProperty(_lighterCls, prefixCls + '-hide', !this.state.showLighter), _lighterCls);
    return _react2.default.createElement(
      'div',
      { className: (0, _classnames2.default)(className, prefixCls + '-playground') },
      _react2.default.createElement(
        'ul',
        { className: (0, _classnames2.default)(quickSearchBarCls), ref: 'quickSearchBar' },
        showInput ? _react2.default.createElement(
          'li',
          null,
          _react2.default.createElement(
            'a',
            { 'data-qf-target': '.' + prefixCls + '-search' },
            _react2.default.createElement('i', { className: prefixCls + '-icon-search' })
          )
        ) : null,
        qfHtml
      ),
      _react2.default.createElement(
        'div',
        { className: prefixCls + '-body', ref: 'viewport' },
        _react2.default.createElement(
          'div',
          { className: prefixCls + '-scroller', ref: 'container' },
          _react2.default.createElement(
            'div',
            { className: (0, _classnames2.default)(prefixCls + '-search', prefixCls + '-input-autoclear'),
              style: { display: showInput ? 'block' : 'none!important' }
            },
            _react2.default.createElement(
              'form',
              { className: prefixCls + '-search-input' },
              _react2.default.createElement('input', {
                className: prefixCls + '-search-value',
                type: 'text',
                placeholder: placeholder,
                'data-cid': 'sinput', ref: 'sinput',
                value: this.state.inputValue,
                onChange: this.onInputChange
              }),
              _react2.default.createElement(
                'div',
                {
                  className: prefixCls + '-search-clear',
                  'data-cid': 'clear',
                  style: { width: 'auto' }
                },
                _react2.default.createElement('i', {
                  className: prefixCls + '-icon-clear',
                  style: { visibility: this.state.showSearchClear ? 'visible' : 'hidden' }
                })
              )
            )
          ),
          _react2.default.createElement(
            'div',
            { className: (0, _classnames2.default)(normalViewCls), ref: 'normalView' },
            normalHtml
          ),
          _react2.default.createElement(
            'div',
            { className: (0, _classnames2.default)(searchViewCls), ref: 'searchView' },
            _react2.default.createElement(
              'ul',
              { className: prefixCls + '-item' },
              this.renderCommonItem(this.getMatchData(this.state.inputValue))
            )
          )
        )
      ),
      _react2.default.createElement('div', { className: (0, _classnames2.default)(lighterCls), ref: 'lighter' })
    );
  }
});
exports.default = MSelectList;
module.exports = exports['default'];