@ant-design/pro-components 3.1.12-0 → 3.1.13-0

package/es/form/components/FormItem/index.js

@@ -1,8 +1,7 @@
 import { omit } from '@rc-component/util';
-import { ConfigProvider, Form } from 'antd';
+import { Form } from 'antd';
 import React, { useContext, useEffect, useMemo } from 'react';
-import { isDropdownValueType, omitUndefined, useDeepCompareMemo, useRefFunction } from "../../../utils";
-import { LightWrapper } from "../../BaseForm";
+import { omitUndefined, useDeepCompareMemo, useRefFunction } from "../../../utils";
 import FieldContext from "../../FieldContext";
 import { FormListContext } from "../List";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -22,10 +21,11 @@ const WithValueFomFiledProps = formFieldProps => {
     children: filedChildren,
     onChange,
     onBlur,
-    ignoreFormItem,
+    ignoreFormItem: _ignoreFormItem,
     valuePropName = 'value',
     ...restProps
   } = formFieldProps;
+  const filedChildrenElementProps = /*#__PURE__*/React.isValidElement(filedChildren) ? filedChildren.props : undefined;
   const isProFormComponent =
   // @ts-ignore
   filedChildren?.type?.displayName !== 'ProFormComponent';
@@ -34,21 +34,20 @@ const WithValueFomFiledProps = formFieldProps => {
     onChange?.(...restParams);
     if (isProFormComponent) return;
     if (isValidElementForFiledChildren) return undefined;
-    filedChildren?.props?.onChange?.(...restParams);
-    filedChildren?.props?.fieldProps?.onChange?.(...restParams);
+    filedChildrenElementProps?.onChange?.(...restParams);
+    filedChildrenElementProps?.fieldProps?.onChange?.(...restParams);
   });
   const onBlurMemo = useRefFunction(function (...restParams) {
     if (isProFormComponent) return;
     if (isValidElementForFiledChildren) return;
     onBlur?.(...restParams);
-    filedChildren?.props?.onBlur?.(...restParams);
-    filedChildren?.props?.fieldProps?.onBlur?.(...restParams);
+    filedChildrenElementProps?.onBlur?.(...restParams);
+    filedChildrenElementProps?.fieldProps?.onBlur?.(...restParams);
   });
+  const childFieldProps = filedChildrenElementProps?.fieldProps;
   const omitOnBlurAndOnChangeProps = useDeepCompareMemo(() => omit(
   // @ts-ignore
-  filedChildren?.props?.fieldProps || {}, ['onBlur', 'onChange']), [omit(
-  // @ts-ignore
-  filedChildren?.props?.fieldProps || {}, ['onBlur', 'onChange'])]);
+  childFieldProps || {}, ['onBlur', 'onChange']), [childFieldProps]);
   const propsValuePropName = formFieldProps[valuePropName];
   const fieldProps = useMemo(() => {
     if (isProFormComponent) return undefined;
@@ -70,9 +69,9 @@ const WithValueFomFiledProps = formFieldProps => {
     if (! /*#__PURE__*/React.isValidElement(filedChildren)) return undefined;
     return (...restParams) => {
       onChange?.(...restParams);
-      filedChildren?.props?.onChange?.(...restParams);
+      filedChildrenElementProps?.onChange?.(...restParams);
     };
-  }, [fieldProps, filedChildren, onChange]);
+  }, [fieldProps, filedChildren, filedChildrenElementProps, onChange]);
   if (! /*#__PURE__*/React.isValidElement(filedChildren)) return /*#__PURE__*/_jsx(_Fragment, {
     children: filedChildren
   });
@@ -83,12 +82,12 @@ const WithValueFomFiledProps = formFieldProps => {
   return /*#__PURE__*/React.cloneElement(filedChildren, omitUndefined({
     ...restProps,
     [valuePropName]: formFieldProps[valuePropName],
-    ...filedChildren.props,
+    ...filedChildrenElementProps,
     onChange: finalChange,
     // 只有当子组件是 ProFormComponent 时才传递 fieldProps，避免传递给原生 DOM 元素
     ...(!isProFormComponent && fieldProps ? {
       fieldProps: {
-        ...filedChildren.props?.fieldProps,
+        ...filedChildrenElementProps?.fieldProps,
         ...fieldPropsFromRest,
         ...fieldProps
       }
@@ -115,63 +114,54 @@ const WarpFormItem = ({
   help,
   ...props
 }) => {
-  const formDom = useMemo(() => {
-    let getValuePropsFunc = value => {
-      const newValue = convertValue?.(value, props.name) ?? value;
-      if (props.getValueProps) return props.getValueProps(newValue);
-      return {
-        [valuePropName || 'value']: newValue
-      };
+  const getValuePropsFunc = convertValue || props.getValueProps ? value => {
+    const newValue = convertValue?.(value, props.name) ?? value;
+    if (props.getValueProps) return props.getValueProps(newValue);
+    return {
+      [valuePropName || 'value']: newValue
     };
-    if (!convertValue && !props.getValueProps) {
-      getValuePropsFunc = undefined;
-    }
-    if (!addonAfter && !addonBefore) {
-      return /*#__PURE__*/_jsx(Form.Item, {
-        ...props,
-        valuePropName: valuePropName,
-        getValueProps: getValuePropsFunc,
-        children: children
-      });
-    }
-    return /*#__PURE__*/_jsx(Form.Item, {
-      ...props,
-      help: typeof help !== 'function' ? help : undefined,
-      valuePropName: valuePropName
-      // @ts-ignore
-      ,
-      _internalItemRender: {
-        mark: 'pro_table_render',
-        render: (inputProps, doms) => /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs("div", {
+  } : undefined;
+  const formDom = !addonAfter && !addonBefore ? /*#__PURE__*/_jsx(Form.Item, {
+    ...props,
+    valuePropName: valuePropName,
+    getValueProps: getValuePropsFunc,
+    children: children
+  }) : /*#__PURE__*/_jsx(Form.Item, {
+    ...props,
+    help: typeof help !== 'function' ? help : undefined,
+    valuePropName: valuePropName
+    // @ts-ignore
+    ,
+    _internalItemRender: {
+      mark: 'pro_table_render',
+      render: (inputProps, doms) => /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            ...addonWarpStyle
+          },
+          children: [addonBefore ? /*#__PURE__*/_jsx("div", {
             style: {
-              display: 'flex',
-              alignItems: 'center',
-              flexWrap: 'wrap',
-              ...addonWarpStyle
+              marginInlineEnd: 8
             },
-            children: [addonBefore ? /*#__PURE__*/_jsx("div", {
-              style: {
-                marginInlineEnd: 8
-              },
-              children: addonBefore
-            }) : null, doms.input, addonAfter ? /*#__PURE__*/_jsx("div", {
-              style: {
-                marginInlineStart: 8
-              },
-              children: addonAfter
-            }) : null]
-          }), typeof help === 'function' ? help({
-            errors: inputProps.errors,
-            warnings: inputProps.warnings
-          }) : doms.errorList, doms.extra]
-        })
-      },
-      ...props,
-      getValueProps: getValuePropsFunc,
-      children: children
-    });
-  }, [addonAfter, addonBefore, children, convertValue?.toString(), props]);
+            children: addonBefore
+          }) : null, doms.input, addonAfter ? /*#__PURE__*/_jsx("div", {
+            style: {
+              marginInlineStart: 8
+            },
+            children: addonAfter
+          }) : null]
+        }), typeof help === 'function' ? help({
+          errors: inputProps.errors,
+          warnings: inputProps.warnings
+        }) : doms.errorList, doms.extra]
+      })
+    },
+    getValueProps: getValuePropsFunc,
+    children: children
+  });
   return /*#__PURE__*/_jsx(FormItemProvide.Provider, {
     value: {
       name: props.name,
@@ -181,27 +171,30 @@ const WarpFormItem = ({
   });
 };
 const ProFormItem = props => {
-  /** 从 context 中拿到的值 */
-  const {
-    componentSize
-  } = ConfigProvider?.useConfig?.() || {
-    componentSize: 'middle'
-  };
-  const size = componentSize;
   const {
     valueType,
     transform,
     dataFormat,
     ignoreFormItem,
-    lightProps,
-    children: unusedChildren,
-    fieldProps,
+    children: _unusedChildren,
+    fieldProps: _fieldProps,
+    // 显式解构 label/tooltip，防止它们从 ...rest 漏入 WarpFormItem 被覆盖
+    label,
+    tooltip,
     ...rest
   } = props;
   const formListField = useContext(FormListContext);
 
   // ProFromList 的 filed，里面有name和key
   /** 从 context 中拿到的值 */
+  const fieldValueTypeName = useMemo(() => {
+    if (props.name === undefined) return props.name;
+    if (formListField.listName !== undefined) {
+      return [formListField.listName, props.name].flat(1);
+    }
+    // 确保返回的是数组格式
+    return Array.isArray(props.name) ? props.name : [props.name];
+  }, [formListField.listName, props.name]);
   const name = useMemo(() => {
     if (props.name === undefined) return props.name;
     if (formListField.name !== undefined) {
@@ -223,51 +216,41 @@ const ProFormItem = props => {
     }
     // Field.type === 'ProField' 时 props 里面是有 valueType 的，所以要设置一下
     // 写一个 ts 比较麻烦，用 any 顶一下
-    setFieldValueType(name, {
+    setFieldValueType(fieldValueTypeName, {
       valueType: valueType || 'text',
       dateFormat: dataFormat,
       transform
     });
-  }, [name, dataFormat, props.name, setFieldValueType, transform, valueType]);
-  const isDropdown = /*#__PURE__*/React.isValidElement(props.children) && isDropdownValueType(valueType || props.children.props.valueType);
-  const noLightFormItem = useMemo(() => {
-    if (!lightProps?.light || lightProps?.customLightMode || isDropdown) {
-      return true;
-    }
-    return false;
-  }, [lightProps?.customLightMode, isDropdown, lightProps?.light]);
+  }, [fieldValueTypeName, dataFormat, props.name, setFieldValueType, transform, valueType]);
+  const formItemKey = rest.proFormFieldKey || rest.name?.toString();
 
   // formItem 支持function，如果是function 我就直接不管了
   if (typeof props.children === 'function') {
     return /*#__PURE__*/_createElement(WarpFormItem, {
       ...rest,
       name: name,
-      key: rest.proFormFieldKey || rest.name?.toString()
+      key: formItemKey
     }, props.children);
   }
   const children = /*#__PURE__*/_jsx(WithValueFomFiledProps, {
     valuePropName: props.valuePropName,
     children: props.children
-  }, rest.proFormFieldKey || rest.name?.toString());
-  const lightPropsForWrapper = omitUndefined(lightProps || {});
-  const lightDom = noLightFormItem ? children : /*#__PURE__*/_createElement(LightWrapper, {
-    ...lightPropsForWrapper,
-    key: rest.proFormFieldKey || rest.name?.toString(),
-    size: size
-  }, children);
-  // 这里控制是否需要 LightWrapper，为了提升一点点性能
+  }, formItemKey);
   if (ignoreFormItem) {
     return /*#__PURE__*/_jsx(_Fragment, {
-      children: lightDom
+      children: children
     });
   }
   return /*#__PURE__*/_jsx(WarpFormItem, {
     ...formItemProps,
     ...rest,
+    // label/tooltip 已从 props 解构，通过这里显式传入，确保调用方传 undefined 时不被 rest/formItemProps 覆盖
+    label: label,
+    tooltip: tooltip,
     name: name,
     isListField: formListField.name !== undefined,
-    children: lightDom
-  }, rest.proFormFieldKey || rest.name?.toString());
+    children: children
+  }, formItemKey);
 };
 export { FormItemProvide };
 export default ProFormItem;

package/es/form/components/FormItem/warpField.js

@@ -1,9 +1,10 @@
 import { FieldContext as RcFieldContext } from '@rc-component/form';
 import { clsx } from 'clsx';
 import React, { useContext, useMemo, useState } from 'react';
-import { omitUndefined, pickProFormItemProps, stringify, useDeepCompareMemo, useRefFunction } from "../../../utils";
+import { isDropdownValueType, omitUndefined, pickProFormItemProps, stringify, useDeepCompareMemo, useRefFunction } from "../../../utils";
 import FieldContext from "../../FieldContext";
 import { useGridHelpers } from "../../helpers";
+import { LightWrapper } from "../../layouts/LightFilter/LightWrapper";
 import ProFormDependency from "../Dependency";
 import ProFormItem from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -191,17 +192,46 @@ export function warpField(Field, config) {
         ref: props?.fieldRef
       }, props.proFormFieldKey || props.name);
     }, [fieldProFieldProps, fieldFieldProps, rest]);
+    const isLightMode = proFieldProps?.light === true && !customLightMode;
 
     // 使用useMemo包裹避免不必要的re-render
     const formItem = useDeepCompareMemo(() => {
-      return /*#__PURE__*/_jsx(ProFormItem
-      // 全局的提供一个 tip 功能，可以减少代码量
-      // 轻量模式下不通过 FormItem 显示 label
-      , {
-        label: label && proFieldProps?.light !== true ? label : undefined,
-        tooltip: proFieldProps?.light !== true && tooltip,
+      // light 模式下（非下拉类）：由 Form.Item 正常注入 value，LightWrapper 作为 Form.Item
+      // 的直接 children 接收 value/onChange，再把 Field 渲染在 Popover 内部
+      if (isLightMode && !isDropdownValueType(valueType)) {
+        return /*#__PURE__*/_jsx(ProFormItem, {
+          label: undefined,
+          tooltip: false,
+          valuePropName: valuePropName,
+          ...otherProps,
+          ignoreFormItem: ignoreFormItem,
+          transform: transform,
+          dataFormat: fieldProps?.format,
+          valueType: valueType,
+          messageVariables: {
+            label: label || '',
+            ...otherProps?.messageVariables
+          },
+          convertValue: convertValue,
+          children: /*#__PURE__*/_jsx(LightWrapper, {
+            label: label,
+            valuePropName: valuePropName,
+            variant: rest.variant ?? fieldProps?.variant,
+            allowClear: field?.props?.allowClear ?? allowClear,
+            footerRender: field?.props?.footerRender,
+            placement: rest.placement,
+            labelFormatter: lightFilterLabelFormatter,
+            valueType: valueType,
+            children: field
+          })
+        }, props.proFormFieldKey || otherProps.name?.toString());
+      }
+      return /*#__PURE__*/_jsx(ProFormItem, {
         valuePropName: valuePropName,
         ...otherProps,
+        // 轻量模式下 Form.Item 不展示 label/tooltip，放在展开之后确保不被覆盖
+        label: isLightMode ? undefined : label,
+        tooltip: isLightMode ? undefined : tooltip,
         ignoreFormItem: ignoreFormItem,
         transform: transform,
         dataFormat: fieldProps?.format,
@@ -211,25 +241,9 @@ export function warpField(Field, config) {
           ...otherProps?.messageVariables
         },
         convertValue: convertValue,
-        lightProps: omitUndefined({
-          ...fieldProps,
-          variant: rest.variant ?? fieldProps?.variant,
-          valueType,
-          bordered,
-          allowClear: field?.props?.allowClear ?? allowClear,
-          light: proFieldProps?.light,
-          label,
-          customLightMode,
-          labelFormatter: lightFilterLabelFormatter,
-          valuePropName,
-          footerRender: field?.props?.footerRender,
-          // 使用用户的配置覆盖默认的配置
-          ...rest.lightProps,
-          ...otherProps.lightProps
-        }),
         children: field
       }, props.proFormFieldKey || otherProps.name?.toString());
-    }, [label, proFieldProps?.light, tooltip, valuePropName, props.proFormFieldKey, otherProps, ignoreFormItem, transform, fieldProps, valueType, convertValue, bordered, field, allowClear, customLightMode, lightFilterLabelFormatter, rest.lightProps]);
+    }, [isLightMode, label, tooltip, valuePropName, props.proFormFieldKey, otherProps, ignoreFormItem, transform, fieldProps, valueType, convertValue, bordered, field, allowClear, customLightMode, lightFilterLabelFormatter, rest.variant, rest.placement]);
     const {
       ColWrapper
     } = useGridHelpers(rest);

package/es/form/components/List/ListContainer.js

@@ -7,10 +7,25 @@ import { ProProvider, useIntl } from "../../../provider";
 import { nanoid, runFunction } from "../../../utils";
 import { EditOrReadOnlyContext } from "../../BaseForm/EditOrReadOnlyContext";
 import { ProFormListItem } from "./ListItem";
+
+/**
+ * 用 guard 函数包装 action 方法：
+ * - 有 guard 时先执行 guard，返回 true 才执行 action 并触发回调
+ * - 无 guard 时直接执行 action 并触发回调
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+async function wrapWithGuard(args, guard, count, doAction, afterCallback, countDelta = 0) {
+  if (guard) {
+    const success = await guard(...args, count);
+    if (!success) return false;
+  }
+  const res = doAction(...args);
+  afterCallback?.(...args, count + countDelta);
+  return res;
+}
 const ProFormListContainer = props => {
   const intl = useIntl();
   const {
@@ -48,47 +63,15 @@ const ProFormListContainer = props => {
   }, [fields]);
 
   /**
-   * 根据行为守卫包装action函数
+   * 根据行为守卫包装 action 函数，复用 wrapWithGuard 消除 add/remove 分支重复
    */
   const wrapperAction = useMemo(() => {
     const wrapAction = {
       ...action
     };
     const count = uuidFields.length;
-    if (actionGuard?.beforeAddRow) {
-      wrapAction.add = async (...rest) => {
-        const success = await actionGuard.beforeAddRow(...rest, count);
-        if (success) {
-          const res = action.add(...rest);
-          onAfterAdd?.(...rest, count + 1);
-          return res;
-        }
-        return false;
-      };
-    } else {
-      wrapAction.add = async (...rest) => {
-        const res = action.add(...rest);
-        onAfterAdd?.(...rest, count + 1);
-        return res;
-      };
-    }
-    if (actionGuard?.beforeRemoveRow) {
-      wrapAction.remove = async (...rest) => {
-        const success = await actionGuard.beforeRemoveRow(...rest, count);
-        if (success) {
-          const res = action.remove(...rest);
-          onAfterRemove?.(...rest, count - 1);
-          return res;
-        }
-        return false;
-      };
-    } else {
-      wrapAction.remove = async (...rest) => {
-        const res = action.remove(...rest);
-        onAfterRemove?.(...rest, count - 1);
-        return res;
-      };
-    }
+    wrapAction.add = (...args) => wrapWithGuard(args, actionGuard?.beforeAddRow, count, action.add, onAfterAdd, 1);
+    wrapAction.remove = (...args) => wrapWithGuard(args, actionGuard?.beforeRemoveRow, count, action.remove, onAfterRemove, -1);
     return wrapAction;
   }, [action, actionGuard?.beforeAddRow, actionGuard?.beforeRemoveRow, onAfterAdd, onAfterRemove, uuidFields.length]);
   const creatorButton = useMemo(() => {

package/es/form/components/List/ListItem.d.ts

@@ -79,8 +79,8 @@ export type ProFromListCommonProps = {
     /**
      * @name 提交时转化值，一般用于将值转化为提交的数据
      * @param value 字段的值
-     * @param namePath 字段的name
-     * @param allValues 所有的字段
+     * @param namePath 从根到当前字段的路径（string[]），列表字段为路径最后一段对应整段 list
+     * @param allValues 根级表单对象（提交转换中与 `transformKeySubmitValue` 的根 values 一致）
      * @returns 字段新的值，如果返回对象，会和所有值 merge 一次
      *
      * @example {name:[a,b] => {name:a,b }    transform: (value,namePath,allValues)=> value.join(",")