Fix motion warning of findDOMNode (#51)

* chore: tmp of it

* chore: update deps

* chore: useEvent

* fix: status

* chore: fix ci

* chore: fix ts

Author: zombieJ

.gitignore

@@ -34,3 +34,4 @@ coverage/
 .dumi/tmp
 .dumi/tmp-production
 .dumi/tmp-test
+.node

package.json

@@ -48,16 +48,16 @@
   "dependencies": {
     "@babel/runtime": "^7.11.1",
     "classnames": "^2.2.1",
-    "rc-util": "^5.21.0"
+    "rc-util": "^5.39.3"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.1",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/react": "^15.0.7",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^26.0.8",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@umijs/fabric": "^2.0.8",
     "cross-env": "^7.0.2",
     "dumi": "^2.0.18",
@@ -69,8 +69,8 @@
     "np": "^6.2.4",
     "prettier": "^2.1.1",
     "rc-test": "^7.0.14",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {

src/CSSMotion.tsx

@@ -107,9 +107,7 @@ export interface CSSMotionState {
  * `transitionSupport` is used for none transition test case.
  * Default we use browser transition event support check.
  */
-export function genCSSMotion(
-  config: CSSMotionConfig,
-): React.ForwardRefExoticComponent<CSSMotionProps & { ref?: React.Ref<any> }> {
+export function genCSSMotion(config: CSSMotionConfig) {
   let transitionSupport = config;
 
   if (typeof config === 'object') {

src/hooks/useDomMotionEvents.ts

@@ -5,19 +5,10 @@ import type { MotionEvent } from '../interface';
 import { animationEndName, transitionEndName } from '../util/motion';
 
 export default (
-  callback: (event: MotionEvent) => void,
+  onInternalMotionEnd: (event: MotionEvent) => void,
 ): [(element: HTMLElement) => void, (element: HTMLElement) => void] => {
   const cacheElementRef = useRef<HTMLElement>();
 
-  // Cache callback
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-
-  // Internal motion event handler
-  const onInternalMotionEnd = React.useCallback((event: MotionEvent) => {
-    callbackRef.current(event);
-  }, []);
-
   // Remove events
   function removeMotionEvents(element: HTMLElement) {
     if (element) {

src/hooks/useStatus.ts

@@ -1,3 +1,4 @@
+import { useEvent } from 'rc-util';
 import useState from 'rc-util/lib/hooks/useState';
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
@@ -72,7 +73,13 @@ export default function useStatus(
     setStyle(null, true);
   }
 
-  function onInternalMotionEnd(event: MotionEvent) {
+  const onInternalMotionEnd = useEvent((event: MotionEvent) => {
+    // Do nothing since not in any transition status.
+    // This may happen when `motionDeadline` trigger.
+    if (status === STATUS_NONE) {
+      return;
+    }
+
     const element = getDomElement();
     if (event && !event.deadline && event.target !== element) {
       // event exists
@@ -93,10 +100,10 @@ export default function useStatus(
     }
 
     // Only update status when `canEnd` and not destroyed
-    if (status !== STATUS_NONE && currentActive && canEnd !== false) {
+    if (currentActive && canEnd !== false) {
       updateMotionEndStatus();
     }
-  }
+  });
 
   const [patchMotionEvents] = useDomMotionEvents(onInternalMotionEnd);
 
@@ -151,7 +158,7 @@ export default function useStatus(
       setStyle(eventHandlers[step]?.(getDomElement(), null) || null);
     }
 
-    if (step === STEP_ACTIVE) {
+    if (step === STEP_ACTIVE && status !== STATUS_NONE) {
       // Patch events when motion needed
       patchMotionEvents(getDomElement());
 

src/util/diff.ts

@@ -8,8 +8,10 @@ export type DiffStatus =
   | typeof STATUS_REMOVE
   | typeof STATUS_REMOVED;
 
+type RawKeyType = string | number;
+
 export interface KeyObject {
-  key: React.Key;
+  key: RawKeyType;
   status?: DiffStatus;
 }
 
@@ -18,7 +20,7 @@ export function wrapKeyToObject(key: React.Key | KeyObject) {
   if (key && typeof key === 'object' && 'key' in key) {
     keyObj = key;
   } else {
-    keyObj = { key: key as React.Key };
+    keyObj = { key: key as RawKeyType };
   }
   return {
     ...keyObj,
@@ -90,7 +92,7 @@ export function diffKeys(
    * Merge same key when it remove and add again:
    *    [1 - add, 2 - keep, 1 - remove] -> [1 - keep, 2 - keep]
    */
-  const keys = {};
+  const keys: Record<RawKeyType, number> = {};
   list.forEach(({ key }) => {
     keys[key] = (keys[key] || 0) + 1;
   });

tests/CSSMotion.spec.tsx

@@ -2,11 +2,10 @@
   react/no-render-return-value, max-classes-per-file,
   react/prefer-stateless-function, react/no-multi-comp
 */
-import { fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
 import classNames from 'classnames';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { act } from 'react-dom/test-utils';
 import type { CSSMotionProps } from '../src';
 import { Provider } from '../src';
 import RefCSSMotion, { genCSSMotion } from '../src/CSSMotion';
@@ -342,6 +341,60 @@ describe('CSSMotion', () => {
           return <div {...props} />;
         }),
       );
+
+      it('not warning on StrictMode', () => {
+        const onLeaveEnd = jest.fn();
+        const errorSpy = jest.spyOn(console, 'error');
+
+        const renderDemo = (visible: boolean) => (
+          <React.StrictMode>
+            <CSSMotion
+              motionName="transition"
+              motionDeadline={1000}
+              onLeaveEnd={onLeaveEnd}
+              visible={visible}
+              motionAppear={false}
+              motionLeave={true}
+            >
+              {({ style, className }) => (
+                <div
+                  style={style}
+                  className={classNames('motion-box', className)}
+                />
+              )}
+            </CSSMotion>
+          </React.StrictMode>
+        );
+
+        const { rerender, container } = render(renderDemo(true));
+        act(() => {
+          jest.advanceTimersByTime(100000);
+        });
+
+        // Leave
+        rerender(renderDemo(false));
+        act(() => {
+          jest.advanceTimersByTime(500);
+        });
+
+        // Motion end
+        fireEvent.transitionEnd(
+          container.querySelector('.transition-leave-active'),
+        );
+        act(() => {
+          jest.advanceTimersByTime(100);
+        });
+
+        // Another timeout
+        act(() => {
+          jest.advanceTimersByTime(1000);
+        });
+
+        expect(onLeaveEnd).toHaveBeenCalledTimes(1);
+        expect(errorSpy).not.toHaveBeenCalled();
+
+        errorSpy.mockRestore();
+      });
     });
 
     it('not crash when no children', () => {