@zat-design/sisyphus-react 3.6.5-beta.2 → 3.6.5-beta.3

package/es/ProForm/index.d.ts

@@ -1,11 +1,12 @@
-import { Form, FormInstance } from 'antd';
+import { FormInstance } from 'antd';
 import React, { ForwardRefRenderFunction } from 'react';
 import { FormProviderProps } from 'antd/es/form/context';
 import { ProFormProps } from './propsType';
 import { useForm } from './utils/useForm';
+import useWatch from './utils/useWatch';
 interface IProForm<T = any> extends ForwardRefRenderFunction<FormInstance<T>, ProFormProps<T>> {
     useForm: typeof useForm;
-    useWatch: typeof Form.useWatch;
+    useWatch: typeof useWatch;
     [key: string]: any;
 }
 declare const ProFormForward: IProForm;

package/es/ProForm/index.js

@@ -16,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DoubleLeftOutlined } from '@ant-design/icons';
 import classnames from 'classnames';
 import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
-import { isObject, isString, merge } from 'lodash';
+import { isObject, merge } from 'lodash';
 import { FormFooter, InputRange, ProAddress, ProCascader, ProCertNo, ProCertValidity, ProCombination, ProModalSelect, ProNumberRange, ProRangeBox, ProTimeLimit, transferAddressInfoToRegion, ProUpload, ProTreeModal, ProTree, EnumSelect } from './components';
 import RenderFields from './components/render/RenderFields';
 import { useProConfig, useContextForms } from '../ProConfigProvider';
@@ -24,6 +24,7 @@ import { getLayout, splitNameStr, useControlled, initialValuesToNames, filterInt
 import { useForm } from './utils/useForm';
 import { useFieldProps } from './utils/useFieldProps';
 import locale from '../locale';
+import useWatch from './utils/useWatch';
 var ProForm = function ProForm(props, ref) {
   var _forms$formKey, _localStorage, _ref;
   var _props$mode = props.mode,
@@ -273,22 +274,7 @@ var ProForm = function ProForm(props, ref) {
 // @ts-ignore
 var ProFormForward = /*#__PURE__*/forwardRef(ProForm);
 ProFormForward.useForm = useForm;
-ProFormForward.useWatch = function (watchValue, form) {
-  if (isString(watchValue)) {
-    var watchValues = [watchValue];
-    watchValues.forEach(function (item) {
-      _Form.useWatch(item, form);
-    });
-    return form.getFieldsValue(watchValues);
-  }
-  if (watchValue.length) {
-    watchValue.forEach(function (item) {
-      _Form.useWatch(item, form);
-    });
-    return form.getFieldsValue(watchValue);
-  }
-  return _Form.useWatch([], form);
-};
+ProFormForward.useWatch = useWatch;
 export var ProFormProvider = function ProFormProvider(props) {
   var onFormChange = props.onFormChange,
     onFormFinish = props.onFormFinish,

package/es/ProForm/utils/useWatch.d.ts

@@ -0,0 +1,7 @@
+import { InternalNamePath, FormInstance, NamePath } from 'rc-field-form/es/interface';
+export declare function toArray<T>(value?: T | T[] | null): T[];
+export declare function getNamePath(path: NamePath | null): InternalNamePath;
+export declare function stringify(value: any): string | number;
+declare function useWatch(dependencies: string, form?: FormInstance, wait?: number): any;
+declare function useWatch(dependencies: NamePath[], form?: FormInstance, wait?: number): any[];
+export default useWatch;

package/es/ProForm/utils/useWatch.js

@@ -0,0 +1,80 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { debounce, get } from 'lodash';
+import { HOOK_MARK } from 'rc-field-form/es/FieldContext';
+import warning from 'rc-util/lib/warning';
+import { useState, useEffect, useRef, useMemo } from 'react';
+export function toArray(value) {
+  if (value === undefined || value === null) {
+    return [];
+  }
+  return Array.isArray(value) ? value : [value];
+}
+export function getNamePath(path) {
+  return toArray(path);
+}
+export function stringify(value) {
+  try {
+    return JSON.stringify(value);
+  } catch (err) {
+    return Math.random();
+  }
+}
+// 创建之后namepath就不可变
+var useWatchWarning = process.env.NODE_ENV !== 'production' ? function (namePath) {
+  var fullyStr = JSON.stringify(namePath);
+  var nameStrRef = useRef(fullyStr);
+  warning(nameStrRef.current === fullyStr, '`useWatch` is not support dynamic `namePath`. Please provide static instead.');
+} : function () {};
+function useWatch(dependencies, form, wait) {
+  var _useState = useState(typeof dependencies === 'string' ? undefined : []),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var valueStr = useMemo(function () {
+    return stringify(value);
+  }, [value]);
+  var valueStrRef = useRef(valueStr);
+  valueStrRef.current = valueStr;
+  var formInstance = form;
+  var isValidForm = formInstance && formInstance._init;
+  var _dependencies = typeof dependencies === 'string' ? [dependencies] : dependencies;
+  var namePaths = _dependencies === null || _dependencies === void 0 ? void 0 : _dependencies.map(function (item) {
+    return getNamePath(item);
+  });
+  var namePathsRef = useRef(namePaths);
+  namePathsRef.current = namePaths;
+  useWatchWarning(namePaths);
+  useEffect(function () {
+    if (!isValidForm) return;
+    var getFieldsValue = formInstance.getFieldsValue,
+      getInternalHooks = formInstance.getInternalHooks;
+    var _getInternalHooks = getInternalHooks(HOOK_MARK),
+      registerWatch = _getInternalHooks.registerWatch;
+    var callback = function callback(store) {
+      var newValue = namePathsRef.current.map(function (namePath) {
+        return get(store, namePath);
+      });
+      var nextValueStr = stringify(newValue);
+      // Compare stringify in case it's nest object
+      if (valueStrRef.current !== nextValueStr) {
+        valueStrRef.current = nextValueStr;
+        setValue(newValue);
+      }
+    };
+    // 增加防抖
+    if (wait) {
+      callback = debounce(callback, wait);
+    }
+    var cancelRegister = registerWatch(callback);
+    var initialValue = namePathsRef.current.map(function (namePath) {
+      return get(getFieldsValue(), namePath);
+    });
+    setValue(initialValue);
+    return cancelRegister;
+  },
+  // We do not need re-register since namePath content is the same
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isValidForm]);
+  return value;
+}
+export default useWatch;

package/lib/ProForm/index.d.ts

@@ -1,11 +1,12 @@
-import { Form, FormInstance } from 'antd';
+import { FormInstance } from 'antd';
 import React, { ForwardRefRenderFunction } from 'react';
 import { FormProviderProps } from 'antd/es/form/context';
 import { ProFormProps } from './propsType';
 import { useForm } from './utils/useForm';
+import useWatch from './utils/useWatch';
 interface IProForm<T = any> extends ForwardRefRenderFunction<FormInstance<T>, ProFormProps<T>> {
     useForm: typeof useForm;
-    useWatch: typeof Form.useWatch;
+    useWatch: typeof useWatch;
     [key: string]: any;
 }
 declare const ProFormForward: IProForm;

package/lib/ProForm/index.js

@@ -24,6 +24,7 @@ var _index = require("./utils/index");
 var _useForm3 = require("./utils/useForm");
 var _useFieldProps = require("./utils/useFieldProps");
 var _locale = _interopRequireDefault(require("../locale"));
+var _useWatch = _interopRequireDefault(require("./utils/useWatch"));
 var _excluded = ["mode", "span", "disabled", "isView", "columns", "footer", "onOk", "okText", "onCancel", "confirmLoading", "cancelText", "form", "children", "rowProps", "className", "expand", "expandOpen", "expandOpenChange", "viewEmpty", "labelAlign", "labelWidth", "onValuesChange", "onFinish", "originalValues", "submitOnEnter", "clearNotShow", "initialValues", "requiredOnView", "formId", "required", "originalDiffTip", "formKey", "globalControl", "scrollToError", "optimize"];
 var ProForm = function ProForm(props, ref) {
   var _forms$formKey, _localStorage, _ref;
@@ -274,22 +275,7 @@ var ProForm = function ProForm(props, ref) {
 // @ts-ignore
 var ProFormForward = /*#__PURE__*/(0, _react.forwardRef)(ProForm);
 ProFormForward.useForm = _useForm3.useForm;
-ProFormForward.useWatch = function (watchValue, form) {
-  if ((0, _lodash.isString)(watchValue)) {
-    var watchValues = [watchValue];
-    watchValues.forEach(function (item) {
-      _antd.Form.useWatch(item, form);
-    });
-    return form.getFieldsValue(watchValues);
-  }
-  if (watchValue.length) {
-    watchValue.forEach(function (item) {
-      _antd.Form.useWatch(item, form);
-    });
-    return form.getFieldsValue(watchValue);
-  }
-  return _antd.Form.useWatch([], form);
-};
+ProFormForward.useWatch = _useWatch.default;
 var ProFormProvider = exports.ProFormProvider = function ProFormProvider(props) {
   var onFormChange = props.onFormChange,
     onFormFinish = props.onFormFinish,

package/lib/ProForm/utils/useWatch.d.ts

@@ -0,0 +1,7 @@
+import { InternalNamePath, FormInstance, NamePath } from 'rc-field-form/es/interface';
+export declare function toArray<T>(value?: T | T[] | null): T[];
+export declare function getNamePath(path: NamePath | null): InternalNamePath;
+export declare function stringify(value: any): string | number;
+declare function useWatch(dependencies: string, form?: FormInstance, wait?: number): any;
+declare function useWatch(dependencies: NamePath[], form?: FormInstance, wait?: number): any[];
+export default useWatch;

package/lib/ProForm/utils/useWatch.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getNamePath = getNamePath;
+exports.stringify = stringify;
+exports.toArray = toArray;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _lodash = require("lodash");
+var _FieldContext = require("rc-field-form/es/FieldContext");
+var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+var _react = require("react");
+function toArray(value) {
+  if (value === undefined || value === null) {
+    return [];
+  }
+  return Array.isArray(value) ? value : [value];
+}
+function getNamePath(path) {
+  return toArray(path);
+}
+function stringify(value) {
+  try {
+    return JSON.stringify(value);
+  } catch (err) {
+    return Math.random();
+  }
+}
+// 创建之后namepath就不可变
+var useWatchWarning = process.env.NODE_ENV !== 'production' ? function (namePath) {
+  var fullyStr = JSON.stringify(namePath);
+  var nameStrRef = (0, _react.useRef)(fullyStr);
+  (0, _warning.default)(nameStrRef.current === fullyStr, '`useWatch` is not support dynamic `namePath`. Please provide static instead.');
+} : function () {};
+function useWatch(dependencies, form, wait) {
+  var _useState = (0, _react.useState)(typeof dependencies === 'string' ? undefined : []),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var valueStr = (0, _react.useMemo)(function () {
+    return stringify(value);
+  }, [value]);
+  var valueStrRef = (0, _react.useRef)(valueStr);
+  valueStrRef.current = valueStr;
+  var formInstance = form;
+  var isValidForm = formInstance && formInstance._init;
+  var _dependencies = typeof dependencies === 'string' ? [dependencies] : dependencies;
+  var namePaths = _dependencies === null || _dependencies === void 0 ? void 0 : _dependencies.map(function (item) {
+    return getNamePath(item);
+  });
+  var namePathsRef = (0, _react.useRef)(namePaths);
+  namePathsRef.current = namePaths;
+  useWatchWarning(namePaths);
+  (0, _react.useEffect)(function () {
+    if (!isValidForm) return;
+    var getFieldsValue = formInstance.getFieldsValue,
+      getInternalHooks = formInstance.getInternalHooks;
+    var _getInternalHooks = getInternalHooks(_FieldContext.HOOK_MARK),
+      registerWatch = _getInternalHooks.registerWatch;
+    var callback = function callback(store) {
+      var newValue = namePathsRef.current.map(function (namePath) {
+        return (0, _lodash.get)(store, namePath);
+      });
+      var nextValueStr = stringify(newValue);
+      // Compare stringify in case it's nest object
+      if (valueStrRef.current !== nextValueStr) {
+        valueStrRef.current = nextValueStr;
+        setValue(newValue);
+      }
+    };
+    // 增加防抖
+    if (wait) {
+      callback = (0, _lodash.debounce)(callback, wait);
+    }
+    var cancelRegister = registerWatch(callback);
+    var initialValue = namePathsRef.current.map(function (namePath) {
+      return (0, _lodash.get)(getFieldsValue(), namePath);
+    });
+    setValue(initialValue);
+    return cancelRegister;
+  },
+  // We do not need re-register since namePath content is the same
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isValidForm]);
+  return value;
+}
+var _default = exports.default = useWatch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.6.5-beta.2",
+  "version": "3.6.5-beta.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",