feat: Remove findDOMNode from rc-css-motion (#59)

* feat:  Remove findDOMNode from rc-css-motion

* feat: Remove findDOMNode from rc-css-motion

* chore: clean up wrapper

* test: fix test case

* chore: fix lint

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>

Author: Roxannej

package.json

@@ -31,6 +31,7 @@
     "docs:build": "dumi build",
     "docs:deploy": "gh-pages -d .doc",
     "lint": "eslint src/ --ext .tsx,.ts",
+    "lint:tsc": "tsc --noEmit",
     "now-build": "npm run docs:build",
     "prepare": "husky install",
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
@@ -47,8 +48,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.1",
-    "classnames": "^2.2.1",
-    "rc-util": "^5.44.0"
+    "@rc-component/util": "^1.2.0",
+    "classnames": "^2.2.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.1",

src/CSSMotion.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */
+import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
+import { getNodeRef, supportRef } from '@rc-component/util/lib/ref';
 import classNames from 'classnames';
-import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
-import { fillRef, getNodeRef, supportRef } from 'rc-util/lib/ref';
 import * as React from 'react';
 import { useRef } from 'react';
 import { Context } from './context';
-import DomWrapper from './DomWrapper';
 import useStatus from './hooks/useStatus';
 import { isActive } from './hooks/useStepQueue';
 import type {
@@ -91,7 +90,7 @@ export interface CSSMotionProps {
       style?: React.CSSProperties;
       [key: string]: any;
     },
-    ref: (node: any) => void,
+    ref: React.Ref<any>,
   ) => React.ReactElement;
 }
 
@@ -137,22 +136,9 @@ export function genCSSMotion(config: CSSMotionConfig) {
 
     // Ref to the react node, it may be a HTMLElement
     const nodeRef = useRef<any>();
-    // Ref to the dom wrapper in case ref can not pass to HTMLElement
-    const wrapperNodeRef = useRef();
 
     function getDomElement() {
-      try {
-        // Here we're avoiding call for findDOMNode since it's deprecated
-        // in strict mode. We're calling it only when node ref is not
-        // an instance of DOM HTMLElement. Otherwise use
-        // findDOMNode as a final resort
-        return nodeRef.current instanceof HTMLElement
-          ? nodeRef.current
-          : findDOMNode<HTMLElement>(wrapperNodeRef.current);
-      } catch (e) {
-        // Only happen when `motionDeadline` trigger but element removed.
-        return null;
-      }
+      return getDOM(nodeRef.current) as HTMLElement;
     }
 
     const [status, statusStep, statusStyle, mergedVisible] = useStatus(
@@ -170,13 +156,7 @@ export function genCSSMotion(config: CSSMotionConfig) {
     }
 
     // ====================== Refs ======================
-    const setNodeRef = React.useCallback(
-      (node: any) => {
-        nodeRef.current = node;
-        fillRef(ref, node);
-      },
-      [ref],
-    );
+    React.useImperativeHandle(ref, () => getDomElement());
 
     // ===================== Render =====================
     let motionChildren: React.ReactNode;
@@ -188,16 +168,16 @@ export function genCSSMotion(config: CSSMotionConfig) {
     } else if (status === STATUS_NONE) {
       // Stable children
       if (mergedVisible) {
-        motionChildren = children({ ...mergedProps }, setNodeRef);
+        motionChildren = children({ ...mergedProps }, nodeRef);
       } else if (!removeOnLeave && renderedRef.current && leavedClassName) {
         motionChildren = children(
           { ...mergedProps, className: leavedClassName },
-          setNodeRef,
+          nodeRef,
         );
       } else if (forceRender || (!removeOnLeave && !leavedClassName)) {
         motionChildren = children(
           { ...mergedProps, style: { display: 'none' } },
-          setNodeRef,
+          nodeRef,
         );
       } else {
         motionChildren = null;
@@ -227,7 +207,7 @@ export function genCSSMotion(config: CSSMotionConfig) {
           }),
           style: statusStyle,
         },
-        setNodeRef,
+        nodeRef,
       );
     }
 
@@ -239,13 +219,13 @@ export function genCSSMotion(config: CSSMotionConfig) {
         motionChildren = React.cloneElement(
           motionChildren as React.ReactElement,
           {
-            ref: setNodeRef,
+            ref: nodeRef,
           },
         );
       }
     }
 
-    return <DomWrapper ref={wrapperNodeRef}>{motionChildren}</DomWrapper>;
+    return motionChildren as React.ReactElement;
   });
 
   CSSMotion.displayName = 'CSSMotion';

src/CSSMotionList.tsx

@@ -55,7 +55,7 @@ export interface CSSMotionListProps
       index?: number;
       [key: string]: any;
     },
-    ref: (node: any) => void,
+    ref: React.Ref<any>,
   ) => React.ReactElement;
 }
 

src/DomWrapper.tsx

@@ -1,4 +1,4 @@
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
+import canUseDom from '@rc-component/util/lib/Dom/canUseDom';
 import { useEffect, useLayoutEffect } from 'react';
 
 // It's safe to use `useLayoutEffect` but the warning is annoying

src/hooks/useIsomorphicLayoutEffect.ts

@@ -1,4 +1,4 @@
-import raf from 'rc-util/lib/raf';
+import raf from '@rc-component/util/lib/raf';
 import * as React from 'react';
 
 export default (): [

src/hooks/useNextFrame.ts

@@ -1,6 +1,6 @@
-import { useEvent } from 'rc-util';
-import useState from 'rc-util/lib/hooks/useState';
-import useSyncState from 'rc-util/lib/hooks/useSyncState';
+import { useEvent } from '@rc-component/util';
+import useState from '@rc-component/util/lib/hooks/useState';
+import useSyncState from '@rc-component/util/lib/hooks/useSyncState';
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
 import type { CSSMotionProps } from '../CSSMotion';

src/hooks/useStatus.ts

@@ -1,4 +1,4 @@
-import useState from 'rc-util/lib/hooks/useState';
+import useState from '@rc-component/util/lib/hooks/useState';
 import * as React from 'react';
 import type { MotionStatus, StepStatus } from '../interface';
 import {

src/hooks/useStepQueue.ts

@@ -1,5 +1,5 @@
-import canUseDOM from 'rc-util/lib/Dom/canUseDom';
-import { MotionName } from '../CSSMotion';
+import canUseDOM from '@rc-component/util/lib/Dom/canUseDom';
+import type { MotionName } from '../CSSMotion';
 
 // ================= Transition =================
 // Event wrapper. Copy from react source code

src/util/motion.ts

@@ -288,6 +288,9 @@ describe('CSSMotion', () => {
     });
 
     describe('deadline should work', () => {
+      // NOTE: only test for not crash here
+      // Since React 19 not support `findDOMNode` anymore
+      // the func call will not get real DOM node
       function test(name: string, Component: React.ComponentType<any>) {
         it(name, () => {
           const onAppearEnd = jest.fn();
@@ -839,10 +842,11 @@ describe('CSSMotion', () => {
       jest.resetAllMocks();
     });
 
-    it('calls findDOMNode when no refs are passed', () => {
+    it('not crash when no refs are passed', () => {
       const Div = () => <div />;
+      const cssMotionRef = React.createRef();
       render(
-        <CSSMotion motionName="transition" visible>
+        <CSSMotion motionName="transition" visible ref={cssMotionRef}>
           {() => <Div />}
         </CSSMotion>,
       );
@@ -851,7 +855,8 @@ describe('CSSMotion', () => {
         jest.runAllTimers();
       });
 
-      expect(ReactDOM.findDOMNode).toHaveBeenCalled();
+      expect(cssMotionRef.current).toBeFalsy();
+      expect(ReactDOM.findDOMNode).not.toHaveBeenCalled();
     });
 
     it('does not call findDOMNode when ref is passed internally', () => {
@@ -868,11 +873,24 @@ describe('CSSMotion', () => {
       expect(ReactDOM.findDOMNode).not.toHaveBeenCalled();
     });
 
-    it('calls findDOMNode when refs are forwarded but not assigned', () => {
+    it('support nativeElement of ref', () => {
       const domRef = React.createRef();
-      const Div = () => <div />;
+      const Div = React.forwardRef<
+        {
+          nativeElement: HTMLDivElement;
+        },
+        object
+      >((props, ref) => {
+        const divRef = React.useRef<HTMLDivElement>(null);
 
-      render(
+        React.useImperativeHandle(ref, () => ({
+          nativeElement: divRef.current!,
+        }));
+
+        return <div {...props} ref={divRef} className="bamboo" />;
+      });
+
+      const { container } = render(
         <CSSMotion motionName="transition" visible ref={domRef}>
           {() => <Div />}
         </CSSMotion>,
@@ -882,7 +900,8 @@ describe('CSSMotion', () => {
         jest.runAllTimers();
       });
 
-      expect(ReactDOM.findDOMNode).toHaveBeenCalled();
+      expect(domRef.current).toBe(container.querySelector('.bamboo'));
+      expect(ReactDOM.findDOMNode).not.toHaveBeenCalled();
     });
 
     it('does not call findDOMNode when refs are forwarded and assigned', () => {