fix: Move motion to motion props (#283)

* fix: motion move to wrapper

* test: test cov

Author: zombieJ

docs/examples/assets/motion.less

@@ -31,6 +31,10 @@
   &-enter,
   &-appear,
   &-leave {
+    &-start {
+      transition: none;
+    }
+
     &-active {
       transition: all @duration;
     }

src/DrawerPopup.tsx

@@ -268,45 +268,46 @@ export default function DrawerPopup(props: DrawerPopupProps) {
   }
 
   const panelNode: React.ReactNode = (
-    <div
-      className={classNames(`${prefixCls}-content-wrapper`)}
-      style={{
-        ...wrapperStyle,
-        ...contentWrapperStyle,
-        ...zIndexStyle,
+    <CSSMotion
+      key="panel"
+      {...motionProps}
+      visible={open}
+      forceRender={forceRender}
+      onVisibleChanged={nextVisible => {
+        afterOpenChange?.(nextVisible);
+        if (!nextVisible) {
+          scrollLocker?.unLock();
+        }
       }}
+      removeOnLeave={false}
+      leavedClassName={`${prefixCls}-content-hidden`}
     >
-      <CSSMotion
-        key="panel"
-        {...motionProps}
-        visible={open}
-        forceRender={forceRender}
-        onVisibleChanged={nextVisible => {
-          afterOpenChange?.(nextVisible);
-          if (!nextVisible) {
-            scrollLocker?.unLock();
-          }
-        }}
-        removeOnLeave={false}
-        leavedClassName={`${prefixCls}-content-hidden`}
-      >
-        {({ className: motionClassName, style: motionStyle }, motionRef) => {
-          return (
+      {({ className: motionClassName, style: motionStyle }, motionRef) => {
+        return (
+          <div
+            className={classNames(
+              `${prefixCls}-content-wrapper`,
+              motionClassName,
+            )}
+            style={{
+              ...wrapperStyle,
+              ...motionStyle,
+              ...contentWrapperStyle,
+              ...zIndexStyle,
+            }}
+          >
             <DrawerPanel
               containerRef={motionRef}
               prefixCls={prefixCls}
-              className={classNames(className, motionClassName)}
-              style={{
-                ...motionStyle,
-                ...style,
-              }}
+              className={className}
+              style={style}
             >
               {children}
             </DrawerPanel>
-          );
-        }}
-      </CSSMotion>
-    </div>
+          </div>
+        );
+      }}
+    </CSSMotion>
   );
 
   // =========================== Render ===========================

tests/motion.spec.tsx

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import Drawer from '../src';
+
+jest.mock('rc-motion', () => {
+  const { genCSSMotion } = jest.requireActual('rc-motion/lib/CSSMotion');
+  const CSSMotion = genCSSMotion(true);
+  return CSSMotion;
+});
+
+describe('motion', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  // zombieJ: Do not modify patch dom since user use `contentWrapperStyle` for override style
+  it('motion patch on the correct element', () => {
+    const { container } = render(
+      <Drawer
+        width="93%"
+        open
+        getContainer={false}
+        motion={{ motionName: 'bamboo', motionAppear: true }}
+        contentWrapperStyle={{ background: 'red' }}
+      />,
+    );
+
+    expect(container.querySelector('.rc-drawer-content-wrapper')).toHaveClass(
+      'bamboo-appear',
+    );
+    expect(container.querySelector('.rc-drawer-content-wrapper')).toHaveStyle({
+      background: 'red',
+    });
+  });
+});