fix: PortalWrapper should support default render

react-component · Sep 24, 2020 · 5167997 · 5167997
1 parent 927d053
commit 5167997
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/examples/portal.tsx b/examples/portal.tsx
@@ -3,16 +3,18 @@ import PortalWrapper from '../src/PortalWrapper';
 
 export default () => {
   const divRef = React.useRef();
+  const outerRef = React.useRef();
 
   React.useEffect(() => {
     console.log('>>>', divRef.current);
   }, []);
 
   return (
     <>
-      <PortalWrapper forceRender>
+      <PortalWrapper visible getContainer={() => outerRef.current}>
         {() => <div ref={divRef}>2333</div>}
       </PortalWrapper>
+      <div style={{ background: 'red', height: 20 }} ref={outerRef} />
     </>
   );
 };
diff --git a/src/Portal.tsx b/src/Portal.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { useRef, forwardRef, useImperativeHandle } from 'react';
+import {
+  useRef,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 import ReactDOM from 'react-dom';
 import canUseDom from './Dom/canUseDom';
 
@@ -27,8 +32,8 @@ const Portal = forwardRef<PortalRef, PortalProps>((props, ref) => {
     initRef.current = true;
   }
 
-  // Not know who use this. Just keep it here
-  React.useEffect(() => {
+  useEffect(() => {
+    // Not know who use this. Just keep it here
     didUpdate?.(props);
 
     return () => {

diff --git a/src/PortalWrapper.tsx b/src/PortalWrapper.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle,react/require-default-props */
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import raf from './raf';
 import ContainerRender from './ContainerRender';
 import Portal, { PortalRef } from './Portal';
 import switchScrollingEffect from './switchScrollingEffect';
@@ -67,6 +68,8 @@ class PortalWrapper extends React.Component<
 
   _component?: PortalRef;
 
+  rafId?: number;
+
   renderComponent?: (info: {
     afterClose: Function;
     onClose: Function;
@@ -86,8 +89,17 @@ class PortalWrapper extends React.Component<
     };
   }
 
+  componentDidMount() {
+    if (!this.attachToParent()) {
+      this.rafId = raf(() => {
+        this.forceUpdate();
+      });
+    }
+  }
+
   componentDidUpdate() {
     this.setWrapperClassName();
+    this.attachToParent();
   }
 
   componentWillUnmount() {
@@ -97,6 +109,7 @@ class PortalWrapper extends React.Component<
       openCount = visible && openCount ? openCount - 1 : openCount;
     }
     this.removeCurrentContainer(visible);
+    raf.cancel(this.rafId);
   }
 
   static getDerivedStateFromProps(props, { prevProps, _self }) {
@@ -129,16 +142,27 @@ class PortalWrapper extends React.Component<
     };
   }
 
+  attachToParent = (force = false) => {
+    if (force || (this.container && !this.container.parentNode)) {
+      const parent = getParent(this.props.getContainer);
+      if (parent) {
+        parent.appendChild(this.container);
+        return true;
+      }
+
+      return false;
+    }
+
+    return true;
+  };
+
   getContainer = () => {
     if (windowIsUndefined) {
       return null;
     }
     if (!this.container) {
       this.container = document.createElement('div');
-      const parent = getParent(this.props.getContainer);
-      if (parent) {
-        parent.appendChild(this.container);
-      }
+      this.attachToParent(true);
     }
     this.setWrapperClassName();
     return this.container;