fix(form): reduce render function

close #5303 (comment)
ant-design · May 31, 2022 · 119df5f · 119df5f
1 parent 1ac52fb
commit 119df5f
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 66 deletions.
diff --git a/packages/field/src/FieldHOC/index.tsx b/packages/field/src/FieldHOC/index.tsx
@@ -1,47 +1,50 @@
 import React, { useCallback, useRef, useState } from 'react';
 import type { ProFieldLightProps } from '../index';
 
-function fieldHOC<T extends ProFieldLightProps>(
-  FieldComponent: React.ForwardRefExoticComponent<T>,
+function FieldHOC<T extends ProFieldLightProps>(
+  props: T & {
+    children: React.ReactNode;
+  },
 ) {
-  function Wrap(props: T, ref: React.ForwardedRef<any>) {
-    const [labelTrigger, setLabelTrigger] = useState(false);
+  const [labelTrigger, setLabelTrigger] = useState(false);
 
-    const lightLabel = useRef<{
-      labelRef: React.RefObject<HTMLElement>;
-      clearRef: React.RefObject<HTMLElement>;
-    }>(null);
+  const lightLabel = useRef<{
+    labelRef: React.RefObject<HTMLElement>;
+    clearRef: React.RefObject<HTMLElement>;
+  }>(null);
 
-    // 是label且不是label里面的clear图标触发事件
-    const isTriggeredByLabel = useCallback(
-      (e: React.MouseEvent) => {
-        // 两条语句结果分别命名，可读性好点
-        const isLabelMouseDown = lightLabel.current?.labelRef?.current?.contains(
-          e.target as HTMLElement,
-        );
-        const isClearMouseDown = lightLabel.current?.clearRef?.current?.contains(
-          e.target as HTMLElement,
-        );
-        return isLabelMouseDown && !isClearMouseDown;
-      },
-      [lightLabel],
-    );
+  // 是label且不是label里面的clear图标触发事件
+  const isTriggeredByLabel = useCallback(
+    (e: React.MouseEvent) => {
+      // 两条语句结果分别命名，可读性好点
+      const isLabelMouseDown = lightLabel.current?.labelRef?.current?.contains(
+        e.target as HTMLElement,
+      );
+      const isClearMouseDown = lightLabel.current?.clearRef?.current?.contains(
+        e.target as HTMLElement,
+      );
+      return isLabelMouseDown && !isClearMouseDown;
+    },
+    [lightLabel],
+  );
 
-    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      if (isTriggeredByLabel(e)) {
-        setLabelTrigger(true);
-      }
-    };
-    const handleMouseUp = () => {
-      setLabelTrigger(false);
-    };
-    return (
-      <div onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}>
-        <FieldComponent {...props} labelTrigger={labelTrigger} lightLabel={lightLabel} ref={ref} />
-      </div>
-    );
-  }
-  return React.forwardRef(Wrap);
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (isTriggeredByLabel(e)) {
+      setLabelTrigger(true);
+    }
+  };
+  const handleMouseUp = () => {
+    setLabelTrigger(false);
+  };
+
+  return (
+    <div onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}>
+      {React.cloneElement(props.children as JSX.Element, {
+        labelTrigger,
+        lightLabel,
+      })}
+    </div>
+  );
 }
 
-export default fieldHOC;
+export default FieldHOC;
diff --git a/packages/field/src/index.tsx b/packages/field/src/index.tsx
@@ -43,12 +43,10 @@ import FieldText from './components/Text';
 import FieldTextArea from './components/TextArea';
 import FieldTimePicker, { FieldTimeRangePicker } from './components/TimePicker';
 import FieldTreeSelect from './components/TreeSelect';
-import fieldHOC from './FieldHOC';
+import FieldHOC from './FieldHOC';
 
 const REQUEST_VALUE_TYPE = ['select', 'radio', 'radioButton', 'checkbook'];
 
-const FieldSelectHOC = fieldHOC(FieldSelect);
-
 export type ProFieldMoneyProps = FieldMoneyProps;
 
 export type ProFieldEmptyText = string | false;
@@ -226,43 +224,47 @@ const defaultRenderText = (
 
   /** 如果是日期的值 */
   if (valueType === 'date') {
-    const FieldDatePickerHOC = fieldHOC(FieldDatePicker);
-    return <FieldDatePickerHOC text={dataValue as string} format="YYYY-MM-DD" {...props} />;
+    return (
+      <FieldHOC>
+        <FieldDatePicker text={dataValue as string} format="YYYY-MM-DD" {...props} />
+      </FieldHOC>
+    );
   }
 
   /** 如果是周的值 */
   if (valueType === 'dateWeek') {
-    const FieldDatePickerHOC = fieldHOC(FieldDatePicker);
     return (
-      <FieldDatePickerHOC text={dataValue as string} format="YYYY-wo" picker="week" {...props} />
+      <FieldHOC>
+        <FieldDatePicker text={dataValue as string} format="YYYY-wo" picker="week" {...props} />
+      </FieldHOC>
     );
   }
 
   /** 如果是月的值 */
   if (valueType === 'dateMonth') {
-    const FieldDatePickerHOC = fieldHOC(FieldDatePicker);
     return (
-      <FieldDatePickerHOC text={dataValue as string} format="YYYY-MM" picker="month" {...props} />
+      <FieldHOC>
+        <FieldDatePicker text={dataValue as string} format="YYYY-MM" picker="month" {...props} />
+      </FieldHOC>
     );
   }
 
   /** 如果是季度的值 */
   if (valueType === 'dateQuarter') {
-    const FieldDatePickerHOC = fieldHOC(FieldDatePicker);
     return (
-      <FieldDatePickerHOC
-        text={dataValue as string}
-        format="YYYY-\QQ"
-        picker="quarter"
-        {...props}
-      />
+      <FieldHOC>
+        <FieldDatePicker text={dataValue as string} format="YYYY-\QQ" picker="quarter" {...props} />
+      </FieldHOC>
     );
   }
 
   /** 如果是年的值 */
   if (valueType === 'dateYear') {
-    const FieldDatePickerHOC = fieldHOC(FieldDatePicker);
-    return <FieldDatePickerHOC text={dataValue as string} format="YYYY" picker="year" {...props} />;
+    return (
+      <FieldHOC>
+        <FieldDatePicker text={dataValue as string} format="YYYY" picker="year" {...props} />
+      </FieldHOC>
+    );
   }
 
   /** 如果是日期范围的值 */
@@ -272,14 +274,15 @@ const defaultRenderText = (
 
   /** 如果是日期加时间类型的值 */
   if (valueType === 'dateTime') {
-    const FieldDatePickerHOC = fieldHOC(FieldDatePicker);
     return (
-      <FieldDatePickerHOC
-        text={dataValue as string}
-        format="YYYY-MM-DD HH:mm:ss"
-        showTime
-        {...props}
-      />
+      <FieldHOC>
+        <FieldDatePicker
+          text={dataValue as string}
+          format="YYYY-MM-DD HH:mm:ss"
+          showTime
+          {...props}
+        />
+      </FieldHOC>
     );
   }
 
@@ -298,8 +301,11 @@ const defaultRenderText = (
 
   /** 如果是时间类型的值 */
   if (valueType === 'time') {
-    const FieldDatePickerHOC = fieldHOC(FieldTimePicker);
-    return <FieldDatePickerHOC text={dataValue as string} format="HH:mm:ss" {...props} />;
+    return (
+      <FieldHOC>
+        <FieldTimePicker text={dataValue as string} format="HH:mm:ss" {...props} />
+      </FieldHOC>
+    );
   }
 
   /** 如果是时间类型的值 */
@@ -356,7 +362,11 @@ const defaultRenderText = (
   }
 
   if (valueType === 'select' || (valueType === 'text' && (props.valueEnum || props.request))) {
-    return <FieldSelectHOC text={dataValue as string} {...props} />;
+    return (
+      <FieldHOC>
+        <FieldSelect text={dataValue as string} {...props} />
+      </FieldHOC>
+    );
   }
 
   if (valueType === 'checkbox') {