fix: not queue when already created (#10)

* docs: add order demo for debug

* fix: portal create not block

* refactor: reorder

* test: order test

Author: zombieJ

docs/demo/inlineOrder.md

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

docs/examples/inlineOrder.tsx

@@ -0,0 +1,65 @@
+import React, { version } from 'react';
+import Portal from '../../src';
+import './basic.less';
+
+const Child = () => {
+  const divRef = React.useRef<HTMLPreElement>(null);
+
+  React.useEffect(() => {
+    const path: Element[] = [];
+
+    for (let cur: HTMLElement = divRef.current; cur; cur = cur.parentElement) {
+      path.push(cur);
+    }
+
+    console.log('Path:', path);
+  }, []);
+
+  return (
+    <pre ref={divRef} style={{ border: '1px solid red' }}>
+      <p>Hello Child {version}</p>
+    </pre>
+  );
+};
+
+export default () => {
+  const [show1, setShow1] = React.useState(false);
+  const [show2, setShow2] = React.useState(false);
+
+  return (
+    <React.StrictMode>
+      <button
+        onClick={() => {
+          setShow1(!show1);
+        }}
+      >
+        Trigger Inner Child
+      </button>
+      <button
+        onClick={() => {
+          setShow2(!show2);
+        }}
+      >
+        Trigger Outer Child
+      </button>
+
+      <Portal open>
+        <div style={{ border: '1px solid red' }}>
+          <p>Hello Root {version}</p>
+
+          {show1 && (
+            <Portal open>
+              <Child />
+            </Portal>
+          )}
+        </div>
+      </Portal>
+
+      {show2 && (
+        <Portal open>
+          <Child />
+        </Portal>
+      )}
+    </React.StrictMode>
+  );
+};

src/useDom.tsx

@@ -29,27 +29,35 @@ export default function useDom(
   });
 
   // ========================== Order ==========================
+  const appendedRef = React.useRef(false);
+
   const queueCreate = React.useContext(OrderContext);
   const [queue, setQueue] = React.useState<VoidFunction[]>(EMPTY_LIST);
 
   const mergedQueueCreate =
     queueCreate ||
-    ((appendFn: VoidFunction) => {
-      setQueue(origin => {
-        const newQueue = [appendFn, ...origin];
-        return newQueue;
-      });
-    });
+    (appendedRef.current
+      ? undefined
+      : (appendFn: VoidFunction) => {
+          setQueue(origin => {
+            const newQueue = [appendFn, ...origin];
+            return newQueue;
+          });
+        });
 
   // =========================== DOM ===========================
   function append() {
     if (!ele.parentElement) {
       document.body.appendChild(ele);
     }
+
+    appendedRef.current = true;
   }
 
   function cleanup() {
     ele.parentElement?.removeChild(ele);
+
+    appendedRef.current = false;
   }
 
   useLayoutEffect(() => {

tests/index.test.tsx

@@ -12,6 +12,12 @@ jest.mock('../src/util', () => {
   };
 });
 
+// Revert `useLayoutEffect` back to real one since we should keep order for test
+jest.mock('rc-util/lib/hooks/useLayoutEffect', () => {
+  const origin = jest.requireActual('react');
+  return origin.useLayoutEffect;
+});
+
 describe('Portal', () => {
   beforeEach(() => {
     global.isOverflow = true;
@@ -249,4 +255,37 @@ describe('Portal', () => {
     rerender(<Demo open />);
     expect(checked).toBeTruthy();
   });
+
+  it('not block if parent already created', () => {
+    const Checker = () => {
+      const divRef = React.useRef<HTMLDivElement>(null);
+      const [inDoc, setInDoc] = React.useState(false);
+
+      React.useEffect(() => {
+        setInDoc(document.contains(divRef.current));
+      }, []);
+
+      return (
+        <div ref={divRef} className="checker">
+          {String(inDoc)}
+        </div>
+      );
+    };
+
+    const Demo = ({ visible }: any) => (
+      <Portal open>
+        {visible && (
+          <Portal open>
+            <Checker />
+          </Portal>
+        )}
+      </Portal>
+    );
+
+    const { rerender } = render(<Demo />);
+
+    rerender(<Demo visible />);
+
+    expect(document.querySelector('.checker').textContent).toEqual('true');
+  });
 });