@m-materials/com-list/lib/index.js

带远程加载功能的下拉列表

"use strict";

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

exports.__esModule = true;
exports["default"] = ComList;

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

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

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

var _antd = require("antd");

var _axios = _interopRequireDefault(require("axios"));

var _lodash = require("lodash");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactCustomScrollbars = require("react-custom-scrollbars");

var _reactDom = _interopRequireDefault(require("react-dom"));

var _classnames = _interopRequireDefault(require("classnames"));

require("./index.less");

var _excluded = ["width", "listProps", "reader", "allowClear", "disabled", "showSearch", "searchPlaceHolder", "placeholder", "style", "className"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ComList(props) {
  var _this = this;

  var width = props.width,
      listProps = props.listProps,
      reader = props.reader,
      allowClear = props.allowClear,
      disabled = props.disabled,
      showSearch = props.showSearch,
      searchPlaceHolder = props.searchPlaceHolder,
      placeholder = props.placeholder,
      _props$style = props.style,
      style = _props$style === void 0 ? {} : _props$style,
      className = props.className,
      others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);

  var _useState = (0, _react.useState)(false),
      loading = _useState[0],
      setLoading = _useState[1];

  var _useState2 = (0, _react.useState)(false),
      showList = _useState2[0],
      setShowList = _useState2[1];

  var _useState3 = (0, _react.useState)(),
      value = _useState3[0],
      setValue = _useState3[1];

  var _useState4 = (0, _react.useState)([]),
      listData = _useState4[0],
      setListData = _useState4[1];

  var _useState5 = (0, _react.useState)({}),
      pagination = _useState5[0],
      setPagination = _useState5[1];

  var comboListRef = null;
  var data = [];
  var loaded = false;
  (0, _react.useEffect)(function () {
    var defaultValue = props.defaultValue,
        value = props.value,
        _props$dataSource = props.dataSource,
        dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
        pagination = props.pagination;
    var defaultV = value || defaultValue || undefined;
    loaded = false;
    data = [].concat(dataSource);
    var defaultPagination = pagination === false ? false : (0, _extends2["default"])({
      current: 1,
      pageSize: 15,
      total: dataSource.length || 0
    }, (0, _lodash.isBoolean)(pagination) ? {} : pagination);
    var defaultData = dataSource;

    if (!(0, _lodash.isBoolean)(defaultPagination) && (0, _lodash.isPlainObject)(defaultPagination)) {
      defaultData = data.slice(0, defaultPagination.current * defaultPagination.pageSize);
    }

    setValue(defaultV);
    setLoading(false);
    setListData(defaultData);
    setPagination(defaultPagination);
    setShowList(false);
  }, []);
  (0, _react.useEffect)(function () {
    var defaultValue = props.defaultValue,
        value = props.value;
    var defaultV = value || defaultValue || undefined;
    Object.assign(pagination, {
      current: 1
    });
    setValue(defaultV);
    setPagination(pagination);
    return function () {
      document.removeEventListener('mousedown', hideComboList);
    };
  }, [props.cascadeParams, props.value]);

  var hideComboList = function hideComboList(e) {
    var tDom = _reactDom["default"].findDOMNode(comboListRef);

    if (showList) {
      if (tDom && tDom.contains(e.target)) {
        focus();
      } else {
        setTimeout(function () {
          setShowList(false);
        });
      }
    }
  };

  var showComboList = function showComboList(showList) {
    if (showList) {
      var store = _this.props.store;

      if (store) {
        getData();
      }

      setShowList(showList);
    }
  };

  var getReaderData = function getReaderData(obj) {
    var reader = _this.props.reader;
    var data = [];

    if (reader.data) {
      data = getReader(reader.data, obj) || [];
    }

    return data;
  };

  var getReader = function getReader(readerField, obj) {
    var data = null;

    if (typeof obj === 'object' && readerField) {
      var s = readerField.split('.');
      var d = obj[s[0]];

      for (var i = 1; i < s.length; i++) {
        d = d[s[i]];

        if (d instanceof Array && d.length > 0 && i < s.length - 1) {
          d = d[0];
        }
      }

      if (d) {
        data = d;
      }
    }

    return data;
  };

  var getData = function getData() {
    var cascadeParams = props.cascadeParams,
        remotePaging = props.remotePaging,
        searchProperties = props.searchProperties;
    var superParams = (0, _extends2["default"])({}, params || {});

    if (remotePaging && !(0, _lodash.isBoolean)(pagination) && (0, _lodash.isPlainObject)(pagination)) {
      Object.assign(superParams, {
        quickSearchValue: _this.quickSearchValue,
        quickSearchProperties: searchProperties,
        pageInfo: {
          page: pagination.current,
          rows: pagination.pageSize
        }
      });
    }

    if (cascadeParams) {
      Object.assign(superParams, cascadeParams);
    }

    loadData(superParams);
  };

  var loadData = function loadData(params) {
    var store = props.store,
        afterLoaded = props.afterLoaded,
        remotePaging = props.remotePaging,
        reader = props.reader;

    var _ref = store || {},
        url = _ref.url,
        type = _ref.type;

    setLoading(true);
    var requestOptions = {
      method: type,
      url: url,
      headers: {
        neverCancel: true
      }
    };

    if (type.toLocaleLowerCase() === 'get') {
      requestOptions.params = params;
    } else {
      requestOptions.data = params;
    }

    if (url) {
      (0, _axios["default"])(requestOptions).then(function (res) {
        if (res.success) {
          var resultData = res.data || [];
          var ds = [];

          if (reader && reader.data) {
            ds = getReaderData(resultData);
          } else if (resultData instanceof Array) {
            ds = resultData;
          } else if (resultData.rows instanceof Array) {
            ds = resultData.rows;
          }

          if (remotePaging && !(0, _lodash.isBoolean)(pagination) && (0, _lodash.isPlainObject)(pagination)) {
            setListData(ds);
            setPagination((0, _extends2["default"])({}, pagination, {
              current: 1,
              total: resultData.records
            }));
          } else {
            _this.data = ds;

            var _listData = [].concat(ds);

            var paginationTmp = pagination;

            if (!(0, _lodash.isBoolean)(pagination) && (0, _lodash.isPlainObject)(pagination)) {
              paginationTmp = (0, _extends2["default"])({}, pagination, {
                current: 1,
                total: ds.length
              });
              var _pagination$pageSize = pagination.pageSize,
                  pageSize = _pagination$pageSize === void 0 ? 15 : _pagination$pageSize;
              _listData = _this.data.slice(0, pageSize);
            }

            setListData(_listData);
            setPagination(paginationTmp);
          }

          if (afterLoaded && afterLoaded instanceof Function) {
            afterLoaded(ds);
          }
        }
      })["finally"](function () {
        _this.loaded = true;
        setLoading(false);
      });
    }
  };
  /**
   * 分页查询
   */


  var onPageChange = function onPageChange(current, pageSize) {
    var remotePaging = props.remotePaging;
    var paginationTmp = pagination;

    if (!(0, _lodash.isBoolean)(pagination) && (0, _lodash.isPlainObject)(pagination)) {
      paginationTmp = (0, _extends2["default"])({}, pagination, {
        current: current,
        pageSize: pageSize
      });
    }

    setPagination(paginationTmp);

    if (remotePaging) {
      _this.loaded = false;
      getData();
    } else {
      var newData = _this.getLocalFilterData();

      var _listData2 = newData.slice((current - 1) * pageSize, current * pageSize);

      setListData(_listData2);
    }
  };

  var afterSelect = function afterSelect(item, index) {
    var _ref2, _ref3;

    var afterSelect = props.afterSelect,
        onChange = props.onChange,
        reader = props.reader,
        form = props.form,
        name = props.name;
    setShowList(false);
    setValue(getReader(reader.name, item));
    var data = name ? (_ref2 = {}, _ref2[name] = getReader(reader.name, item), _ref2) : (_ref3 = {}, _ref3[reader.name] = getReader(reader.name, item), _ref3);

    if (Array.isArray(reader.field)) {
      reader.field.forEach(function (k) {
        data[k] = getReader(k, item);
      });
    }

    if (form) {
      var formData = form.getFieldsValue();
      Object.assign(formData, data);

      if (form) {
        form.setFieldsValue(formData);
      }
    }

    if (onChange && onChange instanceof Function) {
      onChange(value);
    }

    if (afterSelect) {
      afterSelect(item, index);
    }
  };

  var getLocalFilterData = function getLocalFilterData() {
    var reader = props.reader,
        name = props.name;
    var newData = _this.data;
    var searchValue = _this.quickSearchValue;

    if (searchValue) {
      var filterName = name;

      if (reader && reader.name) {
        filterName = reader.name;
      }

      newData = newData.filter(function (item) {
        var fieldValue = getReader(filterName, item);

        if (fieldValue) {
          return fieldValue.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
        }

        return false;
      });
    }

    return newData;
  };

  var onClearValue = function onClearValue() {
    var _data;

    var afterClear = props.afterClear,
        form = props.form,
        name = props.name,
        reader = props.reader,
        _props$field = props.field,
        field = _props$field === void 0 ? [] : _props$field;
    setValue(undefined);
    var data = (_data = {}, _data[name] = null, _data);

    if (reader && reader.field && field.length === reader.field.length) {
      field.forEach(function (f) {
        data[f] = null;
      });
    }

    if (form) {
      form.setFieldsValue(data);
    }

    if (afterClear && afterClear instanceof Function) {
      afterClear();
    }
  };

  var onSearchChange = function onSearchChange(e) {
    _this.quickSearchValue = e.target.value;
  };

  var focus = function focus() {
    if (_this.searchInput && _this.searchInput.input) {
      setCursorPosition(_this.searchInput.input.input, _this.quickSearchValue.length);
    }
  };

  var onSearch = function onSearch() {
    var remotePaging = props.remotePaging;
    var paginationTmp = pagination;

    if (!(0, _lodash.isBoolean)(pagination)) {
      paginationTmp = (0, _extends2["default"])({}, pagination, {
        current: 1
      });
    }

    if (remotePaging) {
      _this.loaded = false;
      setPagination(paginationTmp);
      focus();
      getData();
    } else {
      var newData = getLocalFilterData();

      var _listData3 = [].concat(newData);

      if (!(0, _lodash.isBoolean)(paginationTmp) && (0, _lodash.isPlainObject)(paginationTmp)) {
        _listData3 = newData.slice(0, paginationTmp.pageSize);
        Object.assign(paginationTmp, {
          current: 1,
          total: newData.length
        });
      }

      setListData(_listData3);
      setPagination(paginationTmp);

      _this.focus();
    }
  };

  var initComboList = function initComboList(ref) {
    if (ref) {
      comboListRef = ref;

      if (width && width > 0) {
        ref.parentNode.style.width = width + "px";
      }
    }
  };

  var getRowKey = function getRowKey(item, index) {
    var rowKey = props.rowKey;
    var key;

    if (typeof rowKey === 'function') {
      key = rowKey(item);
    } else if (typeof rowKey === 'string') {
      key = item[rowKey];
    } else {
      key = item.key;
    }

    if (!key) {
      key = "list-item-" + index;
    }

    return key;
  };

  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    className: (0, _classnames["default"])('com-list')
  }, others), /*#__PURE__*/_react["default"].createElement(_antd.Select // ref={ele => (this.select = ele)}
  // onDropdownVisibleChange={showComboList}
  , (0, _extends2["default"])({
    allowClear: allowClear,
    style: {
      width: '100%'
    },
    placeholder: placeholder,
    onChange: onClearValue,
    value: value,
    disabled: disabled
  }, others, {
    dropdownRender: function dropdownRender() {
      return /*#__PURE__*/_react["default"].createElement("div", {
        ref: function ref(_ref4) {
          return initComboList(_ref4);
        }
      }, showSearch ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "action-bar"
      }, /*#__PURE__*/_react["default"].createElement(Search, {
        ref: function ref(node) {
          return _this.searchInput = node;
        },
        placeholder: searchPlaceHolder,
        onChange: onSearchChange,
        onSearch: onSearch,
        onPressEnter: onSearch
      })) : null, /*#__PURE__*/_react["default"].createElement("div", {
        className: "list-body"
      }, /*#__PURE__*/_react["default"].createElement(_reactCustomScrollbars.Scrollbars, {
        style: {
          height: '220px'
        }
      }, /*#__PURE__*/_react["default"].createElement(_antd.List, {
        itemLayout: listProps && listProps.itemLayout ? listProps.itemLayout : 'horizontal',
        dataSource: listData,
        loading: loading,
        renderItem: function renderItem(item, index) {
          var _cls;

          return /*#__PURE__*/_react["default"].createElement(_antd.List.Item, {
            key: getRowKey(item, index),
            onClick: function onClick() {
              return afterSelect(item, index);
            },
            className: (0, _classnames["default"])((_cls = {}, _cls[(0, _classnames["default"])('row-selected')] = getReader(reader.name, item) === value, _cls))
          }, /*#__PURE__*/_react["default"].createElement(_antd.Skeleton, {
            loading: loading,
            active: true
          }, listProps && listProps.renderItem ? listProps.renderItem(item, index) : /*#__PURE__*/_react["default"].createElement(_antd.List.Item.Meta, {
            title: getReader(reader.name, item),
            description: reader.description ? getReader(reader.description, item) : ''
          })));
        }
      }))), props.pagination === false ? null : /*#__PURE__*/_react["default"].createElement("div", {
        className: "list-page-bar"
      }, /*#__PURE__*/_react["default"].createElement(_antd.Pagination, (0, _extends2["default"])({
        simple: true,
        onChange: onPageChange
      }, pagination))));
    }
  })));
}

ComList.defaultProps = {
  disabled: false
};
ComList.propTypes = {
  cascadeParams: _propTypes["default"].object,
  disabled: _propTypes["default"].bool,
  value: _propTypes["default"].any,
  defaultValue: _propTypes["default"].any,
  allowClear: _propTypes["default"].bool,
  classNames: _propTypes["default"].string,
  placeholder: _propTypes["default"].string,
  store: _propTypes["default"].shape({
    type: _propTypes["default"].oneOf(['GET', 'get', 'POST', 'post']),
    url: _propTypes["default"].string,
    params: _propTypes["default"].object,
    autoLoad: _propTypes["default"].bool
  }),
  reader: _propTypes["default"].shape({
    data: _propTypes["default"].string,
    name: _propTypes["default"].string,
    field: _propTypes["default"].array,
    description: _propTypes["default"].string
  }).isRequired,
  remotePaging: _propTypes["default"].bool,
  showSearch: _propTypes["default"].bool,
  width: _propTypes["default"].number,
  searchPlaceHolder: _propTypes["default"].string,
  searchProperties: _propTypes["default"].array,
  dataSource: _propTypes["default"].array,
  afterLoaded: _propTypes["default"].func,
  afterSelect: _propTypes["default"].func,
  afterClear: _propTypes["default"].func,
  listProps: _propTypes["default"].shape({
    itemLayout: _propTypes["default"].oneOf(['vertical', 'horizontal']),
    renderItem: _propTypes["default"].func
  }),
  rowKey: _propTypes["default"].string,
  name: _propTypes["default"].string.isRequired,
  field: _propTypes["default"].array
};