@zat-design/sisyphus-react 4.0.0-beta.3 → 4.0.0-beta.5

package/lib/ProForm/utils/useShouldUpdate.js

@@ -1,153 +1,305 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/ProForm/utils/useShouldUpdate.ts
-var useShouldUpdate_exports = {};
-__export(useShouldUpdate_exports, {
-  default: () => useShouldUpdate_default
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(useShouldUpdate_exports);
-var import_react = require("react");
-var import_lodash = require("lodash");
-var import_utils = require("../../utils");
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _lodash = require("lodash");
+var _utils = require("../../utils");
+/** FormList中被删除的行也会再触发一次响应式函数 排除这种场景 */
 var isDeleteLine = (form, namePath) => {
   if (namePath) {
-    const line = form.getFieldValue(namePath);
-    return line === void 0;
+    var line = form.getFieldValue(namePath);
+    return line === undefined;
   }
   return false;
 };
-var useShouldUpdate = (props) => {
-  const {
-    show,
-    formItemProps,
-    form,
-    disabled,
-    rules,
-    required,
-    fieldProps,
-    component,
-    originComponent,
-    type,
-    desensitization
-  } = props;
-  const { shouldUpdate, name, clearNotShow, index, namePath, names, dependNames } = formItemProps;
-  const timerRef = (0, import_react.useRef)(null);
-  const needClear = (0, import_react.useRef)(false);
-  const showRef = (0, import_react.useRef)(false);
-  const disabledRef = (0, import_react.useRef)(false);
-  const requiredRef = (0, import_react.useRef)(false);
-  const rulesRef = (0, import_react.useRef)([]);
-  const fieldPropsRef = (0, import_react.useRef)(null);
-  const originComponentRef = (0, import_react.useRef)(null);
-  const dependNamesRef = (0, import_react.useRef)([]);
-  const desensitizationRef = (0, import_react.useRef)([0, 0]);
-  const newComponent = originComponent || component;
-  const [, reRender] = (0, import_react.useState)({});
-  let values = {};
-  if (!(dependNames == null ? void 0 : dependNames.length) && !(0, import_lodash.isFunction)(show) && !(0, import_lodash.isFunction)(disabled) && !(0, import_lodash.isFunction)(required) && !(0, import_lodash.isFunction)(rules) && !(0, import_lodash.isFunction)(fieldProps) && !(0, import_lodash.isFunction)(originComponent) && !(0, import_lodash.isFunction)(desensitization)) {
-    return { shouldUpdate, show, disabled, required, rules, fieldProps, component: newComponent, desensitization };
+
+// 代理shouldUpdate事件, 执行函数值的[show, disabled], 当[show, disabled]与上一次值不相同时更新状态
+var useShouldUpdate = props => {
+  var show = props.show,
+    formItemProps = props.formItemProps,
+    form = props.form,
+    disabled = props.disabled,
+    rules = props.rules,
+    required = props.required,
+    fieldProps = props.fieldProps,
+    component = props.component,
+    originComponent = props.originComponent,
+    type = props.type,
+    desensitization = props.desensitization,
+    _props$shouldUpdateDe = props.shouldUpdateDebounce,
+    shouldUpdateDebounce = _props$shouldUpdateDe === void 0 ? 500 : _props$shouldUpdateDe;
+  var _shouldUpdate = formItemProps.shouldUpdate,
+    name = formItemProps.name,
+    clearNotShow = formItemProps.clearNotShow,
+    index = formItemProps.index,
+    namePath = formItemProps.namePath,
+    names = formItemProps.names,
+    dependNames = formItemProps.dependNames;
+  var timerRef = (0, _react.useRef)(null); // 清值防抖
+  var debouncedShouldUpdateRef = (0, _react.useRef)(null); // shouldUpdate防抖函数
+  var pendingValuesRef = (0, _react.useRef)(null); // 待处理的表单值
+
+  var needClear = (0, _react.useRef)(false); // 是否需要执行清值操作
+  var showRef = (0, _react.useRef)(false);
+  var disabledRef = (0, _react.useRef)(false);
+  var requiredRef = (0, _react.useRef)(false);
+  var rulesRef = (0, _react.useRef)([]);
+  var fieldPropsRef = (0, _react.useRef)(null);
+  var originComponentRef = (0, _react.useRef)(null);
+  var dependNamesRef = (0, _react.useRef)([]);
+  var desensitizationRef = (0, _react.useRef)([0, 0]);
+  var newComponent = originComponent || component; // 解决component默认赋值污染问题，需要使用originComponent
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    reRender = _useState2[1];
+  var values = {};
+
+  // 处理表单值更新的函数
+  var processValuesUpdate = currentValues => {
+    var _currentValues;
+    if (namePath) {
+      _currentValues = form.getFieldValue(namePath) || {};
+    } else {
+      _currentValues = currentValues;
+    }
+    var _show = (0, _lodash.isFunction)(show) ? Boolean(show(_currentValues, {
+      form,
+      index,
+      namePath
+    })) : show;
+    var _disabled = (0, _lodash.isFunction)(disabled) ? disabled(_currentValues, {
+      form,
+      index,
+      namePath
+    }) : disabled;
+    var _required = (0, _lodash.isFunction)(required) ? required(_currentValues, {
+      form,
+      index,
+      namePath
+    }) : required;
+    var _rules = (0, _lodash.isFunction)(rules) ? rules(_currentValues, {
+      form,
+      index,
+      namePath
+    }) : rules;
+    var _fieldProps = (0, _lodash.isFunction)(fieldProps) ? fieldProps(_currentValues, {
+      form,
+      index,
+      namePath
+    }) : fieldProps;
+    var _desensitization = (0, _lodash.isFunction)(desensitization) ? desensitization(_currentValues, {
+      form,
+      index,
+      namePath
+    }) : desensitization;
+    var equalRes = (0, _lodash.isEqualWith)(rulesRef.current, _rules, _utils.customEqualForFunction);
+    var proEqualRes = (0, _lodash.isEqualWith)(fieldPropsRef.current, _fieldProps, _utils.customEqualForFunction);
+    var desensitizationRes = (0, _lodash.isEqualWith)(desensitizationRef.current, _desensitization);
+    if (_show !== showRef.current || !(0, _lodash.isEqualWith)(disabledRef.current, _disabled, _utils.customEqualForFunction) || _required !== requiredRef.current || !equalRes || !proEqualRes || !desensitizationRes || _fieldProps !== null && _fieldProps !== void 0 && _fieldProps.transformResponse) {
+      showRef.current = _show;
+      disabledRef.current = _disabled;
+      requiredRef.current = _required;
+      rulesRef.current = _rules;
+      fieldPropsRef.current = _fieldProps;
+      desensitizationRef.current = _desensitization;
+      reRender({});
+    }
+  };
+
+  // 创建防抖函数
+  (0, _react.useEffect)(() => {
+    if (shouldUpdateDebounce > 0 && (dependNames !== null && dependNames !== void 0 && dependNames.length || (0, _lodash.isFunction)(show) || (0, _lodash.isFunction)(disabled) || (0, _lodash.isFunction)(required) || (0, _lodash.isFunction)(rules) || (0, _lodash.isFunction)(fieldProps) || (0, _lodash.isFunction)(originComponent) || (0, _lodash.isFunction)(desensitization))) {
+      debouncedShouldUpdateRef.current = (0, _lodash.debounce)(() => {
+        if (pendingValuesRef.current) {
+          var currentValues = pendingValuesRef.current;
+          pendingValuesRef.current = null;
+
+          // 使用最新的values重新计算状态
+          processValuesUpdate(currentValues);
+        }
+      }, shouldUpdateDebounce);
+    }
+    return () => {
+      var _debouncedShouldUpdat;
+      (_debouncedShouldUpdat = debouncedShouldUpdateRef.current) === null || _debouncedShouldUpdat === void 0 || _debouncedShouldUpdat.cancel();
+    };
+  }, [shouldUpdateDebounce, dependNames === null || dependNames === void 0 ? void 0 : dependNames.length, show, disabled, required, rules, fieldProps, originComponent, desensitization]);
+
+  // 不是动态函数直接返回
+  if (!(dependNames !== null && dependNames !== void 0 && dependNames.length) && !(0, _lodash.isFunction)(show) && !(0, _lodash.isFunction)(disabled) && !(0, _lodash.isFunction)(required) && !(0, _lodash.isFunction)(rules) && !(0, _lodash.isFunction)(fieldProps) && !(0, _lodash.isFunction)(originComponent) && !(0, _lodash.isFunction)(desensitization)) {
+    return {
+      shouldUpdate: _shouldUpdate,
+      show,
+      disabled,
+      required,
+      rules,
+      fieldProps,
+      component: newComponent,
+      desensitization
+    };
   }
   if (namePath) {
+    // formList场景values取当前行数据
     values = form.getFieldValue(namePath) || {};
   } else {
     values = form.getFieldsValue(true);
   }
-  if ((0, import_lodash.isFunction)(show)) {
-    showRef.current = Boolean(show(values, { form, index, namePath }));
+  if ((0, _lodash.isFunction)(show)) {
+    showRef.current = Boolean(show(values, {
+      form,
+      index,
+      namePath
+    }));
   } else {
     showRef.current = show;
   }
-  if ((0, import_lodash.isFunction)(desensitization)) {
-    desensitizationRef.current = desensitization(values, { form, index, namePath });
+  if ((0, _lodash.isFunction)(desensitization)) {
+    desensitizationRef.current = desensitization(values, {
+      form,
+      index,
+      namePath
+    });
   } else {
     desensitizationRef.current = desensitization;
   }
-  if ((0, import_lodash.isFunction)(disabled)) {
-    if (["Group", "RangePicker", "ProCascader"].includes(type) && Array.isArray(disabled(values, { form, index, namePath }))) {
-      disabledRef.current = disabled(values, { form, index, namePath });
+  if ((0, _lodash.isFunction)(disabled)) {
+    // RangePicker返回数组时，特殊处理
+    if (['Group', 'RangePicker', 'ProCascader'].includes(type) && Array.isArray(disabled(values, {
+      form,
+      index,
+      namePath
+    }))) {
+      disabledRef.current = disabled(values, {
+        form,
+        index,
+        namePath
+      });
     } else {
-      disabledRef.current = Boolean(disabled(values, { form, index, namePath }));
+      disabledRef.current = Boolean(disabled(values, {
+        form,
+        index,
+        namePath
+      }));
     }
   } else {
     disabledRef.current = disabled;
   }
-  if ((0, import_lodash.isFunction)(required)) {
-    requiredRef.current = required(values, { form, index, namePath });
+  if ((0, _lodash.isFunction)(required)) {
+    requiredRef.current = required(values, {
+      form,
+      index,
+      namePath
+    });
   } else {
     requiredRef.current = required;
   }
-  if ((0, import_lodash.isFunction)(rules)) {
-    rulesRef.current = rules(values, { form, index, namePath });
+  if ((0, _lodash.isFunction)(rules)) {
+    rulesRef.current = rules(values, {
+      form,
+      index,
+      namePath
+    });
   } else {
     rulesRef.current = rules;
   }
-  if ((0, import_lodash.isFunction)(originComponent)) {
-    originComponentRef.current = originComponent(values, { form, index, namePath });
+  if ((0, _lodash.isFunction)(originComponent)) {
+    originComponentRef.current = originComponent(values, {
+      form,
+      index,
+      namePath
+    });
   } else {
     originComponentRef.current = newComponent;
   }
-  if ((0, import_lodash.isFunction)(fieldProps)) {
-    fieldPropsRef.current = fieldProps(values, { form, index, namePath });
+  if ((0, _lodash.isFunction)(fieldProps)) {
+    fieldPropsRef.current = fieldProps(values, {
+      form,
+      index,
+      namePath
+    }); // index, namePath FormList才会有
   } else {
     fieldPropsRef.current = fieldProps;
   }
-  if (dependNames == null ? void 0 : dependNames.length) {
-    dependNamesRef.current = dependNames.map((name2) => (0, import_lodash.get)(values, name2));
+  if (dependNames !== null && dependNames !== void 0 && dependNames.length) {
+    dependNamesRef.current = dependNames.map(name => (0, _lodash.get)(values, name));
   }
   return {
-    shouldUpdate: (prevValues, currentValues, ...rest) => {
-      if (dependNames == null ? void 0 : dependNames.length) {
-        const curDependNamesValue = dependNames.map((name2) => (0, import_lodash.get)(currentValues, name2));
-        const dependNamesChanged = !(0, import_lodash.isEqualWith)(
-          dependNamesRef.current,
-          curDependNamesValue,
-          import_utils.customEqualForFunction
-        );
+    shouldUpdate: function shouldUpdate(prevValues, currentValues) {
+      // @ts-ignore formList场景取当前行数据，不取shouldUpdate变更后值
+      if (dependNames !== null && dependNames !== void 0 && dependNames.length) {
+        var curDependNamesValue = dependNames.map(name => (0, _lodash.get)(currentValues, name));
+        var dependNamesChanged = !(0, _lodash.isEqualWith)(dependNamesRef.current, curDependNamesValue, _utils.customEqualForFunction);
         dependNamesRef.current = curDependNamesValue;
-        if (!dependNamesChanged)
-          return false;
+        if (!dependNamesChanged) return false;
       }
-      let _currentValues;
+
+      // 如果启用了防抖且存在防抖函数
+      if (shouldUpdateDebounce > 0 && debouncedShouldUpdateRef.current) {
+        // 缓存最新的表单值
+        pendingValuesRef.current = currentValues;
+        // 触发防抖函数
+        debouncedShouldUpdateRef.current();
+        return false; // 暂时不更新，由防抖函数控制
+      }
+
+      // 原有的非防抖逻辑
+      var _currentValues;
       if (namePath) {
+        // formList场景values取当前行数据
         _currentValues = form.getFieldValue(namePath) || {};
       } else {
         _currentValues = form.getFieldsValue(true);
       }
-      const _show = (0, import_lodash.isFunction)(show) ? Boolean(show(_currentValues, { form, index, namePath })) : show;
-      const _disabled = (0, import_lodash.isFunction)(disabled) ? Boolean(disabled(_currentValues, { form, index, namePath })) : disabled;
-      const _required = (0, import_lodash.isFunction)(required) ? required(_currentValues, { form, index, namePath }) : required;
-      const _rules = (0, import_lodash.isFunction)(rules) ? rules(_currentValues, { form, index, namePath }) : rules;
-      const _fieldProps = (0, import_lodash.isFunction)(fieldProps) ? fieldProps(_currentValues, { form, index, namePath }) : fieldProps;
-      const _desensitization = (0, import_lodash.isFunction)(desensitization) ? desensitization(_currentValues, { form, index, namePath }) : desensitization;
+      var _show = (0, _lodash.isFunction)(show) ? Boolean(show(_currentValues, {
+        form,
+        index,
+        namePath
+      })) : show;
+      var _disabled = (0, _lodash.isFunction)(disabled) ? Boolean(disabled(_currentValues, {
+        form,
+        index,
+        namePath
+      })) : disabled;
+      var _required = (0, _lodash.isFunction)(required) ? required(_currentValues, {
+        form,
+        index,
+        namePath
+      }) : required;
+      var _rules = (0, _lodash.isFunction)(rules) ? rules(_currentValues, {
+        form,
+        index,
+        namePath
+      }) : rules;
+      var _fieldProps = (0, _lodash.isFunction)(fieldProps) ? fieldProps(_currentValues, {
+        form,
+        index,
+        namePath
+      }) : fieldProps;
+      var _desensitization = (0, _lodash.isFunction)(desensitization) ? desensitization(_currentValues, {
+        form,
+        index,
+        namePath
+      }) : desensitization;
+
+      // 清值防抖  多次刷新时以最后一次为准
       if (clearNotShow !== false && (name || names) && !isDeleteLine(form, namePath)) {
+        // 当show为其他变为false的时候记录一次需要清值
         if (_show !== showRef.current && _show === false) {
           needClear.current = true;
         }
         if (_show === false) {
           clearTimeout(timerRef.current);
           timerRef.current = setTimeout(() => {
-            if (needClear.current !== true)
-              return;
+            if (needClear.current !== true) return;
             if (Array.isArray(names)) {
               form.resetFields(names);
             } else {
-              const clearName = formItemProps.namePath ? formItemProps.namePath.slice(0, -1).concat(formItemProps.name) : formItemProps.name;
+              var clearName = formItemProps.namePath ? formItemProps.namePath.slice(0, -1).concat(formItemProps.name) : formItemProps.name;
               form.resetFields([clearName]);
             }
             needClear.current = false;
@@ -157,10 +309,11 @@ var useShouldUpdate = (props) => {
           clearTimeout(timerRef.current);
         }
       }
-      const equalRes = (0, import_lodash.isEqualWith)(rulesRef.current, _rules, import_utils.customEqualForFunction);
-      const proEqualRes = (0, import_lodash.isEqualWith)(fieldPropsRef.current, _fieldProps, import_utils.customEqualForFunction);
-      const desensitizationRes = (0, import_lodash.isEqualWith)(desensitizationRef.current, _desensitization);
-      if (_show !== showRef.current || _disabled !== disabledRef.current || _required !== requiredRef.current || !equalRes || !proEqualRes || !desensitizationRes || (_fieldProps == null ? void 0 : _fieldProps.transformResponse)) {
+      var equalRes = (0, _lodash.isEqualWith)(rulesRef.current, _rules, _utils.customEqualForFunction);
+      var proEqualRes = (0, _lodash.isEqualWith)(fieldPropsRef.current, _fieldProps, _utils.customEqualForFunction);
+      var desensitizationRes = (0, _lodash.isEqualWith)(desensitizationRef.current, _desensitization);
+      if (_show !== showRef.current || _disabled !== disabledRef.current || _required !== requiredRef.current || !equalRes || !proEqualRes || !desensitizationRes || _fieldProps !== null && _fieldProps !== void 0 && _fieldProps.transformResponse // 防止fieldProps变更时，transformResponse根据fieldProps新值无法触发更新
+      ) {
         showRef.current = _show;
         disabledRef.current = _disabled;
         requiredRef.current = _required;
@@ -170,10 +323,13 @@ var useShouldUpdate = (props) => {
         reRender({});
         return false;
       }
-      if (typeof shouldUpdate === "function") {
-        return shouldUpdate(prevValues, currentValues, ...rest);
+      if (typeof _shouldUpdate === 'function') {
+        for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+          rest[_key - 2] = arguments[_key];
+        }
+        return _shouldUpdate(prevValues, currentValues, ...rest);
       }
-      return !!shouldUpdate;
+      return !!_shouldUpdate;
     },
     show: showRef.current,
     disabled: disabledRef.current,
@@ -184,4 +340,4 @@ var useShouldUpdate = (props) => {
     desensitization: desensitizationRef.current
   };
 };
-var useShouldUpdate_default = useShouldUpdate;
+var _default = exports.default = useShouldUpdate;