fix(table): less render function

ant-design · Sep 18, 2023 · b3ef405 · b3ef405
1 parent 7730da4
commit b3ef405
Show file tree

Hide file tree

Showing 11 changed files with 212 additions and 199 deletions.
diff --git a/packages/field/src/components/Select/index.tsx b/packages/field/src/components/Select/index.tsx
@@ -1,23 +1,22 @@
 import { useIntl } from '@ant-design/pro-provider';
-import type {
+import {
+  nanoid,
   ProFieldRequestData,
   ProFieldValueEnumType,
   ProSchemaValueEnumMap,
   ProSchemaValueEnumObj,
   RequestOptionsType,
-} from '@ant-design/pro-utils';
-import {
-  nanoid,
   useDebounceValue,
   useDeepCompareEffect,
+  useDeepCompareMemo,
   useMountMergeState,
+  useRefFunction,
   useStyle,
 } from '@ant-design/pro-utils';
 import type { SelectProps } from 'antd';
 import { ConfigProvider, Space, Spin } from 'antd';
 import type { ReactNode } from 'react';
 import React, {
-  useCallback,
   useContext,
   useEffect,
   useImperativeHandle,
@@ -324,7 +323,7 @@ export const useFieldFetchData = (
 
   const proFieldKeyRef = useRef(cacheKey);
 
-  const getOptionsFormValueEnum = useCallback(
+  const getOptionsFormValueEnum = useRefFunction(
     (coverValueEnum: ProFieldValueEnumType) => {
       return proFieldParsingValueEnumToArray(ObjToMap(coverValueEnum)).map(
         ({ value, text, ...rest }) => ({
@@ -335,10 +334,9 @@ export const useFieldFetchData = (
         }),
       );
     },
-    [],
   );
 
-  const defaultOptions = useMemo(() => {
+  const defaultOptions = useDeepCompareMemo(() => {
     if (!fieldProps) return undefined;
     const data = fieldProps?.options || fieldProps?.treeData;
     if (!data) return undefined;

diff --git a/packages/field/src/index.tsx b/packages/field/src/index.tsx
@@ -4,20 +4,18 @@ import type {
   ProRenderFieldPropsType,
 } from '@ant-design/pro-provider';
 import ProConfigContext from '@ant-design/pro-provider';
-import type {
+import {
+  omitUndefined,
+  pickProProps,
   ProFieldRequestData,
   ProFieldTextType,
   ProFieldValueObjectType,
   ProFieldValueType,
-} from '@ant-design/pro-utils';
-import {
-  omitUndefined,
-  pickProProps,
+  useDeepCompareMemo,
   useRefFunction,
 } from '@ant-design/pro-utils';
 import { Avatar } from 'antd';
-import { noteOnce } from 'rc-util/lib/warning';
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import FieldCascader from './components/Cascader';
 import FieldCheckbox from './components/Checkbox';
 import FieldCode from './components/Code';
@@ -240,28 +238,6 @@ const defaultRenderText = (
     }
   }
 
-  const needValueEnum = REQUEST_VALUE_TYPE.includes(valueType as string);
-  const hasValueEnum = !!(
-    props.valueEnum ||
-    props.request ||
-    props.options ||
-    props.fieldProps?.options
-  );
-
-  noteOnce(
-    !needValueEnum || hasValueEnum,
-    `如果设置了 valueType 为 ${REQUEST_VALUE_TYPE.join(
-      ',',
-    )}中任意一个，则需要配置options，request, valueEnum 其中之一，否则无法生成选项。`,
-  );
-
-  noteOnce(
-    !needValueEnum || hasValueEnum,
-    `If you set valueType to any of ${REQUEST_VALUE_TYPE.join(
-      ',',
-    )}, you need to configure options, request or valueEnum.`,
-  );
-
   /** 如果是金额的值 */
   if (valueType === 'money') {
     return <FieldMoney {...props} text={dataValue as number} />;
@@ -645,7 +621,7 @@ const ProFieldComponent: React.ForwardRefRenderFunction<
     onChange?.(...restParams);
   });
 
-  const fieldProps: any = useMemo(() => {
+  const fieldProps: any = useDeepCompareMemo(() => {
     return (
       (value !== undefined || restFieldProps) && {
         value,
@@ -657,7 +633,7 @@ const ProFieldComponent: React.ForwardRefRenderFunction<
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, restFieldProps, onChangeCallBack]);
 
-  const renderedDom = useMemo(() => {
+  const renderedDom = useDeepCompareMemo(() => {
     return defaultRenderText(
       mode === 'edit'
         ? fieldProps?.value ?? text ?? ''
@@ -706,6 +682,7 @@ const ProFieldComponent: React.ForwardRefRenderFunction<
     text,
     valueType,
   ]);
+
   return <React.Fragment>{renderedDom}</React.Fragment>;
 };
 

diff --git a/packages/form/src/BaseForm/createField.tsx b/packages/form/src/BaseForm/createField.tsx
@@ -1,15 +1,16 @@
 import {
-  isDeepEqualReact,
   omitUndefined,
   pickProFormItemProps,
   stringify,
+  useDeepCompareMemo,
   usePrevious,
+  useRefFunction,
 } from '@ant-design/pro-utils';
 import type { FormItemProps } from 'antd';
 import classnames from 'classnames';
 import { FieldContext as RcFieldContext } from 'rc-field-form';
 import { noteOnce } from 'rc-util/lib/warning';
-import React, { useCallback, useContext, useMemo, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { ProFormDependency, ProFormItem } from '../components';
 import FieldContext from '../FieldContext';
 import { useGridHelpers } from '../helpers';
@@ -118,7 +119,7 @@ function createField<P extends ProFormFieldItemProps = any>(
     /**
      * dependenciesValues change to trigger re-execute of getFieldProps and getFormItemProps
      */
-    const changedProps = useMemo(
+    const changedProps = useDeepCompareMemo(
       () => {
         return {
           formItemProps: getFormItemProps?.(),
@@ -130,7 +131,7 @@ function createField<P extends ProFormFieldItemProps = any>(
       [getFieldProps, getFormItemProps, rest.dependenciesValues, onlyChange],
     );
 
-    const fieldProps: Record<string, any> = useMemo(() => {
+    const fieldProps: Record<string, any> = useDeepCompareMemo(() => {
       const newFieldProps: any = {
         ...(ignoreFormItem ? omitUndefined({ value: rest.value }) : {}),
         placeholder,
@@ -157,7 +158,7 @@ function createField<P extends ProFormFieldItemProps = any>(
     // restFormItemProps is user props pass to Form.Item
     const restFormItemProps = pickProFormItemProps(rest);
 
-    const formItemProps: FormItemProps = useMemo(
+    const formItemProps: FormItemProps = useDeepCompareMemo(
       () => ({
         ...contextValue.formItemProps,
         ...restFormItemProps,
@@ -174,7 +175,7 @@ function createField<P extends ProFormFieldItemProps = any>(
       ],
     );
 
-    const otherProps = useMemo(
+    const otherProps = useDeepCompareMemo(
       () => ({
         messageVariables,
         ...defaultFormItemProps,
@@ -190,7 +191,8 @@ function createField<P extends ProFormFieldItemProps = any>(
     );
 
     const { prefixName } = useContext(RcFieldContext);
-    const proFieldKey = useMemo(() => {
+
+    const proFieldKey = useDeepCompareMemo(() => {
       let name = otherProps?.name;
       if (Array.isArray(name)) name = name.join('_');
       if (Array.isArray(prefixName) && name)
@@ -203,19 +205,16 @@ function createField<P extends ProFormFieldItemProps = any>(
 
     const prefRest = usePrevious(rest);
 
-    const onChange = useCallback(
-      (...restParams: any[]) => {
-        if (getFormItemProps || getFieldProps) {
-          forceUpdateByOnChange([]);
-        } else if (rest.renderFormItem) {
-          forceUpdate([]);
-        }
-        fieldProps?.onChange?.(...restParams);
-      },
-      [getFieldProps, getFormItemProps, fieldProps, rest.renderFormItem],
-    );
+    const onChange = useRefFunction((...restParams: any[]) => {
+      if (getFormItemProps || getFieldProps) {
+        forceUpdateByOnChange([]);
+      } else if (rest.renderFormItem) {
+        forceUpdate([]);
+      }
+      fieldProps?.onChange?.(...restParams);
+    });
 
-    const style = useMemo(() => {
+    const style = useDeepCompareMemo(() => {
       const newStyle = {
         width:
           width && !WIDTH_SIZE_ENUM[width]
@@ -232,7 +231,7 @@ function createField<P extends ProFormFieldItemProps = any>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stringify(fieldProps?.style), contextValue.grid, isIgnoreWidth, width]);
 
-    const className = useMemo(() => {
+    const className = useDeepCompareMemo(() => {
       const isSizeEnum = width && WIDTH_SIZE_ENUM[width];
       return (
         classnames(fieldProps?.className, {
@@ -242,7 +241,7 @@ function createField<P extends ProFormFieldItemProps = any>(
       );
     }, [width, fieldProps?.className, isIgnoreWidth]);
 
-    const fieldProFieldProps = useMemo(() => {
+    const fieldProFieldProps = useDeepCompareMemo(() => {
       return omitUndefined({
         ...contextValue.proFieldProps,
         mode: rest?.mode,
@@ -262,7 +261,7 @@ function createField<P extends ProFormFieldItemProps = any>(
       proFieldProps,
     ]);
 
-    const fieldFieldProps = useMemo(() => {
+    const fieldFieldProps = useDeepCompareMemo(() => {
       return {
         onChange,
         allowClear,
@@ -271,7 +270,8 @@ function createField<P extends ProFormFieldItemProps = any>(
         className,
       };
     }, [allowClear, className, onChange, fieldProps, style]);
-    const field = useMemo(() => {
+
+    const field = useDeepCompareMemo(() => {
       return (
         <Field
           // @ts-ignore
@@ -285,22 +285,10 @@ function createField<P extends ProFormFieldItemProps = any>(
         />
       );
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-      fieldProFieldProps,
-      fieldFieldProps,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      isDeepEqualReact(prefRest, rest, [
-        'onChange',
-        'onBlur',
-        'onFocus',
-        'record',
-      ])
-        ? undefined
-        : {},
-    ]);
+    }, [fieldProFieldProps, fieldFieldProps, rest]);
 
     // 使用useMemo包裹避免不必要的re-render
-    const formItem = useMemo(() => {
+    const formItem = useDeepCompareMemo(() => {
       return (
         <ProFormItem
           // 全局的提供一个 tip 功能，可以减少代码量

diff --git a/packages/form/src/components/FormItem/index.tsx b/packages/form/src/components/FormItem/index.tsx
@@ -1,16 +1,16 @@
-import type {
+import {
+  isDropdownValueType,
+  omitUndefined,
   ProFieldValueType,
   SearchConvertKeyFn,
   SearchTransformKeyFn,
-} from '@ant-design/pro-utils';
-import {
-  isDropdownValueType,
-  omitUndefined,
+  useDeepCompareMemo,
   useRefFunction,
 } from '@ant-design/pro-utils';
 import type { FormItemProps } from 'antd';
 import { ConfigProvider, Form } from 'antd';
 import type { NamePath } from 'antd/lib/form/interface';
+import omit from 'omit.js';
 import React, { useContext, useEffect, useMemo } from 'react';
 import type { LightWrapperProps } from '../../BaseForm';
 import { LightWrapper } from '../../BaseForm';
@@ -42,48 +42,67 @@ const WithValueFomFiledProps: React.FC<
     ...restProps
   } = formFieldProps;
 
+  const isProFormComponent =
+    // @ts-ignore
+    filedChildren?.type?.displayName !== 'ProFormComponent';
+
+  const isValidElementForFiledChildren = !React.isValidElement(filedChildren);
+
   const onChangeMemo = useRefFunction(function (...restParams: any[]): void {
     onChange?.(...restParams);
-    // @ts-ignore
-    if (filedChildren?.type?.displayName !== 'ProFormComponent') return;
-    if (!React.isValidElement(filedChildren)) return undefined;
+    if (isProFormComponent) return;
+    if (isValidElementForFiledChildren) return undefined;
     filedChildren?.props?.onChange?.(...restParams);
+
     (filedChildren?.props as Record<string, any>)?.fieldProps?.onChange?.(
       ...restParams,
     );
   });
 
   const onBlurMemo = useRefFunction(function (...restParams: any[]): void {
-    // @ts-ignore
-    if (filedChildren?.type?.displayName !== 'ProFormComponent') return;
-    if (!React.isValidElement(filedChildren)) return;
+    if (isProFormComponent) return;
+    if (isValidElementForFiledChildren) return;
     onBlur?.(...restParams);
     filedChildren?.props?.onBlur?.(...restParams);
     (filedChildren?.props as Record<string, any>)?.fieldProps?.onBlur?.(
       ...restParams,
     );
   });
 
-  const fieldProps = useMemo(() => {
-    // @ts-ignore
-    if (filedChildren?.type?.displayName !== 'ProFormComponent')
-      return undefined;
-    if (!React.isValidElement(filedChildren)) return undefined;
+  const omitOnBlurAndOnChangeProps = useDeepCompareMemo(
+    () =>
+      omit(
+        // @ts-ignore
+        filedChildren?.props?.fieldProps || {},
+        ['onBlur', 'onChange'],
+      ),
+    [
+      omit(
+        // @ts-ignore
+        filedChildren?.props?.fieldProps || {},
+        ['onBlur', 'onChange'],
+      ),
+    ],
+  );
+  const propsValuePropName = formFieldProps[valuePropName];
 
+  const fieldProps = useMemo(() => {
+    if (isProFormComponent) return undefined;
+    if (isValidElementForFiledChildren) return undefined;
     return omitUndefined({
       id: restProps.id,
       // 优先使用 children.props.fieldProps，
       // 比如 LightFilter 中可能需要通过 fieldProps 覆盖 Form.Item 默认的 onChange
-      [valuePropName]: formFieldProps[valuePropName],
-      ...(filedChildren?.props?.fieldProps || {}),
+      [valuePropName]: propsValuePropName,
+      ...omitOnBlurAndOnChangeProps,
       onBlur: onBlurMemo,
       // 这个 onChange 是 Form.Item 添加上的，
       // 要通过 fieldProps 透传给 ProField 调用
       onChange: onChangeMemo,
     });
   }, [
-    filedChildren,
-    formFieldProps,
+    propsValuePropName,
+    omitOnBlurAndOnChangeProps,
     onBlurMemo,
     onChangeMemo,
     restProps.id,