@beisen/ethos/lib/user-selector/CommonModel.js

beisencloud pc react components

'use strict';

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 _class, _temp; /* eslint-disable */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _UserItems = require('./UserItems');

var _UserItems2 = _interopRequireDefault(_UserItems);

var _search = require('../search');

var _search2 = _interopRequireDefault(_search);

var _loading = require('../loading');

var _loading2 = _interopRequireDefault(_loading);

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

// import BeisenScrollBar from '@beisen/beisen-scroll-bar';
var CommonModel = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(CommonModel, _Component);

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

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

    _this.state = {
      isSearch: false,
      index: -1,
      select: false,
      fetchingFlag: true
    };
    _this.searchVal = null;
    _this.userClick = _this.userClick.bind(_this);
    _this.changeToMulti = _this.changeToMulti.bind(_this);
    _this.getParNode = _this.getParNode.bind(_this);
    _this.userSelect = _this.userSelect.bind(_this);
    _this.userKeyDown = _this.userKeyDown.bind(_this);
    _this.onMouseOver = _this.onMouseOver.bind(_this);
    _this.isSearchFetchStart = false;
    return _this;
  }

  (0, _createClass3.default)(CommonModel, [{
    key: 'userKeyDown',
    value: function userKeyDown(e) {
      var usData = this.state.isSearch ? this.props.searchs : this.props.usedusers;
      var trueIndex = void 0;
      switch (e.keyCode) {
        case 40:
          //down
          if (this.state.index < 0) {
            trueIndex = 0;
          } else {
            trueIndex = ++this.state.index % usData.length;
            this.refs.usSearchResult.scrollTop = trueIndex > 5 ? 50 * (trueIndex - 5) : void 0;
          }
          this.setState({ index: trueIndex });
          break;
        case 13:
          //enter
          var data = [usData[this.state.index]];
          this.props.onSure(data);
          break;
        case 38:
          //up
          if (this.state.index <= 0) {
            trueIndex = usData.length - 1;
          } else {
            trueIndex = --this.state.index % usData.length;
          }
          this.refs.usSearchResult.scrollTop = trueIndex > 5 ? 50 * (trueIndex - 5) : void 0;
          this.setState({ index: trueIndex });
          break;
        default:
          break;
      }
    }
  }, {
    key: 'onMouseOver',
    value: function onMouseOver(e, index) {
      this.setState({ index: index });
    }
  }, {
    key: 'getParNode',
    value: function getParNode(node, target) {
      if (!node) return null;
      if (node.tagName == target.toUpperCase()) return node;
      return this.getParNode(node.parentNode, target);
    }
    //点击li

  }, {
    key: 'userSelect',
    value: function userSelect(liNode, sigle) {
      //this.userClick(liNode,sigle);
      var isSearch = this.state.isSearch;

      var id = liNode.getAttribute('data-id');
      var tempDataNow = isSearch ? 'searchs' : 'usedusers';
      var curData = this.props[tempDataNow].filter(function (item, index) {
        return item.Id == parseInt(id);
      });
      this.props.onSure && this.props.onSure(curData);
      this.props.closeComponent();
    }
  }, {
    key: 'userClick',
    value: function userClick(event, sigle) {
      event.stopPropagation();
      var isSearch = this.state.isSearch;
      var _props = this.props,
          allowSearchNull = _props.allowSearchNull,
          translation = _props.translation;

      var node = event.target;
      if (!node) return;
      var parNode = this.getParNode(node, 'li');
      var id = parNode && (parNode.className == 'us-item-empty' ? allowSearchNull : parNode.getAttribute('data-id'));
      var tempDataNow = isSearch ? 'searchs' : 'usedusers';
      var curData = this.props[tempDataNow].filter(function (item, index) {
        return item.Id == parseInt(id);
      });
      if (parNode && parNode.className == 'us-item-empty') {
        curData.push({
          Email: "",
          Id: allowSearchNull,
          Name: translation.emptyText,
          UserAvatar: {}
        });
      }
      this.props.onSure && this.props.onSure(curData);
      this.props.closeComponent();
    }
    // 渲染搜索

  }, {
    key: 'renderSearchs',
    value: function renderSearchs() {
      var _this2 = this;

      var _props2 = this.props,
          searchs = _props2.searchs,
          allowSearchNull = _props2.allowSearchNull,
          translation = _props2.translation,
          isShowDepartmentName = _props2.isShowDepartmentName;

      if (this.isSearchFetchStart === true) {
        return _react2.default.createElement(_loading2.default, { style: { "borderRadius": "5px" }, type: 'small' });
      }
      if (searchs.length == 0) {
        return _react2.default.createElement(
          'div',
          { className: 'us-no-data' },
          _react2.default.createElement('span', { className: 'empty-con', 'data-bg-text': translation.emptyBgText })
        );
      } else {
        var searchsResult = searchs && searchs.map(function (item, index) {
          var holdOn = false;
          if (_this2.state.index == index) {
            holdOn = true;
          }
          return _react2.default.createElement(_UserItems2.default, (0, _extends3.default)({
            onMouseOver: _this2.onMouseOver }, item, {
            index: index,
            ref: 'userItem',
            holdOn: holdOn,
            userKeyDown: _this2.userKeyDown,
            key: index,
            userSelect: _this2.userSelect,
            searchs: searchs,
            isSearch: _this2.state.isSearch,
            searchVal: _this2.searchVal,
            translation: translation,
            isShowDepartmentName: isShowDepartmentName
          }));
        });
        if (allowSearchNull) {
          return _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
              'li',
              { className: 'us-item-empty' },
              translation.emptyText
            ),
            searchsResult
          );
        } else {
          return searchsResult;
        }
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (!nextProps.isFetching && nextProps.isFetching == false && this.state.fetchingFlag == true) {
        this.setState({ fetchingFlag: false });
      }
      if (this.props.isSearchFetching === true && nextProps.isSearchFetching === false) {
        this.isSearchFetchStart = false;
      }
    }
    /* 渲染常用 */

  }, {
    key: 'renderUsed',
    value: function renderUsed() {
      var _this3 = this;

      var _props3 = this.props,
          usedusers = _props3.usedusers,
          allowSearchNull = _props3.allowSearchNull,
          translation = _props3.translation,
          isShowDepartmentName = _props3.isShowDepartmentName;
      var fetchingFlag = this.state.fetchingFlag;

      var isWin10 = navigator.userAgent.indexOf("Windows NT 10.0") > -1 && !!window.ActiveXObject || "ActiveXObject" in window;
      if (fetchingFlag && !isWin10) {
        return _react2.default.createElement(_loading2.default, { style: { "borderRadius": "5px" }, type: 'small' });
      } else if (usedusers.length == 0) {
        return _react2.default.createElement(
          'div',
          { className: 'us-no-data' },
          _react2.default.createElement(
            'span',
            { className: 'empty-con', 'data-bg-text': translation.emptyBgText },
            allowSearchNull ? _react2.default.createElement(
              'li',
              { className: 'us-item-empty' },
              translation.emptyText
            ) : null
          )
        );
      } else {
        var useResult = usedusers && usedusers.map(function (item, index) {
          var holdOn = false;
          if (_this3.state.index == index) {
            holdOn = true;
          }
          return _react2.default.createElement(_UserItems2.default, (0, _extends3.default)({
            index: index,
            ref: 'userItem',
            holdOn: holdOn,
            userKeyDown: _this3.userKeyDown }, item, {
            userSelect: _this3.userSelect,
            key: index,
            translation: translation,
            isShowDepartmentName: isShowDepartmentName
          }));
        });
        if (allowSearchNull) {
          return _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
              'li',
              { className: 'us-item-empty' },
              translation.emptyText
            ),
            useResult
          );
        } else {
          return useResult;
        }
      }
    }
    /*
      搜索回调
     */

  }, {
    key: 'getSearch',
    value: function getSearch(val) {
      if (val.value.length == 0) {
        this.setState({
          isSearch: false
        });
        return;
      }
      //对外提供一个对数据format的方法，允许外界对输入对数据进行修改删减，将会在发送请求前处理,此方法需要返回处理后的数据
      var searchDataFormat = this.props.searchDataFormat;
      if (typeof searchDataFormat === "function") {
        val.event.target.value = val.value = searchDataFormat(val.value, val.event);
      }
      //wuzhe----搜索值加上编码
      val.value = encodeURIComponent(val.value);
      this.searchVal = val.value;
      var _props4 = this.props,
          apiType = _props4.apiType,
          isUseInitial = _props4.isUseInitial,
          urls = _props4.urls;

      if (isUseInitial) {
        var tempUrl = urls['get' + apiType]('searchUrl') + '&filters=' + val.value;
        this.props.getSearchInfo && this.props.getSearchInfo(val.value, tempUrl);
      } else {
        this.props.getSearchInfo && this.props.getSearchInfo(val.value);
      }
      this.isSearchFetchStart = true;
      this.setState({
        isSearch: true,
        index: 0
      });
    }
    /*
      切换高级模式
     */

  }, {
    key: 'changeToMulti',
    value: function changeToMulti(event) {
      event.stopPropagation();
      event.nativeEvent.stopImmediatePropagation();
      this.props.changeToMulti && this.props.changeToMulti();
    }
  }, {
    key: 'render',
    value: function render() {
      var isSearch = this.state.isSearch;
      var _props5 = this.props,
          searchs = _props5.searchs,
          singleSelect = _props5.singleSelect,
          showToMultiBtn = _props5.showToMultiBtn,
          searchPlaceholde = _props5.searchPlaceholde,
          translation = _props5.translation;

      var SearchData = {
        "placeholder": searchPlaceholde,
        "iconName": "sys-icon-sousuo",
        active: true,
        onChange: this.getSearch.bind(this)
      };
      var comContent = searchs && isSearch ? this.renderSearchs() : this.renderUsed();
      return _react2.default.createElement(
        'div',
        { className: 'us-simple-container', tabIndex: '1', onKeyDown: this.userKeyDown },
        _react2.default.createElement(
          'div',
          { className: 'us-search' },
          _react2.default.createElement(_search2.default, SearchData)
        ),
        _react2.default.createElement(
          'div',
          { className: 'us-search-result', ref: 'usSearchResult' },
          _react2.default.createElement(
            'ul',
            { className: 'us-item-top', onClick: this.userClick },
            comContent
          )
        ),
        _react2.default.createElement(
          'p',
          { className: 'us-to-multi clearfix', style: singleSelect ? { display: 'none' } : { display: 'block' } },
          showToMultiBtn ? _react2.default.createElement(
            'a',
            { href: 'javascript:void(0)', onClick: this.changeToMulti },
            translation.advancedModeText,
            _react2.default.createElement('span', { className: 'pc-sys-arrowright-active-svg' })
          ) : ''
        )
      );
    }
  }]);
  return CommonModel;
}(_react.Component), _class.defaultProps = {
  searchPlaceholde: '请搜索'
}, _temp);

module.exports = CommonModel;