@zat-design/sisyphus-react 3.6.5-beta.1 → 3.6.5-beta.10

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/useShouldUpdate.js

@@ -22,6 +22,7 @@ var useShouldUpdate = function useShouldUpdate(props) {
     names = formItemProps.names,
     dependencies = formItemProps.dependencies;
   var timerRef = useRef();
+  var needClear = useRef(); // 是否需要执行清值操作
   var showRef = useRef();
   var disabledRef = useRef();
   var requiredRef = useRef();
@@ -158,17 +159,24 @@ var useShouldUpdate = function useShouldUpdate(props) {
       }) : fieldProps;
       // 清值防抖  多次刷新时以最后一次为准
       if (clearNotShow !== false && (name || names)) {
+        // 当show为其他变为false的时候记录一次需要清值
+        if (_show !== showRef.current && _show === false) {
+          needClear.current = true;
+        }
         if (_show === false) {
           clearTimeout(timerRef.current);
           timerRef.current = setTimeout(function () {
+            if (needClear.current !== true) return;
             if (Array.isArray(names)) {
               form.resetFields(names);
             } else {
               var clearName = formItemProps.namePath ? formItemProps.namePath.slice(0, -1).concat(formItemProps.name) : formItemProps.name;
               form.resetFields([clearName]);
             }
-          }, 200);
+            needClear.current = false;
+          }, 300);
         } else {
+          needClear.current = false;
           clearTimeout(timerRef.current);
         }
       }

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,77 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { debounce } 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 isSingle = typeof dependencies === 'string';
+  var _useState = useState({}),
+    _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 = isSingle ? [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() {
+      var newValue = getFieldsValue(_dependencies);
+      var nextValueStr = stringify(newValue);
+      // Compare stringify in case it's nest object
+      if (valueStrRef.current !== nextValueStr) {
+        valueStrRef.current = nextValueStr;
+        setValue(getFieldsValue(_dependencies));
+      }
+    };
+    // 增加防抖
+    if (wait) {
+      callback = debounce(callback, wait);
+    }
+    var cancelRegister = registerWatch(callback);
+    var initialValue = getFieldsValue(_dependencies);
+    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/es/ProTable/utils.js

@@ -105,7 +105,7 @@ export var formatColumn = function formatColumn(column, originalObj, dataSourceO
   if (['percentage', 'permillage'].includes(valueType)) {
     column.render = function (value, record, index) {
       var multiple = valueType === 'percentage' ? 100 : 1000;
-      var realValue = tools.calc(Number(value), '*', multiple);
+      var realValue = tools.calc(Number(value !== null && value !== void 0 ? value : 0), '*', multiple);
       var renderValue = getDecimalDigits(value) > valueTypePrecision ? realValue : realValue.toFixed(valueTypePrecision);
       var originalValue = getOriginalValue(value, record, originalObj, rowKey, dataIndex);
       var originalRealValue = tools.calc(Number(originalValue || null), '*', multiple);

package/es/ProTree/components/ProTreeSelect/index.js

@@ -355,9 +355,9 @@ export var ProTreeSelect = function ProTreeSelect(props, ref) {
         }
         // 迭代完子节点向上回溯，如果有匹配到得子节点，那么加入当前节点得孩子对象上,否则加入得是空数组
         item.children = currentNodeChild;
-        // let tag = false;
         // 判断节点title是否包含关键字 如果有，那么直接进行下一循环
-        if (item[label].indexOf(keyWord) > -1) {
+        // @ts-ignore
+        if (item[label].indexOf(keyWord) > -1 && (selectProps === null || selectProps === void 0 ? void 0 : selectProps.mode) !== 'treeSelect') {
           var regExp = new RegExp(keyWord);
           item[label] = item[label].replace(regExp, "<span class=\"highlight-search-text\">".concat(keyWord, "</span>"));
         }
@@ -419,11 +419,22 @@ export var ProTreeSelect = function ProTreeSelect(props, ref) {
   }
   var handleChange = function handleChange(newVal, label, extra) {
     // newVal回来得一定是label、value
+    var _selectList = selectList.map(function (item) {
+      var label = item.label;
+      var _label = label;
+      if (label) {
+        var regex = /<span class="highlight-search-text">(.*?)<\/span>/g;
+        _label = item[label] = label === null || label === void 0 ? void 0 : label.replace(regex, '$1');
+      }
+      return _objectSpread(_objectSpread({}, item), {}, {
+        label: _label
+      });
+    });
     var result = newVal;
     if (props === null || props === void 0 ? void 0 : props.labelInValue) {
-      result = getLabelByValue(selectList, newVal);
+      result = getLabelByValue(_selectList, newVal);
     }
-    var options = findTreeNode(selectList, extra === null || extra === void 0 ? void 0 : extra.triggerValue);
+    var options = findTreeNode(_selectList, extra === null || extra === void 0 ? void 0 : extra.triggerValue);
     onChange && onChange(result, options, extra);
     // 重置搜索
     showSearch && searchTreeEvent('');

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/useShouldUpdate.js

@@ -29,6 +29,7 @@ var useShouldUpdate = function useShouldUpdate(props) {
     names = formItemProps.names,
     dependencies = formItemProps.dependencies;
   var timerRef = (0, _react.useRef)();
+  var needClear = (0, _react.useRef)(); // 是否需要执行清值操作
   var showRef = (0, _react.useRef)();
   var disabledRef = (0, _react.useRef)();
   var requiredRef = (0, _react.useRef)();
@@ -165,17 +166,24 @@ var useShouldUpdate = function useShouldUpdate(props) {
       }) : fieldProps;
       // 清值防抖  多次刷新时以最后一次为准
       if (clearNotShow !== false && (name || names)) {
+        // 当show为其他变为false的时候记录一次需要清值
+        if (_show !== showRef.current && _show === false) {
+          needClear.current = true;
+        }
         if (_show === false) {
           clearTimeout(timerRef.current);
           timerRef.current = setTimeout(function () {
+            if (needClear.current !== true) return;
             if (Array.isArray(names)) {
               form.resetFields(names);
             } else {
               var clearName = formItemProps.namePath ? formItemProps.namePath.slice(0, -1).concat(formItemProps.name) : formItemProps.name;
               form.resetFields([clearName]);
             }
-          }, 200);
+            needClear.current = false;
+          }, 300);
         } else {
+          needClear.current = false;
           clearTimeout(timerRef.current);
         }
       }

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,87 @@
+"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 isSingle = typeof dependencies === 'string';
+  var _useState = (0, _react.useState)({}),
+    _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 = isSingle ? [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() {
+      var newValue = getFieldsValue(_dependencies);
+      var nextValueStr = stringify(newValue);
+      // Compare stringify in case it's nest object
+      if (valueStrRef.current !== nextValueStr) {
+        valueStrRef.current = nextValueStr;
+        setValue(getFieldsValue(_dependencies));
+      }
+    };
+    // 增加防抖
+    if (wait) {
+      callback = (0, _lodash.debounce)(callback, wait);
+    }
+    var cancelRegister = registerWatch(callback);
+    var initialValue = getFieldsValue(_dependencies);
+    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/lib/ProTable/utils.js

@@ -112,7 +112,7 @@ var formatColumn = exports.formatColumn = function formatColumn(column, original
   if (['percentage', 'permillage'].includes(valueType)) {
     column.render = function (value, record, index) {
       var multiple = valueType === 'percentage' ? 100 : 1000;
-      var realValue = _utils.tools.calc(Number(value), '*', multiple);
+      var realValue = _utils.tools.calc(Number(value !== null && value !== void 0 ? value : 0), '*', multiple);
       var renderValue = getDecimalDigits(value) > valueTypePrecision ? realValue : realValue.toFixed(valueTypePrecision);
       var originalValue = getOriginalValue(value, record, originalObj, rowKey, dataIndex);
       var originalRealValue = _utils.tools.calc(Number(originalValue || null), '*', multiple);

package/lib/ProTree/components/ProTreeSelect/index.js

@@ -355,9 +355,9 @@ var ProTreeSelect = exports.ProTreeSelect = function ProTreeSelect(props, ref) {
         }
         // 迭代完子节点向上回溯，如果有匹配到得子节点，那么加入当前节点得孩子对象上,否则加入得是空数组
         item.children = currentNodeChild;
-        // let tag = false;
         // 判断节点title是否包含关键字 如果有，那么直接进行下一循环
-        if (item[label].indexOf(keyWord) > -1) {
+        // @ts-ignore
+        if (item[label].indexOf(keyWord) > -1 && (selectProps === null || selectProps === void 0 ? void 0 : selectProps.mode) !== 'treeSelect') {
           var regExp = new RegExp(keyWord);
           item[label] = item[label].replace(regExp, "<span class=\"highlight-search-text\">".concat(keyWord, "</span>"));
         }
@@ -419,11 +419,22 @@ var ProTreeSelect = exports.ProTreeSelect = function ProTreeSelect(props, ref) {
   }
   var handleChange = function handleChange(newVal, label, extra) {
     // newVal回来得一定是label、value
+    var _selectList = selectList.map(function (item) {
+      var label = item.label;
+      var _label = label;
+      if (label) {
+        var regex = /<span class="highlight-search-text">(.*?)<\/span>/g;
+        _label = item[label] = label === null || label === void 0 ? void 0 : label.replace(regex, '$1');
+      }
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        label: _label
+      });
+    });
     var result = newVal;
     if (props === null || props === void 0 ? void 0 : props.labelInValue) {
-      result = getLabelByValue(selectList, newVal);
+      result = getLabelByValue(_selectList, newVal);
     }
-    var options = findTreeNode(selectList, extra === null || extra === void 0 ? void 0 : extra.triggerValue);
+    var options = findTreeNode(_selectList, extra === null || extra === void 0 ? void 0 : extra.triggerValue);
     onChange && onChange(result, options, extra);
     // 重置搜索
     showSearch && searchTreeEvent('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.6.5-beta.1",
+  "version": "3.6.5-beta.10",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -58,7 +58,7 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@pansy/react-watermark": "^3.1.13",
-    "@zat-design/utils": "^1.1.28",
+    "@zat-design/utils": "^1.1.29",
     "ahooks": "3.7.4",
     "antd": "4.24.8",
     "big.js": "^6.2.1",