@zat-design/sisyphus-react 4.4.2 → 4.4.3-beta.2

package/es/ProForm/components/render/Render.js

@@ -2,24 +2,29 @@ import _debounce from "lodash/debounce";
 import _set from "lodash/set";
 import _omit from "lodash/omit";
 import _isString from "lodash/isString";
-import _isFunction from "lodash/isFunction";
-/* eslint-disable prefer-destructuring */
 import { Col, Form, Input, Space } from 'antd';
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { QuestionCircleOutlined } from '@ant-design/icons';
-import useShouldUpdate from "../../utils/useShouldUpdate";
-import { isTrim, isUpperCase, findOptionByValue, parseNamePath } from "../../utils/index";
+import useShouldUpdate from "../../hooks/useShouldUpdate";
+import { findOptionByValue, parseNamePath } from "../../utils/index";
+import { buildFormItemProps } from "../../utils/buildFormItemProps";
 import { useProConfig } from "../../../ProConfigProvider";
-import transformNames from "../../utils/transformNames";
-import valueTypeMap from "../../utils/valueType";
-import useRules from "../../utils/useRules";
+import useRules from "../../hooks/useRules";
 import ConfirmWrapper from "./ConfirmWrapper";
 import ChangedWrapper from "./ChangedWrapper";
 import CustomComponentViewWrapper from "./CustomComponentViewWrapper";
 
-// 这个组件只管渲染, 参数的整理在外部处理
+/** 隐藏 FormItem 占位用的兜底 name，保证 shouldUpdate 监听有 FormItem 承载 */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const HIDDEN_FORM_ITEM_NAME = 'proFormItemHidden';
+/** Group 默认校验延时（ms），等待 setFieldValue 同步最新值后再校验 */
+const GROUP_VALIDATE_DELAY = 60;
+/** 移除多余的组件属性，group 保留 onFieldChange */
+const LAST_COMPONENT_PROPS_FILTER = ['onFieldChange', 'disabledStrictly'];
+/** 需要从透传给 Form.Item 的属性中过滤掉的 key */
+const FILTER_FORM_ITEM_KEYS = ['onFieldChange', 'shouldUpdate', 'namePath', 'isView', 'parentNames', 'space', 'before', 'after', 'globalControl', 'listName', 'fixed'];
+// 这个组件只管渲染, 参数的整理在外部处理
 const Render = props => {
   const {
     component,
@@ -29,23 +34,26 @@ const Render = props => {
     componentProps,
     show = true,
     fieldProps,
-    form,
     disabled,
-    formDisabled,
-    type,
     isSelect,
     onDiff,
     requiredOnView,
     confirm,
+    viewRender,
+    desensitization
+  } = props;
+
+  // 以下字段统一从 otherProps（Context）读取，避免与独立 prop 重复传递
+  const {
+    form,
+    formDisabled,
+    type,
+    colProps,
     globalControl,
     diffConfig,
-    viewRender,
-    desensitization,
     shouldUpdateDebounce
-  } = props;
-  let {
-    colProps
-  } = props;
+  } = otherProps || {};
+  const proConfig = useProConfig();
 
   // 剔除一些不是FormItem的属性, 防止控制台报warning
   const {
@@ -65,13 +73,13 @@ const Render = props => {
   // 更新show & disabled & rules
   const {
     shouldUpdate,
-    show: _show,
-    disabled: _disabled,
-    rules: _rules,
-    required: _required,
-    fieldProps: _fieldProps,
+    show: resolvedShow,
+    disabled: resolvedDisabled,
+    rules: resolvedRules,
+    required: resolvedRequired,
+    fieldProps: resolvedFieldProps,
     component: AutoComponent,
-    desensitization: _desensitization
+    desensitization: resolvedDesensitization
   } = useShouldUpdate({
     show,
     formItemProps,
@@ -86,7 +94,12 @@ const Render = props => {
     desensitization,
     shouldUpdateDebounce
   });
-  otherFormItemProps.shouldUpdate = shouldUpdate;
+
+  // 以不可变方式补上 shouldUpdate，作为后续整理的基础对象
+  const baseFormItemProps = {
+    ...otherFormItemProps,
+    shouldUpdate
+  };
   const namesStr = useMemo(() => {
     if (!Array.isArray(otherProps?.names)) {
       return '';
@@ -101,121 +114,78 @@ const Render = props => {
   }, [otherProps?.names]);
   const internalRule = useRules({
     names: otherProps.names,
-    label: otherFormItemProps.label,
+    label: baseFormItemProps.label,
     labelRequired,
-    required: _required,
-    rules: _rules,
+    required: resolvedRequired,
+    rules: resolvedRules,
     isSelect,
     type
   });
 
-  /**
-   * 基于formItem的normalize与getValueProps进行值类型转换
-   * @returns {}
-   */
-  const valueTypeTransform = () => {
-    let {
-      valueType
-    } = otherProps || {};
-    // SwitchCheckbox默认YN, 兼容已有组件
-    if (type === 'SwitchCheckbox') {
-      valueType = 'switch';
-    }
-    if (type === 'Input') {
-      valueType = valueType || 'trim';
-    }
-    // 不存在valueType返回空
-    if (!valueType) {
-      return {};
-    }
-    const params = {
-      ...otherProps,
-      ...otherFormItemProps
-    };
-    return _isFunction(valueTypeMap[valueType]) ? valueTypeMap[valueType](params) : {};
-  };
-
-  /**
-   * transform对象
-   * 存在names通过transformNames转换平铺处理
-   * 没有默认走valueType的处理
-   */
-  const transforms = Array.isArray(otherProps?.names) ? transformNames({
-    ...otherFormItemProps,
-    ...valueTypeTransform()
-  },
-  // 合并valueType的transform
-  form, otherProps.names, namesStr, otherProps.type) : valueTypeTransform();
-
   /**
    * globalControl 全局控制优先
    * globalControl true时，优先级 全局【formDisabled】> formitem上【column.disabled】 > 组件上【fieldProps.disabled】
    * globalControl false时，优先级 组件上【fieldProps.disabled】 > formitem上【column.disabled】 >  全局【formDisabled】
    */
-  const lastDisabled = globalControl ? formDisabled ?? _disabled ?? _fieldProps?.disabled ?? componentProps?.disabled : _disabled ?? _fieldProps?.disabled ?? componentProps?.disabled ?? formDisabled;
+  const lastDisabled = globalControl ? formDisabled ?? resolvedDisabled ?? resolvedFieldProps?.disabled ?? componentProps?.disabled : resolvedDisabled ?? resolvedFieldProps?.disabled ?? componentProps?.disabled ?? formDisabled;
 
-  // ↑↑↑↑↑↑  formItem参数整理  ↑↑↑↑↑↑
-  Object.assign(otherFormItemProps, transforms, {
-    names: otherProps.names
-  }, internalRule, {
-    required: _required || Array.isArray(rules) && rules?.some(item => item?.required) || (typeof labelRequired === 'boolean' ? labelRequired : false)
-  }, otherProps.isView && !requiredOnView ? {
-    required: false
-  } : null, {
-    ...isTrim(type, trim, useProConfig())
-  },
-  // 优先取传进来的，其次取ProConfigProvider配置的
-  {
-    ...isUpperCase(type, upperCase)
-  }, {
-    validateFirst
-  },
-  // 当某一规则校验不通过时，是否停止剩下的规则的校验
-  {
-    disabled: lastDisabled
+  // formItem 参数整理（纯函数，不可变合并，避免原地 mutate）
+  const lastFormItemProps = buildFormItemProps({
+    baseFormItemProps,
+    otherProps,
+    form,
+    namesStr,
+    internalRule,
+    resolvedRequired,
+    rules,
+    labelRequired,
+    requiredOnView,
+    type,
+    trim,
+    upperCase,
+    proConfig,
+    validateFirst,
+    lastDisabled,
+    labelWidth
   });
 
-  // 添加label宽度
-  if (labelWidth) {
-    otherFormItemProps.labelCol = {
-      flex: `${labelWidth}px`
-    };
-  }
-
-  /** 移除多余参数，防止透传给formItem报错 */
-  const _otherFormItemProps = _omit(otherFormItemProps, ['component', 'names', 'format', 'toISOString', 'toCSTString', 'switchValue', 'precision', 'clearNotShow', 'dependNames']);
-
   /**
    * 最新fieldProps: 更新后的组件Props
    */
-  // 灵活模式：当存在 flexibleGroupProps 时，从 _fieldProps.style 中移除 width，避免透传到组件
+  // 灵活模式：当存在 flexibleGroupProps 时，从 resolvedFieldProps.style 中移除 width，避免透传到组件
   const flexibleGroupProps = otherProps?.flexibleGroupProps;
-  const adjustedFieldProps = flexibleGroupProps && _fieldProps?.style?.width ? {
-    ..._fieldProps,
+  const adjustedFieldProps = flexibleGroupProps && resolvedFieldProps?.style?.width ? {
+    ...resolvedFieldProps,
     style: (() => {
       const {
         width,
         ...restStyle
-      } = _fieldProps.style;
+      } = resolvedFieldProps.style;
       return restStyle;
     })()
-  } : _fieldProps;
+  } : resolvedFieldProps;
   const lastComponentProps = {
     ...componentProps,
     ...adjustedFieldProps,
     disabled: lastDisabled,
-    desensitization: _desensitization
+    desensitization: resolvedDesensitization
   };
-  const _className = classNames({
+
+  // 防抖记忆化：handlerRef 始终指向最新 handler，debounce 仅按 debounceWait 重建，避免每次渲染重置定时器导致防抖失效
+  const debounceWait = lastComponentProps?.debounceWait;
+  const handlerRef = useRef(() => undefined);
+  const debouncedHandleChange = useMemo(() => _debounce((...args) => handlerRef.current(...args), debounceWait), [debounceWait]);
+  useEffect(() => () => debouncedHandleChange.cancel(), [debouncedHandleChange]);
+  const itemClassName = classNames({
     [className]: className,
     'pro-form-item-width-auto': ['Switch'].includes(type)
   });
-  if (formItemProps.hidden === true || _show === false) {
+  if (formItemProps.hidden === true || resolvedShow === false) {
     // 为了监听shouldUpdate  必须存在一个FormItem, 空Input解决 【[antd: Form.Item] `name` is only used for validate React element】
     return /*#__PURE__*/_jsx(Form.Item, {
-      name: _otherFormItemProps.name || 'proFormItemHidden',
-      shouldUpdate: _otherFormItemProps.shouldUpdate,
-      className: _className,
+      name: lastFormItemProps.name || HIDDEN_FORM_ITEM_NAME,
+      shouldUpdate: lastFormItemProps.shouldUpdate,
+      className: itemClassName,
       noStyle: true,
       hidden: true,
       rules: [{
@@ -229,67 +199,67 @@ const Render = props => {
    * 函数新参数组装
    */
   const functionArgs = args => {
-    const _args = [...args];
+    const nextArgs = [...args];
     const {
       valueType
     } = otherProps || {};
-    _args[1] = form.getFieldsValue();
-    _args[2] = {
+    nextArgs[1] = form.getFieldsValue();
+    nextArgs[2] = {
       form
     };
     // 优先处理FormList场景
-    if (Array.isArray(_otherFormItemProps.namePath) && _otherFormItemProps?.namePath?.length) {
-      _args[1] = form.getFieldValue(_otherFormItemProps.namePath);
-      _args[2].namePath = _otherFormItemProps.namePath;
-      _args[2].index = _otherFormItemProps.namePath[_otherFormItemProps?.namePath?.length - 1];
+    if (Array.isArray(lastFormItemProps.namePath) && lastFormItemProps?.namePath?.length) {
+      nextArgs[1] = form.getFieldValue(lastFormItemProps.namePath);
+      nextArgs[2].namePath = lastFormItemProps.namePath;
+      nextArgs[2].index = lastFormItemProps.namePath[lastFormItemProps?.namePath?.length - 1];
     }
 
     // 返回表单元素默认值
-    _args[2].extra = args;
+    nextArgs[2].extra = args;
 
     // 当设置valueType后返回转换后的值
     if (valueType) {
-      _args[2].transformValue = form.getFieldValue(_otherFormItemProps?.name) || undefined;
+      nextArgs[2].transformValue = form.getFieldValue(lastFormItemProps?.name) || undefined;
     }
-    _args[2].option = args[1];
+    nextArgs[2].option = args[1];
     switch (type) {
       case 'ProCascader':
-        _args[2].selectedOptions = args[1];
+        nextArgs[2].selectedOptions = args[1];
         break;
       case 'DatePicker':
       case 'RangePicker':
-        _args[2].dateString = args[1];
+        nextArgs[2].dateString = args[1];
         break;
       default:
         break;
     }
-    return _args;
+    return nextArgs;
   };
 
   /**
    * onChange参数重置 (value, record, { form, index, namePath, option }) => void
    */
   const defaultHandleChange = (...args) => {
-    let _args = [...args];
+    let nextArgs = [...args];
 
     // 优先使用onFieldChange
     const changeKey = Object.keys(lastComponentProps).includes('onFieldChange') ? 'onFieldChange' : 'onChange';
     if (changeKey === 'onChange') {
-      _args[2] = form;
+      nextArgs[2] = form;
     }
     if (changeKey === 'onFieldChange') {
-      _args = functionArgs([...args]);
+      nextArgs = functionArgs([...args]);
     }
-    const inList = _otherFormItemProps?.namePath?.length;
+    const inList = lastFormItemProps?.namePath?.length;
     if ( /*#__PURE__*/React.isValidElement(AutoComponent)) {
-      (AutoComponent?.props)[changeKey]?.(..._args) || lastComponentProps[changeKey]?.(..._args);
+      (AutoComponent?.props)[changeKey]?.(...nextArgs) || lastComponentProps[changeKey]?.(...nextArgs);
       return false;
     }
 
     // FormList 和 Group场景 对比值改变的话, 回显到表单上
     if (inList && changeKey === 'onFieldChange') {
       const values = form.getFieldsValue();
-      const newValues = _set(values, _otherFormItemProps.namePath, _args[1]);
+      const newValues = _set(values, lastFormItemProps.namePath, nextArgs[1]);
       form.setFieldsValue(newValues);
     }
 
@@ -299,30 +269,32 @@ const Render = props => {
         const namePath = parseNamePath(formItemProps?.parentNames);
         form.setFieldValue(formItemProps?.parentNames, form.getFieldValue(namePath));
         form.validateFields(namePath);
-      }, 60);
+      }, GROUP_VALIDATE_DELAY);
     }
 
     // ProTreeSelect返回option
-    if (['ProTree'].includes(type) && !_args[2].option) {
-      _args[2].option = findOptionByValue(lastComponentProps?.dataSource, _args?.[0]?.[0], lastComponentProps?.fieldNames || {});
+    if (['ProTree'].includes(type) && !nextArgs[2].option) {
+      nextArgs[2].option = findOptionByValue(lastComponentProps?.dataSource, nextArgs?.[0]?.[0], lastComponentProps?.fieldNames || {});
     }
-    lastComponentProps[changeKey]?.(..._args);
+    lastComponentProps[changeKey]?.(...nextArgs);
   };
-  const debouncedHandleChange = _debounce(defaultHandleChange, lastComponentProps?.debounceWait);
+
+  // 更新 ref 到最新 handler，使记忆化的防抖函数始终调用最新闭包
+  handlerRef.current = defaultHandleChange;
   const handleChange = (...args) => {
-    const _args = [...args];
+    const nextArgs = [...args];
     if (lastComponentProps?.debounceWait) {
       // 为了兼容 Input 和 TextArea 的 onChange 事件，需要将 event 对象转换为 value
       if (['Input', 'TextArea'].includes(type)) {
-        _args[0] = {
+        nextArgs[0] = {
           target: {
-            value: _args[0].target.value
+            value: nextArgs[0].target.value
           }
         };
       }
-      debouncedHandleChange(..._args);
+      debouncedHandleChange(...nextArgs);
     } else {
-      defaultHandleChange(..._args);
+      defaultHandleChange(...nextArgs);
     }
   };
 
@@ -330,18 +302,32 @@ const Render = props => {
    * onBlur参数重置 (value, record, { form, index, namePath, option }) => void
    */
   const handleBlur = async (...args) => {
-    const _args = functionArgs([...args]);
-    lastComponentProps?.onBlur && (await lastComponentProps?.onBlur(..._args));
+    const nextArgs = functionArgs([...args]);
+    lastComponentProps?.onBlur && (await lastComponentProps?.onBlur(...nextArgs));
   };
-  const renderItem = () => {
-    // 移除多余字段，group保留onFieldChange
-    const lastComponentPropsFilter = ['onFieldChange', 'disabledStrictly'];
 
+  // colProps 一次派生：FormList / 容器组件需要覆盖 span
+  const lastColProps = (() => {
+    if (type === 'FormList') {
+      const lessMode = lastComponentProps.mode === 'less';
+      return {
+        ...colProps,
+        span: lessMode ? colProps?.span : 24
+      }; // 默认占一行
+    }
+    if (['ProCollapse', 'Container'].includes(type)) {
+      return {
+        ...colProps,
+        span: 24
+      }; // 默认占一行
+    }
+    return colProps;
+  })();
+  const renderItem = () => {
     // 表单渲染 start
     const childProps = {
       ...AutoComponent?.props,
-      ..._omit(lastComponentProps, lastComponentPropsFilter),
-      // @ts-ignore
+      ..._omit(lastComponentProps, LAST_COMPONENT_PROPS_FILTER),
       otherProps,
       onChange: handleChange,
       onBlur: handleBlur
@@ -397,7 +383,7 @@ const Render = props => {
 
     // 正常渲染逻辑
     let child = /*#__PURE__*/React.isValidElement(AutoComponent) ? ( /*#__PURE__*/React.cloneElement(AutoComponent, childProps)) : /*#__PURE__*/_jsx(AutoComponent, {
-      ..._omit(lastComponentProps, [...lastComponentPropsFilter, 'debounceWait']),
+      ..._omit(lastComponentProps, [...LAST_COMPONENT_PROPS_FILTER, 'debounceWait']),
       otherProps: {
         ...otherProps,
         show,
@@ -418,7 +404,7 @@ const Render = props => {
     // 表单提示
 
     if (tooltip) {
-      _otherFormItemProps.tooltip = _isString(tooltip) ? {
+      lastFormItemProps.tooltip = _isString(tooltip) ? {
         title: tooltip,
         icon: /*#__PURE__*/_jsx(QuestionCircleOutlined, {
           className: "pro-icon-tip"
@@ -430,27 +416,19 @@ const Render = props => {
         ...tooltip
       };
     }
-
-    // 需要过滤掉的form_item的key
-    const filterFormItemKey = ['onFieldChange', 'shouldUpdate', 'namePath', 'isView', 'parentNames', 'space', 'before', 'after', 'globalControl', 'listName', 'fixed'];
     if (type === 'FormList') {
       lastComponentProps.disabled = lastDisabled;
-      const lessMode = lastComponentProps.mode === 'less';
-      colProps = {
-        ...colProps,
-        span: lessMode ? colProps.span : 24 // 默认占一行
-      };
       return /*#__PURE__*/_jsx(Form.Item, {
-        ..._omit(_otherFormItemProps, filterFormItemKey),
-        // @ts-ignore
+        ..._omit(lastFormItemProps, FILTER_FORM_ITEM_KEYS),
+        // @ts-ignore _internalItemRender 为 antd Form.Item 内部属性，未导出公开类型，无法去除
         _internalItemRender: internalItemRender,
-        className: _className,
+        className: itemClassName,
         children: /*#__PURE__*/_jsx(Form.List, {
-          name: _otherFormItemProps.name,
-          ..._omit(_otherFormItemProps, ['rules']),
+          name: lastFormItemProps.name,
+          ..._omit(lastFormItemProps, ['rules']),
           children: (fields, operation, meta) => {
             return /*#__PURE__*/_jsx(AutoComponent, {
-              ..._omit(lastComponentProps, lastComponentPropsFilter),
+              ..._omit(lastComponentProps, LAST_COMPONENT_PROPS_FILTER),
               otherProps: otherProps,
               fields: fields,
               operation: operation,
@@ -460,14 +438,6 @@ const Render = props => {
         })
       });
     }
-
-    //  默认占据一行
-    if (['ProCollapse', 'Container'].includes(type)) {
-      colProps = {
-        ...colProps,
-        span: 24 // 默认占一行
-      };
-    }
     if (diffConfig?.originalValues) {
       let nextNames = otherProps.names;
       // FormList中的names字段需要去除前缀
@@ -485,17 +455,16 @@ const Render = props => {
         type: type,
         onChange: handleChange,
         onBlur: handleBlur,
-        valuePropName: _otherFormItemProps.valuePropName,
-        normalize: _otherFormItemProps.normalize,
-        getValueProps: _otherFormItemProps.getValueProps,
+        valuePropName: lastFormItemProps.valuePropName,
+        normalize: lastFormItemProps.normalize,
+        getValueProps: lastFormItemProps.getValueProps,
         viewRender: viewRender,
         children: child
       });
     }
 
     // 灵活模式样式处理：从 flexibleGroupProps 获取样式
-    const flexibleGroupProps = otherProps?.flexibleGroupProps;
-    const finalClassName = flexibleGroupProps?.className ? classNames(_className, flexibleGroupProps.className) : _className;
+    const finalClassName = flexibleGroupProps?.className ? classNames(itemClassName, flexibleGroupProps.className) : itemClassName;
     const finalStyle = flexibleGroupProps?.style;
 
     // 判断是否应该使用自定义组件视图包装器
@@ -504,13 +473,13 @@ const Render = props => {
     // 如果应该使用自定义组件视图包装器，直接返回
     if (shouldUseCustomViewWrapper) {
       return /*#__PURE__*/_jsx(CustomComponentViewWrapper, {
-        formItemProps: _otherFormItemProps,
+        formItemProps: lastFormItemProps,
         internalItemRender: internalItemRender,
         className: finalClassName,
         style: finalStyle,
-        filterFormItemKey: filterFormItemKey,
+        filterFormItemKey: FILTER_FORM_ITEM_KEYS,
         form: form,
-        name: _otherFormItemProps.name,
+        name: lastFormItemProps.name,
         isView: otherProps?.isView,
         viewRender: props.viewRender || viewRender,
         originComponent: props.originComponent || originComponent,
@@ -524,8 +493,8 @@ const Render = props => {
 
     // 正常情况：使用标准的 Form.Item
     return /*#__PURE__*/_jsx(Form.Item, {
-      ..._omit(_otherFormItemProps, filterFormItemKey),
-      // @ts-ignore
+      ..._omit(lastFormItemProps, FILTER_FORM_ITEM_KEYS),
+      // @ts-ignore _internalItemRender 为 antd Form.Item 内部属性，未导出公开类型，无法去除
       _internalItemRender: internalItemRender,
       className: finalClassName,
       style: finalStyle,
@@ -533,11 +502,11 @@ const Render = props => {
     });
   };
   const FormItem = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [_otherFormItemProps.shouldUpdate ?
+    children: [lastFormItemProps.shouldUpdate ?
     /*#__PURE__*/
     // 空标签防止气泡不显示
     _jsx(Form.Item, {
-      shouldUpdate: _otherFormItemProps.shouldUpdate,
+      shouldUpdate: lastFormItemProps.shouldUpdate,
       noStyle: true,
       children: () => renderItem()
     }) : renderItem(), otherProps?.names?.length ? otherProps.names.map(name => {
@@ -557,7 +526,7 @@ const Render = props => {
     return FormItem;
   }
   return /*#__PURE__*/_jsx(Col, {
-    ...colProps,
+    ...lastColProps,
     children: FormItem
   });
 };