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

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

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["width", "listProps", "reader", "allowClear", "disabled", "showSearch", "searchPlaceHolder", "placeholder", "style", "className"];
import React, { useEffect, useState } from 'react';
import { List, Pagination, Select, Skeleton } from 'antd';
import axios from 'axios';
import { isBoolean, isPlainObject } from 'lodash';
import PropTypes from 'prop-types';
import { Scrollbars } from 'react-custom-scrollbars';
import ReactDOM from 'react-dom';
import cls from 'classnames';
import './index.less';
export default 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 = _objectWithoutPropertiesLoose(props, _excluded);

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

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

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

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

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

  var comboListRef = null;
  var data = [];
  var loaded = false;
  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 : _extends({
      current: 1,
      pageSize: 15,
      total: dataSource.length || 0
    }, isBoolean(pagination) ? {} : pagination);
    var defaultData = dataSource;

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

    setValue(defaultV);
    setLoading(false);
    setListData(defaultData);
    setPagination(defaultPagination);
    setShowList(false);
  }, []);
  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.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 = _extends({}, params || {});

    if (remotePaging && !isBoolean(pagination) && 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) {
      axios(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 && !isBoolean(pagination) && isPlainObject(pagination)) {
            setListData(ds);
            setPagination(_extends({}, pagination, {
              current: 1,
              total: resultData.records
            }));
          } else {
            _this.data = ds;

            var _listData = [].concat(ds);

            var paginationTmp = pagination;

            if (!isBoolean(pagination) && isPlainObject(pagination)) {
              paginationTmp = _extends({}, 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 (!isBoolean(pagination) && isPlainObject(pagination)) {
      paginationTmp = _extends({}, 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 (!isBoolean(pagination)) {
      paginationTmp = _extends({}, pagination, {
        current: 1
      });
    }

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

      var _listData3 = [].concat(newData);

      if (!isBoolean(paginationTmp) && 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.createElement("div", _extends({
    className: cls('com-list')
  }, others), /*#__PURE__*/React.createElement(Select // ref={ele => (this.select = ele)}
  // onDropdownVisibleChange={showComboList}
  , _extends({
    allowClear: allowClear,
    style: {
      width: '100%'
    },
    placeholder: placeholder,
    onChange: onClearValue,
    value: value,
    disabled: disabled
  }, others, {
    dropdownRender: function dropdownRender() {
      return /*#__PURE__*/React.createElement("div", {
        ref: function ref(_ref4) {
          return initComboList(_ref4);
        }
      }, showSearch ? /*#__PURE__*/React.createElement("div", {
        className: "action-bar"
      }, /*#__PURE__*/React.createElement(Search, {
        ref: function ref(node) {
          return _this.searchInput = node;
        },
        placeholder: searchPlaceHolder,
        onChange: onSearchChange,
        onSearch: onSearch,
        onPressEnter: onSearch
      })) : null, /*#__PURE__*/React.createElement("div", {
        className: "list-body"
      }, /*#__PURE__*/React.createElement(Scrollbars, {
        style: {
          height: '220px'
        }
      }, /*#__PURE__*/React.createElement(List, {
        itemLayout: listProps && listProps.itemLayout ? listProps.itemLayout : 'horizontal',
        dataSource: listData,
        loading: loading,
        renderItem: function renderItem(item, index) {
          var _cls;

          return /*#__PURE__*/React.createElement(List.Item, {
            key: getRowKey(item, index),
            onClick: function onClick() {
              return afterSelect(item, index);
            },
            className: cls((_cls = {}, _cls[cls('row-selected')] = getReader(reader.name, item) === value, _cls))
          }, /*#__PURE__*/React.createElement(Skeleton, {
            loading: loading,
            active: true
          }, listProps && listProps.renderItem ? listProps.renderItem(item, index) : /*#__PURE__*/React.createElement(List.Item.Meta, {
            title: getReader(reader.name, item),
            description: reader.description ? getReader(reader.description, item) : ''
          })));
        }
      }))), props.pagination === false ? null : /*#__PURE__*/React.createElement("div", {
        className: "list-page-bar"
      }, /*#__PURE__*/React.createElement(Pagination, _extends({
        simple: true,
        onChange: onPageChange
      }, pagination))));
    }
  })));
}
ComList.defaultProps = {
  disabled: false
};
ComList.propTypes = {
  cascadeParams: PropTypes.object,
  disabled: PropTypes.bool,
  value: PropTypes.any,
  defaultValue: PropTypes.any,
  allowClear: PropTypes.bool,
  classNames: PropTypes.string,
  placeholder: PropTypes.string,
  store: PropTypes.shape({
    type: PropTypes.oneOf(['GET', 'get', 'POST', 'post']),
    url: PropTypes.string,
    params: PropTypes.object,
    autoLoad: PropTypes.bool
  }),
  reader: PropTypes.shape({
    data: PropTypes.string,
    name: PropTypes.string,
    field: PropTypes.array,
    description: PropTypes.string
  }).isRequired,
  remotePaging: PropTypes.bool,
  showSearch: PropTypes.bool,
  width: PropTypes.number,
  searchPlaceHolder: PropTypes.string,
  searchProperties: PropTypes.array,
  dataSource: PropTypes.array,
  afterLoaded: PropTypes.func,
  afterSelect: PropTypes.func,
  afterClear: PropTypes.func,
  listProps: PropTypes.shape({
    itemLayout: PropTypes.oneOf(['vertical', 'horizontal']),
    renderItem: PropTypes.func
  }),
  rowKey: PropTypes.string,
  name: PropTypes.string.isRequired,
  field: PropTypes.array
};