feat: Auto pass ref if children validate (#28)

* chore: update deps & new test case

* chore: react way

* chore: clean up

* test: patch ref test

Author: zombieJ

package.json

@@ -43,7 +43,7 @@
   "dependencies": {
     "@babel/runtime": "^7.11.1",
     "classnames": "^2.2.1",
-    "rc-util": "^5.19.2"
+    "rc-util": "^5.21.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

src/CSSMotion.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { useRef } from 'react';
 import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
-import { fillRef } from 'rc-util/lib/ref';
+import { fillRef, supportRef } from 'rc-util/lib/ref';
 import classNames from 'classnames';
 import { getTransitionName, supportTransition } from './util/motion';
 import type {
@@ -166,10 +166,13 @@ export function genCSSMotion(
     }
 
     // ====================== Refs ======================
-    const setNodeRef = React.useCallback((node: any) => {
-      nodeRef.current = node;
-      fillRef(ref, node);
-    }, []);
+    const setNodeRef = React.useCallback(
+      (node: any) => {
+        nodeRef.current = node;
+        fillRef(ref, node);
+      },
+      [ref],
+    );
 
     // ===================== Render =====================
     let motionChildren: React.ReactNode;
@@ -220,6 +223,17 @@ export function genCSSMotion(
       );
     }
 
+    // Auto inject ref if child node not have `ref` props
+    if (React.isValidElement(motionChildren) && supportRef(motionChildren)) {
+      const { ref: originNodeRef } = motionChildren as any;
+
+      if (!originNodeRef) {
+        motionChildren = React.cloneElement(motionChildren, {
+          ref: setNodeRef,
+        });
+      }
+    }
+
     return <DomWrapper ref={wrapperNodeRef}>{motionChildren}</DomWrapper>;
   });
 

src/hooks/useDomMotionEvents.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useRef } from 'react';
 
 import { animationEndName, transitionEndName } from '../util/motion';
-import { MotionEvent } from '../interface';
+import type { MotionEvent } from '../interface';
 
 export default (
   callback: (event: MotionEvent) => void,

src/hooks/useIsomorphicLayoutEffect.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import useState from 'rc-util/lib/hooks/useState';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import {
   STATUS_APPEAR,
   STATUS_NONE,
@@ -18,7 +19,6 @@ import type {
   StepStatus,
 } from '../interface';
 import type { CSSMotionProps } from '../CSSMotion';
-import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 import useStepQueue, { DoStep, SkipStep, isActive } from './useStepQueue';
 import useDomMotionEvents from './useDomMotionEvents';
 
@@ -163,7 +163,7 @@ export default function useStatus(
 
   // ============================ Status ============================
   // Update with new status
-  useIsomorphicLayoutEffect(() => {
+  useLayoutEffect(() => {
     setAsyncVisible(visible);
 
     const isMounted = mountedRef.current;

src/hooks/useStatus.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import useState from 'rc-util/lib/hooks/useState';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import type { StepStatus, MotionStatus } from '../interface';
 import {
   STEP_PREPARE,
@@ -8,7 +9,6 @@ import {
   STEP_ACTIVATED,
   STEP_NONE,
 } from '../interface';
-import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 import useNextFrame from './useNextFrame';
 
 const STEP_QUEUE: StepStatus[] = [
@@ -41,7 +41,7 @@ export default (
     setStep(STEP_PREPARE, true);
   }
 
-  useIsomorphicLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (step !== STEP_NONE && step !== STEP_ACTIVATED) {
       const index = STEP_QUEUE.indexOf(step);
       const nextStep = STEP_QUEUE[index + 1];

src/hooks/useStepQueue.ts

@@ -659,9 +659,10 @@ describe('CSSMotion', () => {
     });
 
     it('calls findDOMNode when no refs are passed', () => {
+      const Div = () => <div />;
       render(
         <CSSMotion motionName="transition" visible>
-          {() => <div />}
+          {() => <Div />}
         </CSSMotion>,
       );
 
@@ -688,9 +689,11 @@ describe('CSSMotion', () => {
 
     it('calls findDOMNode when refs are forwarded but not assigned', () => {
       const domRef = React.createRef();
+      const Div = () => <div />;
+
       render(
         <CSSMotion motionName="transition" visible ref={domRef}>
-          {() => <div />}
+          {() => <Div />}
         </CSSMotion>,
       );
 

tests/CSSMotion.spec.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable
+  react/no-render-return-value, max-classes-per-file,
+  react/prefer-stateless-function, react/no-multi-comp
+*/
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import classNames from 'classnames';
+import { render, fireEvent } from '@testing-library/react';
+// import type { CSSMotionProps } from '../src/CSSMotion';
+import { genCSSMotion } from '../src/CSSMotion';
+// import RefCSSMotion, { genCSSMotion } from '../src/CSSMotion';
+// import ReactDOM from 'react-dom';
+
+describe('StrictMode', () => {
+  const CSSMotion = genCSSMotion({
+    transitionSupport: true,
+  });
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('motion should end', () => {
+    const ref = React.createRef();
+
+    const { container } = render(
+      <React.StrictMode>
+        <CSSMotion motionName="transition" ref={ref} motionAppear visible>
+          {({ style, className }) => {
+            return (
+              <div
+                style={style}
+                className={classNames('motion-box', className)}
+              />
+            );
+          }}
+        </CSSMotion>
+      </React.StrictMode>,
+    );
+
+    const node = container.querySelector('.motion-box');
+    expect(node).toHaveClass('transition-appear', 'transition-appear-start');
+
+    // Active
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(node).not.toHaveClass('transition-appear-start');
+    expect(node).toHaveClass('transition-appear-active');
+
+    // Trigger End
+    fireEvent.transitionEnd(node);
+    expect(node).not.toHaveClass('transition-appear');
+
+    expect(ref.current).toBe(node);
+  });
+});