@aliretail/react-materials-components/es/AreaSelector/components/GraduallyAreaSelector/index.js

B 端物料组件库

import _CascaderSelect from "@alifd/next/es/cascader-select";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import * as PropTypes from 'prop-types';
import request from '@aliretail/react-universal-request';

var GraduallyAreaSelector = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(GraduallyAreaSelector, _React$Component);

  function GraduallyAreaSelector() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      areaDataSource: []
    };

    _this.isLeaf = function (item) {
      return typeof item.isLeaf === 'undefined' ? item.divLevel === 4 : item.isLeaf;
    };

    _this.getDataSource = function (code) {
      var _extends2;

      var _this$props = _this.props,
          appCode = _this$props.appCode,
          apiCode = _this$props.apiCode,
          extAreaParams = _this$props.extAreaParams,
          areaApiUrl = _this$props.areaApiUrl,
          requestKey = _this$props.requestKey;
      var requestUrl = areaApiUrl ? {
        url: areaApiUrl
      } : {
        appCode: appCode,
        apiCode: apiCode
      };
      return request(_extends({}, requestUrl, {
        method: 'post',
        data: _extends((_extends2 = {}, _extends2[requestKey] = code, _extends2), extAreaParams || {}),
        autoShowErrorMessage: true
      }));
    };

    _this.onLoadData = function (data) {
      return _this.getDataSource(data.value).then(function (res) {
        var result = res.result;

        if (Array.isArray(result)) {
          var newList = result === null || result === void 0 ? void 0 : result.map(function (item) {
            return {
              label: item.name,
              value: item.code,
              isLeaf: _this.isLeaf(item)
            };
          });

          _this.handleLoadData(data, newList); // data._source.children = newList;

        } else {
          var _result$result;

          var _newList = result === null || result === void 0 ? void 0 : (_result$result = result.result) === null || _result$result === void 0 ? void 0 : _result$result.map(function (item) {
            return {
              label: item.name,
              value: item.code,
              isLeaf: _this.isLeaf(item)
            };
          });

          _this.handleLoadData(data, _newList); // data._source.children = newList;

        }
      });
    };

    _this.handleLoadData = function (data, arr) {
      if (data) {
        data._source.children = arr;
      } else {
        _this.setState({
          areaDataSource: arr
        });
      }
    };

    _this.handleData = function (data, extra) {
      var _data;

      if (data === void 0) {
        data = [];
      }

      var list = [];
      ((_data = data) === null || _data === void 0 ? void 0 : _data.length) && data.forEach(function (t) {
        if (t === void 0) {
          t = {};
        }

        var _t = t,
            pos = _t.pos; // 当前选择数据层级

        var posList = pos.split('-');
        var obj = {
          provCode: '',
          cityCode: '',
          districtCode: '',
          townCode: '',
          code: t.value,
          name: t.label
        };

        if (posList.length === 2) {
          // 当前选择全省
          obj.provCode = t.value;
        } else if (posList.length === 3) {
          // 当前选择为全市
          Object.assign(obj, _this.handleCityData(t, extra));
        } else if (posList.length === 4) {
          // 当前选择为全区
          Object.assign(obj, _this.handleDistrictData(t, extra));
        } else {
          // 当前选择为街道
          Object.assign(obj, _this.handleTownData(t, extra));
        }

        list.push(obj);
      });
      return list;
    };

    _this.handleCityData = function (data, extra) {
      var indeterminateData = extra.indeterminateData;
      var value = data.value;
      var obj = {
        provCode: '',
        cityCode: data.value,
        districtCode: '',
        townCode: ''
      };
      indeterminateData.length && indeterminateData.forEach(function (t) {
        if (t.children && t.children.some(function (item) {
          return item.value === value;
        })) {
          obj.provCode = t.value;
        }
      });
      return obj;
    };

    _this.handleDistrictData = function (data, extra) {
      var indeterminateData = extra.indeterminateData;
      var areaValue = data.value;
      var obj = {
        provCode: '',
        cityCode: '',
        districtCode: data.value,
        townCode: ''
      };
      var cityValue = '';
      indeterminateData.length && indeterminateData.forEach(function (t) {
        if (t.children && t.children.some(function (item) {
          return item.value === areaValue;
        })) {
          obj.cityCode = t.value;
          cityValue = t.value;
        }
      });
      indeterminateData.length && indeterminateData.forEach(function (t) {
        if (t.children && t.children.some(function (item) {
          return item.value === cityValue;
        })) {
          obj.provCode = t.value;
        }
      });
      return obj;
    };

    _this.handleTownData = function (data, extra) {
      var indeterminateData = extra.indeterminateData;
      var streetValue = data.value;
      var obj = {
        provCode: '',
        cityCode: '',
        districtCode: '',
        townCode: ''
      };
      var cityValue = '';
      var areaValue = '';
      indeterminateData.length && indeterminateData.forEach(function (t) {
        if (t.children && t.children.some(function (item) {
          return item.value === streetValue;
        })) {
          obj.districtCode = t.value;
          areaValue = t.value;
        }
      });
      indeterminateData.length && indeterminateData.forEach(function (t) {
        if (t.children && t.children.some(function (item) {
          return item.value === areaValue;
        })) {
          obj.cityCode = t.value;
          cityValue = t.value;
        }
      });
      indeterminateData.length && indeterminateData.forEach(function (t) {
        if (t.children && t.children.some(function (item) {
          return item.value === cityValue;
        })) {
          obj.provCode = t.value;
        }
      });
      obj.townCode = data.value;
      return obj;
    };

    _this.cascaderOnChange = function (value, data, extra) {
      var _this$props2 = _this.props,
          onChange = _this$props2.onChange,
          multiple = _this$props2.multiple,
          initValue = _this$props2.initValue;
      var areaCodeList = ['provCode', 'cityCode', 'districtCode', 'townCode'];

      if (multiple) {
        var filterList = data && (data === null || data === void 0 ? void 0 : data.filter(function (t) {
          return t !== undefined;
        })) || [];
        var selectValueList = [];

        if (filterList.length) {
          selectValueList = _this.handleData(filterList, extra);
        }

        var oldInitValueList = !Array.isArray(initValue) ? [] : initValue.filter(function (initCodeItem) {
          return value === null || value === void 0 ? void 0 : value.includes(initCodeItem.code);
        }).map(function (t) {
          return {
            provCode: t.provCode || '',
            cityCode: t.cityCode || '',
            districtCode: t.districtCode || '',
            townCode: t.townCode || '',
            name: t.name || '',
            code: t.code || ''
          };
        });
        var lastestList = selectValueList.concat(oldInitValueList);
        var filterObj = {};
        var newLastestList = lastestList.reduce(function (preVal, curVal) {
          if (!filterObj[curVal.code]) {
            filterObj[curVal.code] = true;

            if (filterObj[curVal.code]) {
              preVal.push(curVal);
            }
          }

          return preVal;
        }, []);
        onChange(newLastestList);
      } else {
        var _ref = extra || {},
            selectedPath = _ref.selectedPath;

        var nameStr = selectedPath === null || selectedPath === void 0 ? void 0 : selectedPath.reduce(function (preVal, curVal) {
          preVal = preVal === '' ? curVal.label : preVal + " / " + curVal.label;
          return preVal;
        }, '');
        var valueObj = {
          name: nameStr
        };
        var valueList = [];
        areaCodeList.forEach(function (key, index) {
          var _selectedPath$index;

          valueObj[key] = (selectedPath === null || selectedPath === void 0 ? void 0 : (_selectedPath$index = selectedPath[index]) === null || _selectedPath$index === void 0 ? void 0 : _selectedPath$index.value) || '';

          if (index === areaCodeList.length - 1) {
            var _selectedPath$index2;

            valueObj.code = (selectedPath === null || selectedPath === void 0 ? void 0 : (_selectedPath$index2 = selectedPath[index]) === null || _selectedPath$index2 === void 0 ? void 0 : _selectedPath$index2.value) || '';
          }
        });

        if (valueObj !== null && valueObj !== void 0 && valueObj.code) {
          valueList.push(valueObj);
        }

        onChange(valueList);
      }
    };

    _this.valueRenderFun = function (item) {
      var initValue = _this.props.initValue;

      if (item && item.label) {
        return item.label;
      } else if (initValue && initValue.length) {
        var name = '';
        initValue.forEach(function (t) {
          if (t.code === item.value) {
            name = t.name;
          }
        });
        return name;
      } else if (initValue === undefined) {
        return '';
      }
    };

    return _this;
  }

  var _proto = GraduallyAreaSelector.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;

    var _this$props$areaDataS = this.props.areaDataSource,
        areaDataSource = _this$props$areaDataS === void 0 ? [] : _this$props$areaDataS;

    if (areaDataSource.length) {
      var newList = areaDataSource === null || areaDataSource === void 0 ? void 0 : areaDataSource.map(function (item) {
        return {
          label: item.name,
          value: item.code,
          isLeaf: _this2.isLeaf(item)
        };
      });
      this.setState(function () {
        return {
          areaDataSource: newList || []
        };
      });
    } else {
      this.onLoadData('');
    }
  };

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    var _this3 = this;

    if (nextProps.areaDataSource && JSON.stringify(nextProps.areaDataSource) !== JSON.stringify(this.props.areaDataSource)) {
      var areaDataSource = nextProps.areaDataSource;
      var newList = areaDataSource === null || areaDataSource === void 0 ? void 0 : areaDataSource.map(function (item) {
        return {
          label: item.name,
          value: item.code,
          isLeaf: _this3.isLeaf(item)
        };
      });
      this.setState(function () {
        return {
          areaDataSource: newList
        };
      });
    }
  };

  _proto.render = function render() {
    var areaDataSource = this.state.areaDataSource;
    var _this$props3 = this.props,
        multiple = _this$props3.multiple,
        disabled = _this$props3.disabled,
        readOnly = _this$props3.readOnly,
        hasClear = _this$props3.hasClear,
        isPreview = _this$props3.isPreview,
        placeholder = _this$props3.placeholder,
        initValue = _this$props3.initValue,
        followTrigger = _this$props3.followTrigger,
        style = _this$props3.style;
    return /*#__PURE__*/React.createElement("div", {
      className: "aliretail-area-select",
      "data-name": "AliretailAreaSelect"
    }, isPreview ? /*#__PURE__*/React.createElement("div", {
      className: "area-select-box"
    }, initValue.map(function (t) {
      return /*#__PURE__*/React.createElement("span", {
        key: t.code,
        className: "area-previewStyle"
      }, t.name);
    })) : /*#__PURE__*/React.createElement(_CascaderSelect, {
      className: "area-select-box",
      listStyle: {
        width: '144px'
      },
      style: style,
      listClassName: "aliretail-cascaderSelectStyle",
      followTrigger: followTrigger,
      placeholder: placeholder // isPreview={isPreview}
      ,
      multiple: multiple,
      disabled: disabled,
      readOnly: readOnly,
      hasClear: hasClear,
      dataSource: areaDataSource,
      defaultValue: initValue === null || initValue === void 0 ? void 0 : initValue.map(function (item) {
        return item.code;
      }),
      valueRender: this.valueRenderFun,
      loadData: this.onLoadData,
      onChange: this.cascaderOnChange
    }));
  };

  return GraduallyAreaSelector;
}(React.Component);

GraduallyAreaSelector.propTypes = {
  appCode: PropTypes.string,
  // 请求纪元appCode
  apiCode: PropTypes.string,
  // 请求纪元appCode
  areaDataSource: PropTypes.array,
  // 组件初始化加载的第一级区域数据
  isPreview: PropTypes.bool,
  multiple: PropTypes.bool,
  disabled: PropTypes.bool,
  readOnly: PropTypes.bool,
  hasClear: PropTypes.bool,
  followTrigger: PropTypes.bool,
  placeholder: PropTypes.string,
  requestKey: PropTypes.string,
  initValue: PropTypes.array,
  onChange: PropTypes.func
};
GraduallyAreaSelector.defaultProps = {
  onChange: function onChange() {},
  followTrigger: true,
  requestKey: 'parentCode',
  multiple: true,
  disabled: false,
  readOnly: false,
  hasClear: true,
  isPreview: false,
  placeholder: '请输入'
};
export default GraduallyAreaSelector;