refactor: Use rc-portal instead (#322)

* refactor: Use Portal instead

* chore: update Portal ver

* fix: forceRender logic

* rm getContainer

* chore: fix open logic

Author: zombieJ

docs/examples/multiple.tsx

@@ -13,9 +13,9 @@ import motionProps from './motion';
 
 class Demo extends React.Component {
   public state = {
-    open: false,
-    openChild: false,
-    openChildren: false,
+    open: true,
+    openChild: true,
+    openChildren: true,
   };
   public onClick = () => {
     this.setState({

package.json

@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
+    "@rc-component/portal": "^1.0.0-6",
     "classnames": "^2.2.6",
     "rc-motion": "^2.6.1",
     "rc-util": "^5.21.2"

src/Drawer.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import type { GetContainer } from 'rc-util/lib/PortalWrapper';
-import Portal from 'rc-util/lib/PortalWrapper';
+import Portal from '@rc-component/portal';
+import type { PortalProps } from '@rc-component/portal';
 import DrawerPopup from './DrawerPopup';
 import type { DrawerPopupProps } from './DrawerPopup';
+import { warnCheck } from './util';
 
 export type Placement = 'left' | 'top' | 'right' | 'bottom';
 
@@ -12,27 +13,27 @@ export interface DrawerProps
 
   open?: boolean;
   onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-  /** @deprecated Only work on Portal mode. You can replace with rootClassName instead */
-  wrapperClassName?: string;
   destroyOnClose?: boolean;
-  getContainer?: GetContainer | false;
+  getContainer?: PortalProps['getContainer'];
 }
 
-const defaultGetContainer = () => document.body;
-
 const Drawer: React.FC<DrawerProps> = props => {
   const {
     open,
     getContainer,
     forceRender,
-    wrapperClassName,
     prefixCls,
     afterOpenChange,
     destroyOnClose,
   } = props;
 
   const [animatedVisible, setAnimatedVisible] = React.useState(false);
 
+  // ============================= Warn =============================
+  if (process.env.NODE_ENV !== 'production') {
+    warnCheck(props);
+  }
+
   // ============================= Open =============================
   const internalAfterOpenChange: DrawerProps['afterOpenChange'] =
     nextVisible => {
@@ -51,20 +52,14 @@ const Drawer: React.FC<DrawerProps> = props => {
     afterOpenChange: internalAfterOpenChange,
   };
 
-  if (getContainer === false) {
-    return <DrawerPopup {...sharedDrawerProps} inline />;
-  }
-
   return (
     <Portal
-      visible={open}
-      forceRender={forceRender}
+      open={open || forceRender || animatedVisible}
+      autoDestroy={false}
       getContainer={getContainer}
-      wrapperClassName={wrapperClassName}
+      autoLock={open || animatedVisible}
     >
-      {({ scrollLocker }) => (
-        <DrawerPopup {...sharedDrawerProps} scrollLocker={scrollLocker} />
-      )}
+      <DrawerPopup {...sharedDrawerProps} inline={getContainer === false} />
     </Portal>
   );
 };
@@ -74,7 +69,6 @@ const Drawer: React.FC<DrawerProps> = props => {
 // Let's maintain this in one place.
 Drawer.defaultProps = {
   open: false,
-  getContainer: defaultGetContainer,
   prefixCls: 'rc-drawer',
   placement: 'right',
   autoFocus: true,

src/DrawerPopup.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import type { CSSMotionProps } from 'rc-motion';
 import DrawerPanel from './DrawerPanel';
-import type ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
+// import type ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
 import DrawerContext from './context';
 import type { DrawerContextProps } from './context';
 import KeyCode from 'rc-util/lib/KeyCode';
@@ -32,9 +32,6 @@ export interface DrawerPopupProps {
   autoFocus?: boolean;
   keyboard?: boolean;
 
-  // MISC
-  scrollLocker?: ScrollLocker;
-
   // Root
   rootClassName?: string;
   rootStyle?: React.CSSProperties;
@@ -52,7 +49,7 @@ export interface DrawerPopupProps {
   // Mask
   mask?: boolean;
   maskClosable?: boolean;
-  maskClassName?: React.CSSProperties;
+  maskClassName?: string;
   maskStyle?: React.CSSProperties;
 
   // Motion
@@ -77,9 +74,6 @@ export default function DrawerPopup(props: DrawerPopupProps) {
     autoFocus,
     keyboard,
 
-    // MISC
-    scrollLocker,
-
     // Root
     rootClassName,
     rootStyle,
@@ -190,17 +184,9 @@ export default function DrawerPopup(props: DrawerPopupProps) {
     }
   }, [open]);
 
-  // Lock window scroll
-  React.useEffect(() => {
-    if (open && mask) {
-      scrollLocker?.lock();
-    }
-  }, [open, mask]);
-
   // Clean up
   React.useEffect(
     () => () => {
-      scrollLocker?.unLock();
       parentContext?.pull?.();
     },
     [],
@@ -269,9 +255,6 @@ export default function DrawerPopup(props: DrawerPopupProps) {
       forceRender={forceRender}
       onVisibleChanged={nextVisible => {
         afterOpenChange?.(nextVisible);
-        if (!nextVisible) {
-          scrollLocker?.unLock();
-        }
       }}
       removeOnLeave={false}
       leavedClassName={`${prefixCls}-content-wrapper-hidden`}

src/util.ts

@@ -1,4 +1,5 @@
 import warning from 'rc-util/lib/warning';
+import type { DrawerProps } from './Drawer';
 
 export function parseWidthHeight(value?: number | string) {
   if (typeof value === 'string' && String(Number(value)) === value) {
@@ -11,3 +12,10 @@ export function parseWidthHeight(value?: number | string) {
 
   return value;
 }
+
+export function warnCheck(props: DrawerProps) {
+  warning(
+    !('wrapperClassName' in props),
+    `'wrapperClassName' is removed. Please use 'rootClassName' instead.`,
+  );
+}

tests/index.spec.tsx

@@ -85,13 +85,13 @@ describe('rc-drawer-menu', () => {
         });
 
         expect(document.body).toHaveStyle({
-          overflow: 'hidden',
+          overflowY: 'hidden',
         });
 
         unmount();
 
         expect(document.body).not.toHaveStyle({
-          overflow: 'hidden',
+          overflowY: 'hidden',
         });
       });
     });