Merge pull request #137 from react-component/fix-getContainer

fix getContainer no body, overflow: hidden does not delete
react-component · Jun 8, 2020 · c57f4bc · c57f4bc
2 parents 256f6dd + 8a8e3c0
commit c57f4bc
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 23 deletions.
diff --git a/src/DrawerChild.tsx b/src/DrawerChild.tsx
@@ -98,15 +98,18 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
       } catch (err) {}
       this.passive = passiveSupported ? { passive: false } : false;
     }
-    const { open } = this.props;
+    const { open, getContainer } = this.props;
+    const container = getContainer && getContainer();
     this.drawerId = `drawer_id_${Number(
       (Date.now() + Math.random())
         .toString()
         .replace('.', Math.round(Math.random() * 9).toString()),
     ).toString(16)}`;
     this.getLevelDom(this.props);
     if (open) {
-      currentDrawer[this.drawerId] = open;
+      if (container && container.parentNode === document.body) {
+        currentDrawer[this.drawerId] = open;
+      }
       // 默认打开状态时推出 level;
       this.openLevelTransition();
       this.forceUpdate(() => {
@@ -116,12 +119,15 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
   }
 
   public componentDidUpdate(prevProps: IDrawerChildProps) {
-    const { open } = this.props;
+    const { open, getContainer } = this.props;
+    const container = getContainer && getContainer();
     if (open !== prevProps.open) {
       if (open) {
         this.domFocus();
       }
-      currentDrawer[this.drawerId] = !!open;
+      if (container && container.parentNode === document.body) {
+        currentDrawer[this.drawerId] = !!open;
+      }
       this.openLevelTransition();
     }
   }
@@ -238,7 +244,7 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
   ) => {
     const { placement, levelMove, duration, ease, showMask } = this.props;
     // router 切换时可能会导至页面失去滚动条，所以需要时时获取。
-    this.levelDom.forEach((dom) => {
+    this.levelDom.forEach(dom => {
       dom.style.transition = `transform ${duration} ${ease}`;
       addEventListener(dom, transitionEnd, this.transitionEnd);
       let levelValue = open ? value : 0;
@@ -436,7 +442,7 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
   };
 
   private getCurrentDrawerSome = () =>
-    !Object.keys(currentDrawer).some((key) => currentDrawer[key]);
+    !Object.keys(currentDrawer).some(key => currentDrawer[key]);
 
   private getLevelDom = ({ level, getContainer }: IDrawerChildProps) => {
     if (windowIsUndefined) {
@@ -460,8 +466,8 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
         }
       });
     } else if (level) {
-      dataToArray(level).forEach((key) => {
-        document.querySelectorAll(key).forEach((item) => {
+      dataToArray(level).forEach(key => {
+        document.querySelectorAll(key).forEach(item => {
           this.levelDom.push(item);
         });
       });
@@ -556,7 +562,7 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
             className={`${prefixCls}-mask`}
             onClick={maskClosable ? onClose : undefined}
             style={maskStyle}
-            ref={(c) => {
+            ref={c => {
               this.maskDom = c as HTMLElement;
             }}
           />
@@ -569,13 +575,13 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
             width: isNumeric(width) ? `${width}px` : width,
             height: isNumeric(height) ? `${height}px` : height,
           }}
-          ref={(c) => {
+          ref={c => {
             this.contentWrapper = c as HTMLElement;
           }}
         >
           <div
             className={`${prefixCls}-content`}
-            ref={(c) => {
+            ref={c => {
               this.contentDom = c as HTMLElement;
             }}
             onTouchStart={

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -1,13 +1,15 @@
 import { mount } from 'enzyme';
 import * as React from 'react';
 import toJson from 'enzyme-to-json';
-import Drawer from '../src/';
+import Drawer from '../src';
 
 function Div(props) {
-  const { show, ...otherProps } = props
+  const { show, ...otherProps } = props;
   return (
     <div className="div-wrapper">
-      {show && <Drawer wrapperClassName="drawer-wrapper" defaultOpen {...otherProps} />}
+      {show && (
+        <Drawer wrapperClassName="drawer-wrapper" defaultOpen {...otherProps} />
+      )}
     </div>
   );
 }
@@ -18,7 +20,11 @@ function DrawerComp(props: { open?: boolean }) {
       <div id="a" style={{ position: 'absolute', top: 0, left: 0 }}>
         test1
       </div>
-      <Drawer getContainer={null} open={props.open} wrapperClassName="drawer-wrapper" />
+      <Drawer
+        getContainer={null}
+        open={props.open}
+        wrapperClassName="drawer-wrapper"
+      />
     </div>
   );
 }
@@ -32,7 +38,10 @@ function createStartTouchEventObject({ x = 0, y = 0 }) {
 }
 
 function createMoveTouchEventObject({ x = 0, y = 0 }) {
-  return { touches: [createClientXY(x, y)], changedTouches: [createClientXY(x, y)] };
+  return {
+    touches: [createClientXY(x, y)],
+    changedTouches: [createClientXY(x, y)],
+  };
 }
 
 describe('rc-drawer-menu', () => {
@@ -64,11 +73,19 @@ describe('rc-drawer-menu', () => {
   });
 
   it('default open drawer', () => {
-    instance = mount(<Drawer handler={<i className="a">a</i>} defaultOpen={true} level={[]} />);
+    instance = mount(
+      <Drawer handler={<i className="a">a</i>} defaultOpen level={[]} />,
+    );
     const drawer = instance.find('.drawer-content-wrapper').instance() as any;
     const content = instance.find('.drawer-content');
-    content.simulate('touchStart', createStartTouchEventObject({ x: 100, y: 0 }));
-    content.simulate('touchMove', createMoveTouchEventObject({ x: 150, y: 10 }));
+    content.simulate(
+      'touchStart',
+      createStartTouchEventObject({ x: 100, y: 0 }),
+    );
+    content.simulate(
+      'touchMove',
+      createMoveTouchEventObject({ x: 150, y: 10 }),
+    );
     content.simulate('touchEnd', createMoveTouchEventObject({ x: 200, y: 0 }));
     content.simulate('touchStart', createStartTouchEventObject({ x: 0, y: 0 }));
     content.simulate('touchMove', createMoveTouchEventObject({ x: 0, y: 10 }));
@@ -78,7 +95,7 @@ describe('rc-drawer-menu', () => {
   });
 
   it('handler is null，open=true', () => {
-    instance = mount(<Drawer handler={null} open={true} level={null} />);
+    instance = mount(<Drawer handler={null} open level={null} />);
     expect(toJson(instance.render())).toMatchSnapshot();
   });
   it('handler is null，open=false', () => {
@@ -111,12 +128,16 @@ describe('rc-drawer-menu', () => {
   it('getContainer is null', () => {
     instance = mount(
       <div className="react-wrapper">
-        <div id="a" className="a" style={{ position: 'absolute', top: 0, left: 0 }}>
+        <div
+          id="a"
+          className="a"
+          style={{ position: 'absolute', top: 0, left: 0 }}
+        >
           test1
         </div>
         <Drawer
           getContainer={null}
-          defaultOpen={true}
+          defaultOpen
           level="#a"
           wrapperClassName="drawer-wrapper"
         />
@@ -146,7 +167,7 @@ describe('rc-drawer-menu', () => {
     expect(content.style.transform).toBe('translateX(-100%)');
   });
   it('will unmount', () => {
-    instance = mount(<Div show={true} />);
+    instance = mount(<Div show />);
     const divWrapper = instance.find('.div-wrapper').instance() as any;
     const content = instance.find('.drawer-content-wrapper').instance() as any;
     console.log(content.style.transform);