fix: first render should not provide a hidden content (#16)

* 2.4.2

* fix: First render is not forceRender

Author: zombieJ

.gitignore

@@ -28,5 +28,4 @@ es
 yarn.lock
 package-lock.json
 coverage/
-.doc
-tsconfig.json
+.doc

.prettierrc

@@ -4,5 +4,6 @@
   "singleQuote": true,
   "tabWidth": 2,
   "proseWrap": "never",
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "arrowParens": "avoid"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-motion",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "React lifecycle controlled motion library",
   "keywords": [
     "react",

src/CSSMotion.tsx

@@ -5,12 +5,13 @@ import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
 import { fillRef } from 'rc-util/lib/ref';
 import classNames from 'classnames';
 import { getTransitionName, supportTransition } from './util/motion';
-import {
+import type {
   MotionStatus,
-  STATUS_NONE,
   MotionEventHandler,
   MotionEndEventHandler,
-  MotionPrepareEventHandler,
+  MotionPrepareEventHandler} from './interface';
+import {
+  STATUS_NONE,
   STEP_PREPARE,
   STEP_START,
 } from './interface';
@@ -156,6 +157,13 @@ export function genCSSMotion(
       props,
     );
 
+    // Record whether content has rended
+    // Will return null for un-rendered even when `removeOnLeave={false}`
+    const renderedRef = React.useRef(mergedVisible);
+    if (mergedVisible) {
+      renderedRef.current = true;
+    }
+
     // ====================== Refs ======================
     const originRef = useRef(ref);
     originRef.current = ref;
@@ -177,7 +185,7 @@ export function genCSSMotion(
       // Stable children
       if (mergedVisible) {
         motionChildren = children({ ...mergedProps }, setNodeRef);
-      } else if (!removeOnLeave) {
+      } else if (!removeOnLeave && renderedRef.current) {
         motionChildren = children(
           { ...mergedProps, className: leavedClassName },
           setNodeRef,

tests/CSSMotion.spec.tsx

@@ -6,7 +6,8 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import classNames from 'classnames';
 import { mount } from './wrapper';
-import RefCSSMotion, { genCSSMotion, CSSMotionProps } from '../src/CSSMotion';
+import type { CSSMotionProps } from '../src/CSSMotion';
+import RefCSSMotion, { genCSSMotion } from '../src/CSSMotion';
 
 describe('CSSMotion', () => {
   const CSSMotion = genCSSMotion({
@@ -267,7 +268,7 @@ describe('CSSMotion', () => {
 
       test(
         'without ref',
-        React.forwardRef((props) => <div {...props} />),
+        React.forwardRef(props => <div {...props} />),
       );
 
       test(
@@ -552,7 +553,7 @@ describe('CSSMotion', () => {
     let lockResolve: Function;
     const onAppearPrepare = jest.fn(
       () =>
-        new Promise((resolve) => {
+        new Promise(resolve => {
           lockResolve = resolve;
         }),
     );
@@ -606,4 +607,46 @@ describe('CSSMotion', () => {
     wrapper.setProps({ forceRender: false });
     expect(wrapper.find('.motion-box')).toHaveLength(0);
   });
+
+  it('render null on first when removeOnLeave is false', () => {
+    const wrapper = mount(
+      <CSSMotion
+        motionName="bamboo"
+        removeOnLeave={false}
+        leavedClassName="removed"
+        visible={false}
+      >
+        {({ style, className }) => (
+          <div style={style} className={classNames('motion-box', className)} />
+        )}
+      </CSSMotion>,
+    );
+
+    expect(wrapper.find('.motion-box')).toHaveLength(0);
+
+    // Visible
+    wrapper.setProps({ visible: true });
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+    expect(wrapper.find('.motion-box')).toHaveLength(1);
+
+    // Hide again
+    wrapper.setProps({ visible: false });
+    act(() => {
+      jest.runAllTimers();
+
+      const transitionEndEvent = new Event('transitionend');
+      ((wrapper
+        .find('.motion-box')
+        .instance() as any) as HTMLElement).dispatchEvent(transitionEndEvent);
+
+      jest.runAllTimers();
+
+      wrapper.update();
+    });
+    expect(wrapper.find('.motion-box')).toHaveLength(1);
+    expect(wrapper.find('.motion-box').hasClass('removed')).toBeTruthy();
+  });
 });

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "jsx": "preserve",
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"],
+      "rc-menu": ["src/index.tsx"]
+    }
+  }
+}