fix(descriptions): fix ProTable 和 ProDescriptions render 行为不一样的问题

close #7554
ant-design · Nov 5, 2023 · 227d302 · 227d302
1 parent ebd1898
commit 227d302
Show file tree

Hide file tree

Showing 10 changed files with 221 additions and 146 deletions.
diff --git a/packages/descriptions/src/index.tsx b/packages/descriptions/src/index.tsx
@@ -190,11 +190,12 @@ export const FieldRender: React.FC<
     proFieldProps: {
       emptyText: props.emptyText,
       render: render
-        ? () =>
-            render?.(text, entity, index, action, {
+        ? (finText: string) => {
+            return render?.(finText, entity, index, action, {
               ...props,
               type: 'descriptions',
-            })
+            });
+          }
         : undefined,
     },
     ignoreFormItem: true,
@@ -239,26 +240,7 @@ export const FieldRender: React.FC<
         isEditable: true,
       },
     );
-    const dom = renderFormItem
-      ? renderFormItem?.(
-          {
-            ...props,
-            type: 'descriptions',
-          },
-          {
-            isEditable: true,
-            recordKey: dataIndex,
-            record: form.getFieldValue(
-              [dataIndex].flat(1) as (string | number)[],
-            ),
-            defaultRender: () => (
-              <ProFormField {...fieldConfig} fieldProps={fieldProps} />
-            ),
-            type: 'descriptions',
-          },
-          form as FormInstance<any>,
-        )
-      : undefined;
+
     return (
       <div
         style={{ display: 'flex', gap: token.marginXS, alignItems: 'baseline' }}
@@ -272,14 +254,38 @@ export const FieldRender: React.FC<
           }}
           initialValue={text || formItemProps?.initialValue}
         >
-          {dom || (
-            <ProFormField
-              {...fieldConfig}
-              // @ts-ignore
-              proFieldProps={{ ...fieldConfig.proFieldProps }}
-              fieldProps={fieldProps}
-            />
-          )}
+          <ProFormField
+            {...fieldConfig}
+            // @ts-ignore
+            proFieldProps={{ ...fieldConfig.proFieldProps }}
+            renderFormItem={
+              renderFormItem
+                ? () =>
+                    renderFormItem?.(
+                      {
+                        ...props,
+                        type: 'descriptions',
+                      },
+                      {
+                        isEditable: true,
+                        recordKey: dataIndex,
+                        record: form.getFieldValue(
+                          [dataIndex].flat(1) as (string | number)[],
+                        ),
+                        defaultRender: () => (
+                          <ProFormField
+                            {...fieldConfig}
+                            fieldProps={fieldProps}
+                          />
+                        ),
+                        type: 'descriptions',
+                      },
+                      form as FormInstance<any>,
+                    )
+                : undefined
+            }
+            fieldProps={fieldProps}
+          />
         </InlineErrorFormItem>
         <div
           style={{
@@ -346,6 +352,7 @@ const schemaToDescriptionsItem = (
       } = item as ProDescriptionsItemProps;
 
       const defaultData = getDataFromConfig(item, entity) ?? restItem.children;
+
       const text = renderText
         ? renderText(defaultData, entity, index, action)
         : defaultData;

diff --git a/packages/field/src/components/Cascader/index.tsx b/packages/field/src/components/Cascader/index.tsx
@@ -1,6 +1,10 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { useIntl } from '@ant-design/pro-provider';
-import { FieldLabel } from '@ant-design/pro-utils';
+import {
+  FieldLabel,
+  objectToMap,
+  proFieldParsingText,
+} from '@ant-design/pro-utils';
 import type { RadioGroupProps } from 'antd';
 import { Cascader, ConfigProvider } from 'antd';
 import classNames from 'classnames';
@@ -13,7 +17,7 @@ import React, {
 } from 'react';
 import type { ProFieldFC } from '../../index';
 import type { FieldSelectProps } from '../Select';
-import { ObjToMap, proFieldParsingText, useFieldFetchData } from '../Select';
+import { useFieldFetchData } from '../Select';
 
 // 兼容代码-----------
 import 'antd/lib/cascader/style';
@@ -89,7 +93,7 @@ const FieldCascader: ProFieldFC<GroupProps> = (
       <>
         {proFieldParsingText(
           rest.text,
-          ObjToMap(rest.valueEnum || optionsValueEnum),
+          objectToMap(rest.valueEnum || optionsValueEnum),
         )}
       </>
     );

diff --git a/packages/field/src/components/Checkbox/index.tsx b/packages/field/src/components/Checkbox/index.tsx
@@ -1,11 +1,15 @@
-import { useStyle } from '@ant-design/pro-utils';
+import {
+  objectToMap,
+  proFieldParsingText,
+  useStyle,
+} from '@ant-design/pro-utils';
 import { Checkbox, ConfigProvider, Form, Spin } from 'antd';
 import type { CheckboxGroupProps } from 'antd/lib/checkbox';
 import classNames from 'classnames';
 import React, { useContext, useImperativeHandle, useRef } from 'react';
 import type { ProFieldFC } from '../../index';
 import type { FieldSelectProps } from '../Select';
-import { ObjToMap, proFieldParsingText, useFieldFetchData } from '../Select';
+import { useFieldFetchData } from '../Select';
 export type GroupProps = {
   layout?: 'horizontal' | 'vertical';
   options?: CheckboxGroupProps['options'];
@@ -88,7 +92,7 @@ const FieldCheckbox: ProFieldFC<GroupProps> = (
 
     const dom = proFieldParsingText(
       rest.text,
-      ObjToMap(rest.valueEnum || optionsValueEnum),
+      objectToMap(rest.valueEnum || optionsValueEnum),
     );
 
     if (render) {

diff --git a/packages/field/src/components/Radio/index.tsx b/packages/field/src/components/Radio/index.tsx
@@ -1,11 +1,15 @@
-import { useStyle } from '@ant-design/pro-utils';
+import {
+  objectToMap,
+  proFieldParsingText,
+  useStyle,
+} from '@ant-design/pro-utils';
 import type { RadioGroupProps } from 'antd';
 import { ConfigProvider, Form, Radio, Spin } from 'antd';
 import classNames from 'classnames';
 import React, { useContext, useImperativeHandle, useRef } from 'react';
 import type { ProFieldFC } from '../../index';
 import type { FieldSelectProps } from '../Select';
-import { ObjToMap, proFieldParsingText, useFieldFetchData } from '../Select';
+import { useFieldFetchData } from '../Select';
 
 // 兼容代码-----------
 import 'antd/lib/radio/style';
@@ -77,7 +81,7 @@ const FieldRadio: ProFieldFC<GroupProps> = (
       <>
         {proFieldParsingText(
           rest.text,
-          ObjToMap(rest.valueEnum || optionsValueEnum),
+          objectToMap(rest.valueEnum || optionsValueEnum),
         )}
       </>
     );

diff --git a/packages/field/src/components/Segmented/index.tsx b/packages/field/src/components/Segmented/index.tsx
@@ -3,8 +3,9 @@ import omit from 'omit.js';
 import React, { useImperativeHandle, useRef } from 'react';
 import type { ProFieldFC } from '../../index';
 import type { FieldSelectProps } from '../Select';
-import { ObjToMap, proFieldParsingText, useFieldFetchData } from '../Select';
+import { useFieldFetchData } from '../Select';
 
+import { objectToMap, proFieldParsingText } from '@ant-design/pro-utils';
 import 'antd/lib/segmented/style';
 import 'antd/lib/spin/style';
 
@@ -50,7 +51,7 @@ const FieldSegmented: ProFieldFC<
       <>
         {proFieldParsingText(
           rest.text,
-          ObjToMap(rest.valueEnum || optionsValueEnum),
+          objectToMap(rest.valueEnum || optionsValueEnum),
         )}
       </>
     );

diff --git a/packages/field/src/components/Select/index.tsx b/packages/field/src/components/Select/index.tsx
@@ -1,9 +1,10 @@
 import { useIntl } from '@ant-design/pro-provider';
 import {
   nanoid,
+  objectToMap,
+  proFieldParsingText,
   ProFieldRequestData,
   ProFieldValueEnumType,
-  ProSchemaValueEnumMap,
   ProSchemaValueEnumObj,
   RequestOptionsType,
   useDebounceValue,
@@ -14,7 +15,7 @@ import {
   useStyle,
 } from '@ant-design/pro-utils';
 import type { SelectProps } from 'antd';
-import { ConfigProvider, Space, Spin } from 'antd';
+import { ConfigProvider, Spin } from 'antd';
 import type { ReactNode } from 'react';
 import React, {
   useContext,
@@ -26,8 +27,6 @@ import React, {
 } from 'react';
 import useSWR from 'swr';
 import type { ProFieldFC, ProFieldLightProps } from '../../index';
-import type { ProFieldStatusType } from '../Status';
-import TableStatus, { ProFieldBadgeColor } from '../Status';
 import LightSelect from './LightSelect';
 import SearchSelect from './SearchSelect';
 
@@ -59,80 +58,6 @@ export type FieldSelectProps<FieldProps = any> = {
   defaultKeyWords?: string;
 } & ProFieldLightProps;
 
-export const ObjToMap = (
-  value: ProFieldValueEnumType | undefined,
-): ProSchemaValueEnumMap => {
-  if (getType(value) === 'map') {
-    return value as ProSchemaValueEnumMap;
-  }
-  return new Map(Object.entries(value || {}));
-};
-
-/**
- * 转化 text 和 valueEnum 通过 type 来添加 Status
- *
- * @param text
- * @param valueEnum
- * @param pure 纯净模式，不增加 status
- */
-export const proFieldParsingText = (
-  text: string | number | (string | number)[],
-  valueEnumParams: ProFieldValueEnumType,
-  key?: number | string,
-): React.ReactNode => {
-  if (Array.isArray(text)) {
-    return (
-      <Space key={key} split="," size={2} wrap>
-        {text.map((value, index) =>
-          // @ts-ignore
-          proFieldParsingText(value, valueEnumParams, index),
-        )}
-      </Space>
-    );
-  }
-
-  const valueEnum = ObjToMap(valueEnumParams);
-
-  if (!valueEnum.has(text) && !valueEnum.has(`${text}`)) {
-    // @ts-ignore
-    return text?.label || text;
-  }
-
-  const domText = (valueEnum.get(text) || valueEnum.get(`${text}`)) as {
-    text: ReactNode;
-    status: ProFieldStatusType;
-    color?: string;
-  };
-
-  if (!domText) {
-    // @ts-ignore
-    return <React.Fragment key={key}>{text?.label || text}</React.Fragment>;
-  }
-
-  const { status, color } = domText;
-
-  const Status = TableStatus[status || 'Init'];
-  // 如果类型存在优先使用类型
-  if (Status) {
-    return <Status key={key}>{domText.text}</Status>;
-  }
-
-  // 如果不存在使用颜色
-  if (color) {
-    return (
-      <ProFieldBadgeColor key={key} color={color}>
-        {domText.text}
-      </ProFieldBadgeColor>
-    );
-  }
-  // 什么都没有使用 text
-  return (
-    <React.Fragment key={key}>
-      {domText.text || (domText as any as React.ReactNode)}
-    </React.Fragment>
-  );
-};
-
 const Highlight: React.FC<{
   label: string;
   words: string[];
@@ -202,23 +127,6 @@ const Highlight: React.FC<{
   );
 };
 
-/**
- * 获取类型的 type
- *
- * @param obj
- */
-function getType(obj: any) {
-  // @ts-ignore
-  const type = Object.prototype.toString
-    .call(obj)
-    .match(/^\[object (.*)\]$/)[1]
-    .toLowerCase();
-  if (type === 'string' && typeof obj === 'object') return 'object'; // Let "new String('')" return 'object'
-  if (obj === null) return 'null'; // PhantomJS has type "DOMWindow" for null
-  if (obj === undefined) return 'undefined'; // PhantomJS has type "DOMWindow" for undefined
-  return type;
-}
-
 /**
  * 递归筛选 item
  *
@@ -269,7 +177,7 @@ export const proFieldParsingValueEnumToArray = (
       disabled?: boolean;
     }
   >[] = [];
-  const valueEnum = ObjToMap(valueEnumParams);
+  const valueEnum = objectToMap(valueEnumParams);
 
   valueEnum.forEach((_, key) => {
     const value = (valueEnum.get(key) || valueEnum.get(`${key}`)) as {
@@ -325,7 +233,7 @@ export const useFieldFetchData = (
 
   const getOptionsFormValueEnum = useRefFunction(
     (coverValueEnum: ProFieldValueEnumType) => {
-      return proFieldParsingValueEnumToArray(ObjToMap(coverValueEnum)).map(
+      return proFieldParsingValueEnumToArray(objectToMap(coverValueEnum)).map(
         ({ value, text, ...rest }) => ({
           label: text,
           value,
@@ -560,15 +468,15 @@ const FieldSelect: ProFieldFC<
       <>
         {proFieldParsingText(
           rest.text,
-          ObjToMap(
+          objectToMap(
             valueEnum || optionsValueEnum,
           ) as unknown as ProSchemaValueEnumObj,
         )}
       </>
     );
 
     if (render) {
-      return render(rest.text, { mode, ...fieldProps }, dom) ?? null;
+      return render(dom, { mode, ...fieldProps }, dom) ?? null;
     }
     return dom;
   }