type: React.forwardRef type optimization (#43610)

* type: React.forwardRef type optimization

* fix

* fix lint

* fix lint

* fix lint

* fix lint

* fix lint

* fix lint

* fix lint

* fix lint

* fix lint

* fix lint

* fix lint

components/cascader/index.tsx

@@ -137,7 +137,7 @@ export interface CascaderRef {
   blur: () => void;
 }
 
-const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<CascaderRef>) => {
+const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref) => {
   const {
     prefixCls: customizePrefixCls,
     size: customizeSize,

components/config-provider/__tests__/popup.test.tsx

@@ -1,4 +1,4 @@
-import type { TriggerProps } from '@rc-component/trigger';
+import type { TriggerProps, TriggerRef } from '@rc-component/trigger';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import React from 'react';
@@ -16,9 +16,9 @@ function triggerProps(): TriggerProps {
 }
 
 jest.mock('@rc-component/trigger', () => {
-  const R = jest.requireActual('react');
+  const R: typeof React = jest.requireActual('react');
   const Trigger = jest.requireActual('@rc-component/trigger').default;
-  return R.forwardRef((props: any, ref: any) => {
+  return R.forwardRef<TriggerRef, TriggerProps>((props, ref) => {
     (global as any).triggerProps = props;
     return <Trigger {...props} ref={ref} />;
   });

components/date-picker/__tests__/type.test.tsx

@@ -1,5 +1,6 @@
 import type { Dayjs } from 'dayjs';
 import * as React from 'react';
+import type { DatePickerProps, RangePickerProps } from '..';
 import DatePicker from '..';
 import type { DatePickRef, RangePickerRef } from '../generatePicker/interface';
 
@@ -18,7 +19,7 @@ describe('DatePicker.typescript', () => {
 
   // https://github.com/ant-design/ant-design/issues/33417
   it('DatePicker ref methods with forwardRef', () => {
-    const MyDatePicker = React.forwardRef((props, ref: DatePickRef<Dayjs>) => (
+    const MyDatePicker = React.forwardRef((props: DatePickerProps, ref: DatePickRef<Dayjs>) => (
       <DatePicker {...props} ref={ref} />
     ));
     const datePicker = (
@@ -45,9 +46,11 @@ describe('DatePicker.typescript', () => {
   });
 
   it('RangePicker ref methods with forwardRef', () => {
-    const MyRangePicker = React.forwardRef((props, ref: RangePickerRef<Dayjs>) => (
+    const MyRangePicker = React.forwardRef(
+      (props: RangePickerProps, ref: RangePickerRef<Dayjs>) => (
         <DatePicker.RangePicker {...props} ref={ref} />
-    ));
+      ),
+    );
     const datePicker = (
       <MyRangePicker
         ref={(picker) => {

components/input-number/__tests__/prefix.test.tsx

@@ -1,11 +1,14 @@
 import React, { forwardRef } from 'react';
+import type { InputNumberProps } from '..';
 import InputNumber from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import { fireEvent, render } from '../../../tests/utils';
 
 describe('prefix', () => {
   focusTest(
-    forwardRef((props, ref) => <InputNumber {...props} prefix="A" ref={ref} />),
+    forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => (
+      <InputNumber {...props} prefix="A" ref={ref} />
+    )),
     { refFocus: true },
   );
   it('should support className when has prefix', () => {

components/slider/__tests__/index.test.tsx

@@ -6,7 +6,7 @@ import rtlTest from '../../../tests/shared/rtlTest';
 import { act, fireEvent, render } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';
 import ConfigProvider from '../../config-provider';
-import type { TooltipProps } from '../../tooltip';
+import type { TooltipProps, TooltipRef } from '../../tooltip';
 import SliderTooltip from '../SliderTooltip';
 
 function tooltipProps(): TooltipProps {
@@ -14,10 +14,10 @@ function tooltipProps(): TooltipProps {
 }
 
 jest.mock('../../tooltip', () => {
-  const ReactReal = jest.requireActual('react');
+  const ReactReal: typeof React = jest.requireActual('react');
   const Tooltip = jest.requireActual('../../tooltip');
   const TooltipComponent = Tooltip.default;
-  return ReactReal.forwardRef((props: TooltipProps, ref: any) => {
+  return ReactReal.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     (global as any).tooltipProps = props;
     return <TooltipComponent {...props} ref={ref} />;
   });

components/upload/UploadList/ListItem.tsx

@@ -44,7 +44,7 @@ export interface ListItemProps {
   progress?: UploadListProgressProps;
 }
 
-const ListItem = React.forwardRef(
+const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(
   (
     {
       prefixCls,
@@ -68,8 +68,8 @@ const ListItem = React.forwardRef(
       onPreview,
       onDownload,
       onClose,
-    }: ListItemProps,
+    },
-    ref: React.Ref<HTMLDivElement>,
+    ref,
   ) => {
     // Status: which will ignore `removed` status
     const { status } = file;
@@ -111,8 +111,7 @@ const ListItem = React.forwardRef(
         ) : (
           iconNode
         );
-        const aClassName = classNames({
+        const aClassName = classNames(`${prefixCls}-list-item-thumbnail`, {
-          [`${prefixCls}-list-item-thumbnail`]: true,
           [`${prefixCls}-list-item-file`]: isImgUrl && !isImgUrl(file),
         });
         icon = (

tests/__mocks__/rc-util/lib/Portal.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
+import type { PortalProps, PortalRef } from 'rc-util/lib/Portal';
 import { TriggerMockContext } from '../../../shared/demoTestContext';
 
 let OriginPortal = jest.requireActual('rc-util/lib/Portal');
 OriginPortal = OriginPortal.default ?? OriginPortal;
-class MockPortal extends React.Component<{ children?: React.ReactNode }> {
+
+interface MockPortalProps {
+  children?: React.ReactNode
+}
+
+class MockPortal extends React.Component<MockPortalProps> {
   container: boolean;
 
   static contextType = TriggerMockContext;
@@ -26,12 +32,12 @@ class MockPortal extends React.Component<{ children?: React.ReactNode }> {
   }
 }
 
-export default React.forwardRef((props: any, ref: any) => {
+const CustomPortal = React.forwardRef<PortalRef, PortalProps | MockPortalProps>((props, ref) => {
   const context = React.useContext(TriggerMockContext);
-
   if (context?.mock === false) {
     return <OriginPortal {...props} ref={ref} />;
   }
-
   return <MockPortal {...props} />;
 });
+
+export default CustomPortal;