@51yzone/pc-components/es/area-cascader/area-cascader.js

An enterprise-class UI design language and React-based implementation

import _extends from "@babel/runtime/helpers/extends";
import "antd/es/cascader/style";
import _Cascader from "antd/es/cascader";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";

var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
  function adopt(value) {
    return value instanceof P ? value : new P(function (resolve) {
      resolve(value);
    });
  }

  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    }

    function rejected(value) {
      try {
        step(generator["throw"](value));
      } catch (e) {
        reject(e);
      }
    }

    function step(result) {
      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    }

    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
/**
 * 关键字：授权区域选择
 * 新增人：徐友万
 * 完善中
 */


import React, { useEffect, useState, useRef } from 'react';
import classnames from 'classnames';
import { has } from 'lodash'; // 格式化树节点

var formatData = function formatData(treeNode, loadKey) {
  return treeNode.map(function (item) {
    // 兼容两种是否是叶子节点的判断
    var isLeaf = true;

    if (has(item, 'leaf')) {
      isLeaf = item.leaf;
    } else if (has(item, 'isLeaf')) {
      isLeaf = item.isLeaf;
    }

    return {
      label: item.name,
      key: item[loadKey],
      value: item[loadKey],
      isLeaf: isLeaf,
      children: undefined,
      loading: false
    };
  });
};

var AreaCascader = function AreaCascader(props) {
  var _props$value = props.value,
      value = _props$value === void 0 ? [] : _props$value,
      _props$options = props.options,
      options = _props$options === void 0 ? [] : _props$options,
      _props$loadKey = props.loadKey,
      loadKey = _props$loadKey === void 0 ? 'code' : _props$loadKey,
      needFormat = props.needFormat,
      needFillData = props.needFillData,
      loadTopData = props.loadTopData,
      loadData = props.loadData,
      prefixCls = props.prefixCls,
      className = props.className,
      style = props.style,
      children = props.children,
      rest = __rest(props, ["value", "options", "loadKey", "needFormat", "needFillData", "loadTopData", "loadData", "prefixCls", "className", "style", "children"]);

  var ref = useRef(0); // 第一级节点初始化

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      topDataInit = _useState2[0],
      setTopDataInit = _useState2[1]; // 数据回填初始化


  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      fillDataInit = _useState4[0],
      setFillDataInit = _useState4[1]; // 区域选择树节点


  var _useState5 = useState(options),
      _useState6 = _slicedToArray(_useState5, 2),
      newOptions = _useState6[0],
      setNewOptions = _useState6[1]; // 异步加载节点数据


  var handleLoadData = function handleLoadData(selectedOptions) {
    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var targetOption, res, data, newData;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              targetOption = selectedOptions[selectedOptions.length - 1];
              targetOption.loading = true;

              if (!loadData) {
                _context.next = 13;
                break;
              }

              _context.next = 5;
              return loadData(targetOption.value);

            case 5:
              res = _context.sent;
              targetOption.loading = false;
              data = res.valueObj || res.value;

              if (!data) {
                _context.next = 13;
                break;
              }

              newData = needFormat ? formatData(data, loadKey) : data;
              targetOption.children = newData;
              setNewOptions(_toConsumableArray(newOptions));
              return _context.abrupt("return", newData);

            case 13:
              return _context.abrupt("return", []);

            case 14:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));
  }; // 异步数据回填


  var handleFillData = function handleFillData(parentOptions) {
    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
      var data, res;
      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              data = parentOptions.filter(function (option) {
                return option.value === value[ref.current];
              });
              _context2.next = 3;
              return handleLoadData(data);

            case 3:
              res = _context2.sent;
              ref.current += 1;

              if (res && ref.current !== value.length - 1) {
                handleFillData(res);
              }

            case 6:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));
  }; // 初始化第一级树节点


  useEffect(function () {
    var getTopData = function getTopData() {
      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
        var res, data, newData;
        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                if (!loadTopData) {
                  _context3.next = 6;
                  break;
                }

                _context3.next = 3;
                return loadTopData();

              case 3:
                res = _context3.sent;
                data = res.valueObj || res.value;

                if (data && data.length) {
                  newData = needFormat ? formatData(data, loadKey) : data;
                  setNewOptions(newData);
                  setTopDataInit(true);
                }

              case 6:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3);
      }));
    };

    getTopData();
  }, []); // 需要回填数据 递归创建树结构

  useEffect(function () {
    if (topDataInit && !fillDataInit && value.length && needFillData) {
      setFillDataInit(true);
      handleFillData(newOptions);
    }
  }, [value, topDataInit, fillDataInit, needFillData]);
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(className, "".concat(prefixCls, "-wrapper")),
    style: style
  }, /*#__PURE__*/React.createElement(_Cascader, _extends({
    loadData: handleLoadData,
    value: value,
    options: newOptions
  }, rest)), children);
};

AreaCascader.defaultProps = {
  options: [],
  loadKey: 'code',
  needFormat: true,
  needFillData: false,
  loadTopData: function loadTopData() {
    return Promise.resolve({});
  },
  loadData: function loadData() {
    return Promise.resolve({});
  },
  prefixCls: 'yz-area-cascader',
  className: '',
  style: {}
};
export default AreaCascader;