@zat-design/sisyphus-react 4.0.0-beta.4 → 4.0.0-beta.6

package/lib/ProForm/utils/useWatch.js

@@ -1,71 +1,58 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/ProForm/utils/useWatch.ts
-var useWatch_exports = {};
-__export(useWatch_exports, {
-  default: () => useWatch_default,
-  toArray: () => toArray
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(useWatch_exports);
-var import_lodash = require("lodash");
-var import_warning = __toESM(require("rc-util/lib/warning"));
-var import_react = require("react");
-var import_isEqual = __toESM(require("lodash/isEqual"));
+exports.default = void 0;
+exports.toArray = toArray;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _lodash = require("lodash");
+var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+var _react = require("react");
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 function toArray(value) {
-  if (value === void 0 || value === null) {
+  if (value === undefined || value === null) {
     return [];
   }
   return Array.isArray(value) ? value : [value];
 }
+
+// 从一个对象或Form值中获取特定路径的值
 function get(source, path) {
   if (!source || path.length === 0) {
     return source;
   }
-  let current = source;
-  for (let i = 0; i < path.length; i++) {
-    if (current === void 0 || current === null) {
-      return void 0;
+  var current = source;
+  for (var i = 0; i < path.length; i++) {
+    if (current === undefined || current === null) {
+      return undefined;
     }
     current = current[path[i]];
   }
   return current;
 }
+
+/**
+ * 将值设置到指定路径的嵌套对象中
+ * @param obj 目标对象
+ * @param path 路径数组
+ * @param value 要设置的值
+ */
 function setValueByPath(obj, path, value) {
-  if (path.length === 0)
-    return;
+  if (path.length === 0) return;
+
+  // 处理单层路径
   if (path.length === 1) {
     obj[path[0]] = value;
     return;
   }
-  let current = obj;
-  for (let i = 0; i < path.length - 1; i++) {
-    const key = path[i];
+
+  // 处理多层嵌套路径
+  var current = obj;
+  for (var i = 0; i < path.length - 1; i++) {
+    var key = path[i];
     if (!current[key]) {
       current[key] = {};
     }
@@ -73,77 +60,123 @@ function setValueByPath(obj, path, value) {
   }
   current[path[path.length - 1]] = value;
 }
-var useWatchWarning = process.env.NODE_ENV !== "production" ? (dependencies) => {
-  const depsStr = JSON.stringify(dependencies);
-  const depsStrRef = (0, import_react.useRef)(depsStr);
-  (0, import_warning.default)(
-    depsStrRef.current === depsStr,
-    "`useWatch` is not support dynamic `namePath`. Please provide static instead."
-  );
-} : () => {
-};
+
+// 创建之后namepath就不可变的警告
+var useWatchWarning = process.env.NODE_ENV !== 'production' ? dependencies => {
+  var depsStr = JSON.stringify(dependencies);
+  var depsStrRef = (0, _react.useRef)(depsStr);
+  (0, _warning.default)(depsStrRef.current === depsStr, '`useWatch` is not support dynamic `namePath`. Please provide static instead.');
+} : () => {};
+
+/**
+ * ProForm的useWatch hook，用于监听表单字段变化
+ * @param dependencies 监听的字段路径
+ * @param form 表单实例
+ * @param wait 防抖等待时间
+ * @returns 表单值
+ */
 function useWatch(dependencies, form, wait) {
+  // 处理开发环境警告
   useWatchWarning(dependencies);
-  const formInstance = form;
-  const [state, setState] = (0, import_react.useState)({});
-  const valueRef = (0, import_react.useRef)({});
-  const prevStateRef = (0, import_react.useRef)({});
-  const namePaths = (0, import_react.useMemo)(() => {
-    const paths = [];
-    if (typeof dependencies === "string") {
+
+  // 获取表单实例
+  var formInstance = form;
+
+  // 用于存储最终结果
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+
+  // 使用ref存储中间状态，避免不必要的渲染
+  var valueRef = (0, _react.useRef)({});
+  var prevStateRef = (0, _react.useRef)({});
+
+  // 标准化依赖为路径数组的数组
+  var namePaths = (0, _react.useMemo)(() => {
+    // 将依赖标准化为数组的数组形式
+    var paths = [];
+
+    // 字符串形式: 'fieldName'
+    if (typeof dependencies === 'string') {
       paths.push(dependencies);
+      // 数组形式
     } else if (Array.isArray(dependencies)) {
-      const isPathsCollection = dependencies.length > 0 && (typeof dependencies[0] === "string" || Array.isArray(dependencies[0]));
+      // 检查是否是路径数组的集合，例如：[['a', 'number'], 'fieldName']
+      var isPathsCollection = dependencies.length > 0 && (typeof dependencies[0] === 'string' || Array.isArray(dependencies[0]));
       if (isPathsCollection) {
-        dependencies.forEach((path) => {
+        // 每个元素都是一个路径
+        dependencies.forEach(path => {
           paths.push(path);
         });
       } else {
+        // 整个数组是一个单一路径
         paths.push(dependencies);
       }
     }
     return paths;
-  }, [
-    /* dependencies 故意忽略，与原实现一致 */
-  ]);
-  const debouncedFn = (0, import_react.useMemo)(() => {
+  }, [/* dependencies 故意忽略，与原实现一致 */]);
+
+  // 保存防抖函数引用，避免重复创建
+  var debouncedFn = (0, _react.useMemo)(() => {
     if (wait) {
-      return (0, import_lodash.debounce)((value) => {
-        if (!(0, import_isEqual.default)(prevStateRef.current, value)) {
-          prevStateRef.current = { ...value };
+      return (0, _lodash.debounce)(value => {
+        // 只在值真正变化时才更新状态
+        if (!(0, _isEqual.default)(prevStateRef.current, value)) {
+          prevStateRef.current = (0, _objectSpread2.default)({}, value);
           setState(value);
         }
       }, wait);
     }
-    return (value) => {
-      if (!(0, import_isEqual.default)(prevStateRef.current, value)) {
-        prevStateRef.current = { ...value };
+
+    // 非防抖版本
+    return value => {
+      if (!(0, _isEqual.default)(prevStateRef.current, value)) {
+        prevStateRef.current = (0, _objectSpread2.default)({}, value);
         setState(value);
       }
     };
   }, [wait]);
-  (0, import_react.useEffect)(() => {
-    if (!formInstance)
-      return void 0;
-    const updateState = () => {
-      const values = formInstance.getFieldsValue(true);
-      const newState = {};
-      namePaths.forEach((path) => {
-        const namePath = toArray(path);
-        const value = get(values, namePath);
+  (0, _react.useEffect)(() => {
+    if (!formInstance) return undefined;
+
+    // 创建更新状态的函数
+    var updateState = () => {
+      var values = formInstance.getFieldsValue(true);
+      var newState = {};
+
+      // 处理每个监听路径
+      namePaths.forEach(path => {
+        // 将路径转换为数组形式
+        var namePath = toArray(path);
+
+        // 获取路径对应的值
+        var value = get(values, namePath);
+
+        // 将值设置到正确的嵌套结构中
         setValueByPath(newState, namePath, value);
       });
+
+      // 存储并更新状态
       valueRef.current = newState;
       debouncedFn(newState);
     };
+
+    // 初始调用一次
     updateState();
-    const { getInternalHooks } = formInstance;
-    const { registerWatch } = getInternalHooks("RC_FORM_INTERNAL_HOOKS");
-    const cancelWatch = registerWatch((values) => {
+
+    // 注册表单变化监听
+    var _ref = formInstance,
+      getInternalHooks = _ref.getInternalHooks;
+    var _getInternalHooks = getInternalHooks('RC_FORM_INTERNAL_HOOKS'),
+      registerWatch = _getInternalHooks.registerWatch;
+    var cancelWatch = registerWatch(values => {
       if (values) {
         updateState();
       }
     });
+
+    // 清理订阅
     return () => {
       if (wait) {
         debouncedFn.cancel();
@@ -153,8 +186,4 @@ function useWatch(dependencies, form, wait) {
   }, [formInstance, namePaths, debouncedFn, wait]);
   return state;
 }
-var useWatch_default = useWatch;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  toArray
-});
+var _default = exports.default = useWatch;