feat: getContainer support false (#2)

* 1.0.0-1

* feat: getContainer support false

* adjust render first mount logic

* fix: not handle when getContainer is empty

Author: zombieJ

docs/demo/getContainer.md

@@ -0,0 +1,4 @@
+## getContainer
+
+
+<code src="../examples/getContainer.tsx" />

docs/examples/getContainer.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Portal from '../../src';
+
+const Content = (): React.ReactElement => {
+  React.useEffect(() => {
+    console.log('Content Mount!');
+  }, []);
+
+  return <>Bamboo</>;
+};
+
+export default () => {
+  const divRef = React.useRef();
+
+  return (
+    <div
+      ref={divRef}
+      className="holder"
+      style={{ minHeight: 10, border: '1px solid blue' }}
+    >
+      <Portal
+        open
+        getContainer={() => {
+          return divRef.current;
+        }}
+      >
+        <Content />
+      </Portal>
+    </div>
+  );
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/portal",
-  "version": "1.0.0-0",
+  "version": "1.0.0-1",
   "description": "React Portal Component",
   "keywords": [
     "react",

src/Portal.tsx

@@ -8,7 +8,11 @@ import { inlineMock } from './mock';
 
 export type ContainerType = Element | DocumentFragment;
 
-export type GetContainer = string | ContainerType | (() => ContainerType);
+export type GetContainer =
+  | string
+  | ContainerType
+  | (() => ContainerType)
+  | false;
 
 export interface PortalProps {
   /** Customize container element. Default will create a div in document.body when `open` */
@@ -18,10 +22,17 @@ export interface PortalProps {
   open?: boolean;
   /** Lock screen scroll when open */
   autoLock?: boolean;
+
+  /** @private debug name. Do not use in prod */
+  debug?: string;
 }
 
 const getPortalContainer = (getContainer: GetContainer) => {
-  if (!canUseDom()) {
+  if (getContainer === false) {
+    return false;
+  }
+
+  if (!canUseDom() || !getContainer) {
     return null;
   }
 
@@ -35,7 +46,7 @@ const getPortalContainer = (getContainer: GetContainer) => {
 };
 
 export default function Portal(props: PortalProps) {
-  const { open, autoLock, getContainer, children } = props;
+  const { open, autoLock, getContainer, debug, children } = props;
 
   const [mergedRender, setMergedRender] = React.useState(open);
 
@@ -47,23 +58,36 @@ export default function Portal(props: PortalProps) {
   }, [open]);
 
   // ======================== Container ========================
-  const customizeContainer = getPortalContainer(getContainer);
+  const [innerContainer, setInnerContainer] = React.useState<
+    ContainerType | false
+  >(() => getPortalContainer(getContainer));
+
+  React.useEffect(() => {
+    const customizeContainer = getPortalContainer(getContainer);
+
+    // Tell component that we check this in effect which is safe to be `null`
+    setInnerContainer(customizeContainer ?? null);
+  });
 
   const [defaultContainer, queueCreate] = useDom(
-    mergedRender && !customizeContainer,
+    mergedRender && !innerContainer,
+    debug,
   );
-  const mergedContainer = customizeContainer || defaultContainer;
+  const mergedContainer = innerContainer ?? defaultContainer;
 
   // ========================= Render ==========================
   // Do not render when nothing need render
-  if (!mergedRender || !canUseDom()) {
+  // When innerContainer is `undefined`, it may not ready since user use ref in the same render
+  if (!mergedRender || !canUseDom() || innerContainer === undefined) {
     return null;
   }
 
-  console.log(inlineMock());
+  // Render inline
+  const renderInline = mergedContainer === false || inlineMock();
+
   return (
     <OrderContext.Provider value={queueCreate}>
-      {inlineMock() ? children : createPortal(children, mergedContainer)}
+      {renderInline ? children : createPortal(children, mergedContainer)}
     </OrderContext.Provider>
   );
 }

src/useDom.tsx

@@ -9,9 +9,17 @@ const EMPTY_LIST = [];
  * Will add `div` to document. Nest call will keep order
  * @param render Render DOM in document
  */
-export default function useDom(render: boolean): [HTMLDivElement, QueueCreate] {
+export default function useDom(
+  render: boolean,
+  debug?: string,
+): [HTMLDivElement, QueueCreate] {
   const [ele] = React.useState(() => {
     const defaultEle = document.createElement('div');
+
+    if (process.env.NODE_ENV !== 'production' && debug) {
+      defaultEle.setAttribute('data-debug', debug);
+    }
+
     return defaultEle;
   });
 
@@ -22,7 +30,10 @@ export default function useDom(render: boolean): [HTMLDivElement, QueueCreate] {
   const mergedQueueCreate =
     queueCreate ||
     ((appendFn: VoidFunction) => {
-      setQueue(origin => [appendFn, ...origin]);
+      setQueue(origin => {
+        const newQueue = [appendFn, ...origin];
+        return newQueue;
+      });
     });
 
   // =========================== DOM ===========================

tests/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Portal getContainer customize in same level 1`] = `
+<div>
+  <div
+    class="holder"
+  >
+    Bamboo
+  </div>
+</div>
+`;
+
+exports[`Portal getContainer false 1`] = `
+<div>
+  Hello
+  Bamboo
+  Light
+</div>
+`;

tests/index.test.tsx

@@ -5,11 +5,11 @@ import Portal from '../src';
 describe('Portal', () => {
   it('Order', () => {
     render(
-      <Portal open>
+      <Portal open debug="root">
         <p>Root</p>
-        <Portal open>
+        <Portal open debug="parent">
           <p>Parent</p>
-          <Portal open>
+          <Portal open debug="children">
             <p>Children</p>
           </Portal>
         </Portal>
@@ -24,4 +24,48 @@ describe('Portal', () => {
       'Children',
     ]);
   });
+
+  describe('getContainer', () => {
+    it('false', () => {
+      const { container } = render(
+        <>
+          Hello
+          <Portal open getContainer={false}>
+            Bamboo
+          </Portal>
+          Light
+        </>,
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+
+    it('customize in same level', () => {
+      let renderTimes = 0;
+
+      const Content = () => {
+        React.useEffect(() => {
+          renderTimes += 1;
+        });
+
+        return <>Bamboo</>;
+      };
+
+      const Demo = () => {
+        const divRef = React.useRef();
+
+        return (
+          <div ref={divRef} className="holder">
+            <Portal open getContainer={() => divRef.current}>
+              <Content />
+            </Portal>
+          </div>
+        );
+      };
+
+      const { container } = render(<Demo />);
+      expect(container).toMatchSnapshot();
+      expect(renderTimes).toEqual(1);
+    });
+  });
 });