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

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

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

require("antd/lib/cascader/style");

var _cascader = _interopRequireDefault(require("antd/lib/cascader"));

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

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

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

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

var _lodash = require("lodash");

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; }

var __awaiter = void 0 && (void 0).__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 = void 0 && (void 0).__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;
};
/**
 * 关键字：授权区域选择
 * 新增人：徐友万
 * 完善中
 */


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

    if ((0, _lodash.has)(item, 'leaf')) {
      isLeaf = item.leaf;
    } else if ((0, _lodash.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 = (0, _react.useRef)(0); // 第一级节点初始化

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


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


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


  var handleLoadData = function handleLoadData(selectedOptions) {
    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee() {
      var targetOption, res, data, newData;
      return _regenerator["default"].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((0, _toConsumableArray2["default"])(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__*/_regenerator["default"].mark(function _callee2() {
      var data, res;
      return _regenerator["default"].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);
    }));
  }; // 初始化第一级树节点


  (0, _react.useEffect)(function () {
    var getTopData = function getTopData() {
      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
        var res, data, newData;
        return _regenerator["default"].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();
  }, []); // 需要回填数据 递归创建树结构

  (0, _react.useEffect)(function () {
    if (topDataInit && !fillDataInit && value.length && needFillData) {
      setFillDataInit(true);
      handleFillData(newOptions);
    }
  }, [value, topDataInit, fillDataInit, needFillData]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(className, "".concat(prefixCls, "-wrapper")),
    style: style
  }, /*#__PURE__*/_react["default"].createElement(_cascader["default"], (0, _extends2["default"])({
    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: {}
};
var _default = AreaCascader;
exports["default"] = _default;