@beisen-phoenix/lookup/cjs/components/simpleList/index.js

---

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

require("core-js/modules/es6.array.find");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var React = _interopRequireWildcard(require("react"));

var _search = _interopRequireDefault(require("@beisen-phoenix/search"));

var _commonUtils = _interopRequireDefault(require("@beisen-phoenix/common-utils"));

var _loading = require("@beisen-phoenix/loading");

var _button = _interopRequireDefault(require("@beisen-phoenix/button"));

var _placeHolder = _interopRequireDefault(require("./placeHolder"));

var _trim = _interopRequireDefault(require("lodash/trim"));

var _item = _interopRequireDefault(require("./item"));

require("./index.css");

var _util = require("../../util.js");

var classes = _commonUtils.default.BEMClass('lookup-list');

var defaultTranslation = {
  moreText: '全部查找',
  noDataText: '这里什么都没有',
  btnOkText: '确定'
};

var SimpleList =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(SimpleList, _React$Component);

  // 默认配置
  function SimpleList(props) {
    var _this;

    (0, _classCallCheck2.default)(this, SimpleList);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(SimpleList).call(this, props));
    _this.inputRef = React.createRef();

    _this.setSearchInputFocus = function () {
      var autoFocus = _this.props.autoFocus;
      autoFocus && _this.inputRef.current && _this.inputRef.current.focus();
    };

    _this.validateSearch = function (val) {
      console.log(val);
      var res = {
        value: val,
        info: ''
      };

      if (val.length > 200) {
        return {
          value: val.slice(0, 200),
          info: '搜索字符不能大于200个',
          clearTipAfter: 5000
        };
      }

      return res;
    };

    _this.simpleSetData = function (data) {
      _this.setState(data);
    };

    _this.filterOptionsData = function (qryStr) {
      var _this$props$options = _this.props.options,
          options = _this$props$options === void 0 ? [] : _this$props$options;
      return (0, _trim.default)(qryStr) == '' ? options : options.filter(function (n) {
        return n.label && n.label.indexOf(qryStr) > -1;
      });
    };

    _this.fetchSplData = function (qryStr) {
      var _this$props = _this.props,
          searchUrl = _this$props.searchUrl,
          formatData = _this$props.formatData;

      _this.setState({
        loading: true
      });

      var param = {
        key: qryStr || ''
      };

      if (searchUrl) {
        //拿到请求，直接内部发送请求
        (0, _util.callFetch)(searchUrl, param, function (res) {
          _this.simpleSetData({
            loading: false,
            options: formatData && formatData(res.data) || res.data
          });
        }, function (res) {
          _this.simpleSetData({
            loading: false,
            options: []
          });
        });
      }
    };

    _this.simpleFetchData = function (qryStr) {
      var options = _this.props.options;
      options ? _this.simpleSetData({
        options: _this.filterOptionsData(qryStr)
      }) : _this.fetchSplData(qryStr);
    };

    _this.handleSearch = function (value) {
      var tmpString = String(value);
      var finalString = tmpString;
      var tipInfo = ''; //处理字数超200提示截断

      if (_this.validateSearch) {
        var res = _this.validateSearch(tmpString);

        if (res) {
          tipInfo = res.info;
          finalString = res.value;
          setTimeout(function () {
            _this.setState({
              searchTip: ''
            });
          }, 3000);
        } else {
          tipInfo = '';
          finalString = tmpString;
        }
      }

      var val = finalString || tmpString;

      _this.setState({
        searchValue: val,
        searchTip: tipInfo || ''
      }); //搜索回调事件传入，则全部走外部搜索


      var onSearchChange = _this.props.onSearchChange;

      if (onSearchChange) {
        onSearchChange(val);
      }

      _this.simpleFetchData(val);
    };

    _this.renderSearchInput = function () {
      var _this$props2 = _this.props,
          isSearchBox = _this$props2.isSearchBox,
          autoFocus = _this$props2.autoFocus;
      var _this$state = _this.state,
          searchValue = _this$state.searchValue,
          searchTip = _this$state.searchTip;
      return isSearchBox ? React.createElement("div", {
        className: classes({
          element: 'searchBox'
        })
      }, React.createElement(_search.default, {
        inputRef: function inputRef(node) {
          _this.inputRef.current = node;
        },
        value: searchValue,
        onChange: _this.handleSearch,
        extend: searchTip,
        autoFocus: autoFocus
      })) : null;
    };

    _this.onSearchAllClick = function () {
      var onSearchAllClick = _this.props.onSearchAllClick;
      var selectValue = _this.state.selectValue;
      onSearchAllClick && onSearchAllClick(selectValue);
    };

    _this.renderSearAllBtn = function () {
      var _this$props3 = _this.props,
          isAdvanceVbl = _this$props3.isAdvanceVbl,
          moreText = _this$props3.moreText,
          _this$props3$translat = _this$props3.translation,
          translation = _this$props3$translat === void 0 ? defaultTranslation : _this$props3$translat;
      return isAdvanceVbl ? React.createElement("div", {
        className: classes({
          element: 'searchAll-tool'
        })
      }, React.createElement("span", {
        className: classes({
          element: 'searchAll-tool-btn'
        }),
        onClick: _this.onSearchAllClick
      }, moreText || translation.moreText)) : null;
    };

    _this.onOk = function (data) {
      var onOk = _this.props.onOk;
      var selectValue = _this.state.selectValue; //处理多选和单选时，取值问题

      var selectData = data && data.type == 'click' && selectValue || data;

      if (onOk) {
        onOk(selectData);
      }
    };

    _this.renderOkBtn = function () {
      var _this$props4 = _this.props,
          multiple = _this$props4.multiple,
          btnOkText = _this$props4.btnOkText,
          _this$props4$translat = _this$props4.translation,
          translation = _this$props4$translat === void 0 ? defaultTranslation : _this$props4$translat;
      return multiple ? React.createElement("div", {
        className: classes({
          element: 'footer-tool'
        })
      }, React.createElement(_button.default, {
        onClick: _this.onOk,
        size: "small"
      }, btnOkText || translation.btnOkText)) : null;
    };

    _this.getIsSelected = function (selectValue, n) {
      return !!(selectValue || []).find(function (v) {
        return v.value == n.value;
      });
    };

    _this.renderContent = function () {
      var _this$props5 = _this.props,
          isAvator = _this$props5.isAvator,
          multiple = _this$props5.multiple,
          noDataText = _this$props5.noDataText,
          simpleListCount = _this$props5.simpleListCount,
          _this$props5$translat = _this$props5.translation,
          translation = _this$props5$translat === void 0 ? defaultTranslation : _this$props5$translat;
      var _this$state2 = _this.state,
          options = _this$state2.options,
          selectValue = _this$state2.selectValue,
          searchValue = _this$state2.searchValue,
          loading = _this$state2.loading; //数据加载中

      if (loading) {
        return React.createElement(_loading.ChrysanthemumLoading, null);
      } else {
        //数据为空，加载空数据
        if (options.length == 0) {
          return React.createElement(_placeHolder.default, {
            translation: {
              noData: noDataText || translation.noDataText
            }
          });
        } //渲染数据


        return (options || []).slice(0, simpleListCount || 50).map(function (n, index) {
          return React.createElement(_item.default, (0, _extends2.default)({
            key: index
          }, n, {
            isAvator: isAvator,
            onClick: _this.onItemClick,
            isSelected: _this.getIsSelected(selectValue, n),
            searchWord: searchValue,
            srcValue: n,
            multiple: multiple
          }));
        });
      }
    };

    _this.onItemClick = function (param) {
      var multiple = _this.props.multiple;
      var selectValue = _this.state.selectValue;
      var isSelected = param.isSelected,
          other = (0, _objectWithoutProperties2.default)(param, ["isSelected"]); //处理多选和单选的情况，返回值都是数据

      var _value = isSelected ? (multiple ? selectValue || [] : []).concat([other]) : (selectValue || []).filter(function (n) {
        return n.value != param.value;
      });

      _this.setState({
        selectValue: _value
      }); //如果单选则触发选中事件


      if (!multiple) {
        _this.onOk(param);
      }
    };

    _this.state = {
      options: props.options || [],
      selectValue: props.selectValue,
      searchTip: '',
      loading: false,
      searchValue: ''
    };
    return _this;
  }

  (0, _createClass2.default)(SimpleList, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var options = this.props.options;

      if (options && options.length > 0) {
        return;
      }

      this.fetchSplData('');
      this.setSearchInputFocus();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState, snapshot) {
      var isUpdate = (0, _util.getUpdateData)(['selectValue', 'options'], this.props, prevProps);

      if (isUpdate) {
        this.setState(isUpdate);
      }
    } //设置自动获取焦点

  }, {
    key: "render",
    value: function render() {
      var _this$props6 = this.props,
          isSearchBox = _this$props6.isSearchBox,
          multiple = _this$props6.multiple,
          isAdvanceVbl = _this$props6.isAdvanceVbl;
      var searchInput = this.renderSearchInput();
      var searchAllBtn = this.renderSearAllBtn();
      var content = this.renderContent();
      var okBtn = this.renderOkBtn();
      var modifiers = {};
      var simpleClass = isSearchBox ? isAdvanceVbl ? 'simpleOnSearch' : 'simpleOnSearchNoMore' : isAdvanceVbl ? 'simpleNoSearch' : 'simpleNoSearchNoMore';
      modifiers[simpleClass] = !multiple;
      var multClass = 'ex' + (!isAdvanceVbl ? '-nomore' : '') + (!isSearchBox ? '-nosearch' : '');
      modifiers[multClass] = multiple;
      return React.createElement("div", {
        className: classes({
          element: ''
        })
      }, searchInput, React.createElement("div", {
        className: classes({
          element: 'items',
          modifiers: modifiers
        })
      }, content), searchAllBtn, okBtn);
    }
  }]);
  return SimpleList;
}(React.Component);

exports.default = SimpleList;
SimpleList.defaultProps = {
  isSearchBox: true,
  isAvator: false,
  multiple: false,
  isAdvanceVbl: true,
  loading: false,
  selectValue: [],
  translation: defaultTranslation
};