fix(form): 表单项配置 request 并且自定义 renderFormItem 时，没有透传 options 和 loading (

#7457) * fix: #7456 表单项配置 request 并且自定义 renderFormItem 时，没有透传 options 和 loading * fix: update icon * fix: update icon --------- Co-authored-by: 杨亚宁-remote <yangyn@louddt.com> Co-authored-by: 期贤 <qixian.cs@outlook.com>
ant-design · Aug 8, 2023 · 1baf580 · 1baf580
1 parent 387ab8f
commit 1baf580
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 35 deletions.
diff --git a/packages/field/src/components/Cascader/index.tsx b/packages/field/src/components/Cascader/index.tsx
@@ -121,7 +121,11 @@ const FieldCascader: ProFieldFC<GroupProps> = (
 
     if (renderFormItem) {
       dom =
-        renderFormItem(rest.text, { mode, ...rest.fieldProps }, dom) ?? null;
+        renderFormItem(
+          rest.text,
+          { mode, ...rest.fieldProps, options, loading },
+          dom,
+        ) ?? null;
     }
 
     if (light) {

diff --git a/packages/field/src/components/Checkbox/index.tsx b/packages/field/src/components/Checkbox/index.tsx
@@ -128,7 +128,11 @@ const FieldCheckbox: ProFieldFC<GroupProps> = (
     );
     if (renderFormItem) {
       return (
-        renderFormItem(rest.text, { mode, ...rest.fieldProps }, dom) ?? null
+        renderFormItem(
+          rest.text,
+          { mode, ...rest.fieldProps, options, loading },
+          dom,
+        ) ?? null
       );
     }
     return dom;

diff --git a/packages/field/src/components/ColorPicker/index.tsx b/packages/field/src/components/ColorPicker/index.tsx
@@ -1,9 +1,9 @@
 import { compareVersions } from '@ant-design/pro-utils';
 import { ConfigProvider, version } from 'antd';
+import classNames from 'classnames';
 import React, { useContext, useMemo } from 'react';
 import type { ProFieldFC } from '../../index';
 import { ColorPicker as ColorPickerV4 } from './old';
-import classNames from 'classnames';
 // https://ant.design/components/color-picker-cn 示例颜色
 const DEFAULT_PRESETS = {
   label: 'Recommended',
@@ -29,25 +29,25 @@ const DEFAULT_PRESETS = {
     '#722ED14D',
     '#EB2F964D',
   ],
-}
+};
 /**
  * 判断是否是 5.5.0 以上的版本
- * @returns 
+ * @returns
  */
 function IsIt_Render_V5() {
-  return compareVersions(version, '5.5.0') > -1
+  return compareVersions(version, '5.5.0') > -1;
 }
 /**
  * 获取颜色组件
  * @param {boolean} [old=false] 是否使用旧版本
- * @return {*} 
+ * @return {*}
  */
 function getColorPicker(old: boolean = false) {
   if ((typeof old === 'undefined' || old === false) && IsIt_Render_V5()) {
     const { ColorPicker } = require('antd');
     return ColorPicker;
   }
-  return ColorPickerV4
+  return ColorPickerV4;
 }
 // const ColorPicker = getColorPicker();
 /**
@@ -61,30 +61,43 @@ const FieldColorPicker: ProFieldFC<{
   text: string;
   /** 是否使用旧版本 */
   old?: boolean;
-}> = ({ text, mode: type, render, renderFormItem, fieldProps, old }, ref: any) => {
+}> = (
+  { text, mode: type, render, renderFormItem, fieldProps, old },
+  ref: any,
+) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const ColorPicker = React.useMemo(() => getColorPicker(old), [old]);
   const prefixCls = getPrefixCls('pro-field-color-picker');
   // 5.5.0 以上版本追加 className
   const className = useMemo(() => {
     if (old) return '';
-    return classNames({ [prefixCls]: IsIt_Render_V5() })
+    return classNames({ [prefixCls]: IsIt_Render_V5() });
   }, [prefixCls, old]);
   if (type === 'read') {
-    const dom = <ColorPicker
-      value={text}
-      mode="read"
-      ref={ref}
-      className={className}
-      // 设置无法 open 
-      open={false} />;
+    const dom = (
+      <ColorPicker
+        value={text}
+        mode="read"
+        ref={ref}
+        className={className}
+        // 设置无法 open
+        open={false}
+      />
+    );
     if (render) {
       return render(text, { mode: type, ...fieldProps }, dom);
     }
     return dom;
   }
   if (type === 'edit' || type === 'update') {
-    const dom = <ColorPicker ref={ref} presets={[DEFAULT_PRESETS]} {...fieldProps} className={className} />;
+    const dom = (
+      <ColorPicker
+        ref={ref}
+        presets={[DEFAULT_PRESETS]}
+        {...fieldProps}
+        className={className}
+      />
+    );
     if (renderFormItem) {
       return renderFormItem(text, { mode: type, ...fieldProps }, dom);
     }

diff --git a/packages/field/src/components/ColorPicker/old.tsx b/packages/field/src/components/ColorPicker/old.tsx
@@ -17,7 +17,7 @@ export const DEFAULT_COLORS = [
   '#667796', // 8 - 黛蓝色
   '#F6BD16', // 9 - 黄色
 ];
-export  const ColorPicker = React.forwardRef(
+export const ColorPicker = React.forwardRef(
   (
     {
       mode,
@@ -118,4 +118,4 @@ export  const ColorPicker = React.forwardRef(
       </Popover>
     );
   },
-);
+);
diff --git a/packages/field/src/components/Radio/index.tsx b/packages/field/src/components/Radio/index.tsx
@@ -108,7 +108,11 @@ const FieldRadio: ProFieldFC<GroupProps> = (
     );
     if (renderFormItem) {
       return (
-        renderFormItem(rest.text, { mode, ...rest.fieldProps }, dom) ?? null
+        renderFormItem(
+          rest.text,
+          { mode, ...rest.fieldProps, options, loading },
+          dom,
+        ) ?? null
       );
     }
     return dom;

diff --git a/packages/field/src/components/Segmented/index.tsx b/packages/field/src/components/Segmented/index.tsx
@@ -72,7 +72,11 @@ const FieldSegmented: ProFieldFC<
     );
 
     if (renderFormItem) {
-      return renderFormItem(rest.text, { mode, ...fieldProps, options }, dom);
+      return renderFormItem(
+        rest.text,
+        { mode, ...fieldProps, options, loading },
+        dom,
+      );
     }
     return dom;
   }

diff --git a/packages/field/src/components/Select/LightSelect/index.tsx b/packages/field/src/components/Select/LightSelect/index.tsx
@@ -162,7 +162,7 @@ const LightSelect: React.ForwardRefRenderFunction<
                 <div style={{ margin: '4px 8px' }}>
                   <Input
                     value={keyword}
-                    allowClear={allowClear}
+                    allowClear={!!allowClear}
                     onChange={(e) => {
                       setKeyword(e.target.value);
                       onSearch?.(e.target.value);
@@ -220,7 +220,7 @@ const LightSelect: React.ForwardRefRenderFunction<
         placeholder={placeholder}
         disabled={disabled}
         bordered={bordered}
-        allowClear={allowClear}
+        allowClear={!!allowClear}
         value={filterValue || value?.label || value}
         onClear={() => {
           onChange?.(undefined, undefined as any);

diff --git a/packages/field/src/components/Select/index.tsx b/packages/field/src/components/Select/index.tsx
@@ -638,7 +638,11 @@ const FieldSelect: ProFieldFC<
     const dom = renderDom();
     if (renderFormItem) {
       return (
-        renderFormItem(rest.text, { mode, ...fieldProps, options }, dom) ?? null
+        renderFormItem(
+          rest.text,
+          { mode, ...fieldProps, options, loading },
+          dom,
+        ) ?? null
       );
     }
     return dom;

diff --git a/packages/field/src/components/TreeSelect/index.tsx b/packages/field/src/components/TreeSelect/index.tsx
@@ -211,8 +211,11 @@ const FieldTreeSelect: ProFieldFC<GroupProps> = (
 
     if (renderFormItem) {
       dom =
-        renderFormItem(rest.text, { mode, ...(fieldProps as any) }, dom) ??
-        null;
+        renderFormItem(
+          rest.text,
+          { mode, ...(fieldProps as any), options, loading },
+          dom,
+        ) ?? null;
     }
 
     if (light) {

diff --git a/tests/form/base.test.tsx b/tests/form/base.test.tsx
@@ -860,8 +860,9 @@ describe('ProForm', () => {
                 width="md"
                 name="useMode"
                 label={
-                  <span id="label_text">{`与《${values?.name || ''}》 与 《${values?.name2?.text || ''
-                    }》合同约定生效方式`}</span>
+                  <span id="label_text">{`与《${values?.name || ''}》 与 《${
+                    values?.name2?.text || ''
+                  }》合同约定生效方式`}</span>
                 }
               />
             );
@@ -1461,9 +1462,9 @@ describe('ProForm', () => {
     act(() => {
       fireEvent.mouseDown(
         wrapper.baseElement.querySelectorAll('.ant-select-selector')[
-        wrapper.baseElement.querySelectorAll<HTMLElement>(
-          'span.ant-select-clear',
-        ).length - 1
+          wrapper.baseElement.querySelectorAll<HTMLElement>(
+            'span.ant-select-clear',
+          ).length - 1
         ],
       );
     });
@@ -3116,9 +3117,9 @@ describe('ProForm', () => {
         wrapper.baseElement.querySelectorAll<HTMLElement>(
           'span.ant-select-clear',
         )[
-        wrapper.baseElement.querySelectorAll<HTMLElement>(
-          'span.ant-select-clear',
-        ).length - 1
+          wrapper.baseElement.querySelectorAll<HTMLElement>(
+            'span.ant-select-clear',
+          ).length - 1
         ],
       );
     });