feat: support autoDestroy

Author: zombieJ

src/Portal.tsx

@@ -20,6 +20,8 @@ export interface PortalProps {
   children?: React.ReactNode;
   /** Show the portal children */
   open?: boolean;
+  /** Remove `children` when `open` is `false`. Set `false` will not handle remove process */
+  autoDestroy?: boolean;
   /** Lock screen scroll when open */
   autoLock?: boolean;
 
@@ -46,16 +48,25 @@ const getPortalContainer = (getContainer: GetContainer) => {
 };
 
 export default function Portal(props: PortalProps) {
-  const { open, autoLock, getContainer, debug, children } = props;
+  const {
+    open,
+    autoLock,
+    getContainer,
+    debug,
+    autoDestroy = true,
+    children,
+  } = props;
 
   const [mergedRender, setMergedRender] = React.useState(open);
 
   useScrollLocker(autoLock && open);
 
   // ====================== Should Render ======================
   React.useEffect(() => {
-    setMergedRender(open);
-  }, [open]);
+    if (autoDestroy || open) {
+      setMergedRender(open);
+    }
+  }, [open, autoDestroy]);
 
   // ======================== Container ========================
   const [innerContainer, setInnerContainer] = React.useState<

tests/index.test.tsx

@@ -127,4 +127,23 @@ describe('Portal', () => {
       });
     });
   });
+
+  it('autoDestroy', () => {
+    expect(document.querySelector('p')).toBeFalsy();
+
+    const renderDemo = (open: boolean, autoDestroy: boolean) => (
+      <Portal open={open} autoDestroy={autoDestroy}>
+        <p>Root</p>
+      </Portal>
+    );
+
+    const { rerender } = render(renderDemo(true, false));
+    expect(document.querySelector('p')).toBeTruthy();
+
+    rerender(renderDemo(false, false));
+    expect(document.querySelector('p')).toBeTruthy();
+
+    rerender(renderDemo(false, true));
+    expect(document.querySelector('p')).toBeFalsy();
+  });
 });