feat: Support forceRender

examples/CSSMotion.tsx

@@ -5,14 +5,15 @@ import './CSSMotion.less';
 
 interface DemoState {
   show: boolean;
+  forceRender: boolean;
   motionLeaveImmediately: boolean;
   removeOnLeave: boolean;
   hasMotionClassName: boolean;
   prepare: boolean;
 }
 
 async function forceDelay(): Promise<void> {
-  return new Promise((resolve) => {
+  return new Promise(resolve => {
     setTimeout(resolve, 2000);
   });
 }
@@ -32,6 +33,7 @@ const Div = React.forwardRef<HTMLDivElement, any>((props, ref) => {
 class Demo extends React.Component<{}, DemoState> {
   state: DemoState = {
     show: true,
+    forceRender: false,
     motionLeaveImmediately: false,
     removeOnLeave: true,
     hasMotionClassName: true,
@@ -48,6 +50,10 @@ class Demo extends React.Component<{}, DemoState> {
     this.setState(({ prepare }) => ({ prepare: !prepare }));
   };
 
+  onForceRender = () => {
+    this.setState(({ forceRender }) => ({ forceRender: !forceRender }));
+  };
+
   onRemoveOnLeave = () => {
     this.setState(({ removeOnLeave }) => ({ removeOnLeave: !removeOnLeave }));
   };
@@ -84,6 +90,7 @@ class Demo extends React.Component<{}, DemoState> {
   render() {
     const {
       show,
+      forceRender,
       motionLeaveImmediately,
       removeOnLeave,
       hasMotionClassName,
@@ -106,6 +113,15 @@ class Demo extends React.Component<{}, DemoState> {
           hasMotionClassName
         </label>
 
+        <label>
+          <input
+            type="checkbox"
+            onChange={this.onForceRender}
+            checked={forceRender}
+          />{' '}
+          forceRender
+        </label>
+
         <label>
           <input
             type="checkbox"
@@ -130,6 +146,7 @@ class Demo extends React.Component<{}, DemoState> {
             <h2>With Transition Class</h2>
             <CSSMotion
               visible={show}
+              forceRender={forceRender}
               motionName={hasMotionClassName ? 'transition' : null}
               removeOnLeave={removeOnLeave}
               leavedClassName="hidden"
@@ -140,7 +157,7 @@ class Demo extends React.Component<{}, DemoState> {
               onLeaveActive={this.onCollapse}
               onEnterEnd={this.skipColorTransition}
               onLeaveEnd={this.skipColorTransition}
-              onVisibleChanged={(visible) => {
+              onVisibleChanged={visible => {
                 console.log('Visible Changed:', visible);
               }}
             >
@@ -158,6 +175,7 @@ class Demo extends React.Component<{}, DemoState> {
             <h2>With Animation Class</h2>
             <CSSMotion
               visible={show}
+              forceRender={forceRender}
               motionName={hasMotionClassName ? 'animation' : null}
               removeOnLeave={removeOnLeave}
               leavedClassName="hidden"

src/CSSMotion.tsx

@@ -45,8 +45,17 @@ export interface CSSMotionProps {
   motionLeave?: boolean;
   motionLeaveImmediately?: boolean;
   motionDeadline?: number;
+  /**
+   * Create element in view even the element is invisible.
+   * Will patch `display: none` style on it.
+   */
+  forceRender?: boolean;
+  /**
+   * Remove element when motion end. This will not work when `forceRender` is set.
+   */
   removeOnLeave?: boolean;
   leavedClassName?: string;
+  /** @private Used by CSSMotionList. Do not use in your production. */
   eventProps?: object;
 
   // Prepare groups
@@ -114,6 +123,7 @@ export function genCSSMotion(
       visible = true,
       removeOnLeave = true,
 
+      forceRender,
       children,
       motionName,
       leavedClassName,
@@ -170,6 +180,11 @@ export function genCSSMotion(
           { ...eventProps, className: leavedClassName },
           setNodeRef,
         );
+      } else if (forceRender) {
+        motionChildren = children(
+          { ...eventProps, style: { display: 'none' } },
+          setNodeRef,
+        );
       } else {
         motionChildren = null;
       }

tests/CSSMotion.spec.tsx

@@ -246,10 +246,7 @@ describe('CSSMotion', () => {
         });
       }
 
-      test(
-        'without ref',
-        React.forwardRef((props) => <div {...props} />),
-      );
+      test('without ref', React.forwardRef(props => <div {...props} />));
 
       test(
         'FC with ref',
@@ -509,7 +506,7 @@ describe('CSSMotion', () => {
     let lockResolve: Function;
     const onAppearPrepare = jest.fn(
       () =>
-        new Promise((resolve) => {
+        new Promise(resolve => {
           lockResolve = resolve;
         }),
     );
@@ -545,4 +542,22 @@ describe('CSSMotion', () => {
       wrapper.find('.motion-box').hasClass('bamboo-appear-prepare'),
     ).toBeFalsy();
   });
+
+  it('forceRender', () => {
+    const wrapper = mount(
+      <CSSMotion forceRender motionName="bamboo" visible={false}>
+        {({ style, className }) => (
+          <div style={style} className={classNames('motion-box', className)} />
+        )}
+      </CSSMotion>,
+    );
+
+    expect(wrapper.find('.motion-box').props().style).toEqual({
+      display: 'none',
+    });
+
+    // Reset should hide
+    wrapper.setProps({ forceRender: false });
+    expect(wrapper.find('.motion-box')).toHaveLength(0);
+  });
 });