@rc-component/portal 1.0.0-1 → 1.0.0-2

package/es/Portal.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare type ContainerType = Element | DocumentFragment;
-export declare type GetContainer = string | ContainerType | (() => ContainerType);
+export declare type GetContainer = string | ContainerType | (() => ContainerType) | false;
 export interface PortalProps {
     /** Customize container element. Default will create a div in document.body when `open` */
     getContainer?: GetContainer;
@@ -9,5 +9,7 @@ export interface PortalProps {
     open?: boolean;
     /** Lock screen scroll when open */
     autoLock?: boolean;
+    /** @private debug name. Do not use in prod */
+    debug?: string;
 }
 export default function Portal(props: PortalProps): JSX.Element;

package/es/Portal.js

@@ -8,7 +8,11 @@ import useScrollLocker from "./useScrollLocker";
 import { inlineMock } from "./mock";
 
 var getPortalContainer = function getPortalContainer(getContainer) {
-  if (!canUseDom()) {
+  if (getContainer === false) {
+    return false;
+  }
+
+  if (!canUseDom() || !getContainer) {
     return null;
   }
 
@@ -27,6 +31,7 @@ export default function Portal(props) {
   var open = props.open,
       autoLock = props.autoLock,
       getContainer = props.getContainer,
+      debug = props.debug,
       children = props.children;
 
   var _React$useState = React.useState(open),
@@ -40,22 +45,35 @@ export default function Portal(props) {
     setMergedRender(open);
   }, [open]); // ======================== Container ========================
 
-  var customizeContainer = getPortalContainer(getContainer);
+  var _React$useState3 = React.useState(function () {
+    return getPortalContainer(getContainer);
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      innerContainer = _React$useState4[0],
+      setInnerContainer = _React$useState4[1];
+
+  React.useEffect(function () {
+    var customizeContainer = getPortalContainer(getContainer); // Tell component that we check this in effect which is safe to be `null`
 
-  var _useDom = useDom(mergedRender && !customizeContainer),
+    setInnerContainer(customizeContainer !== null && customizeContainer !== void 0 ? customizeContainer : null);
+  });
+
+  var _useDom = useDom(mergedRender && !innerContainer, debug),
       _useDom2 = _slicedToArray(_useDom, 2),
       defaultContainer = _useDom2[0],
       queueCreate = _useDom2[1];
 
-  var mergedContainer = customizeContainer || defaultContainer; // ========================= Render ==========================
+  var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer; // ========================= Render ==========================
   // Do not render when nothing need render
+  // When innerContainer is `undefined`, it may not ready since user use ref in the same render
 
-  if (!mergedRender || !canUseDom()) {
+  if (!mergedRender || !canUseDom() || innerContainer === undefined) {
     return null;
-  }
+  } // Render inline
+
 
-  console.log(inlineMock());
+  var renderInline = mergedContainer === false || inlineMock();
   return /*#__PURE__*/React.createElement(OrderContext.Provider, {
     value: queueCreate
-  }, inlineMock() ? children : /*#__PURE__*/createPortal(children, mergedContainer));
+  }, renderInline ? children : /*#__PURE__*/createPortal(children, mergedContainer));
 }

package/es/useDom.d.ts

@@ -3,4 +3,4 @@ import type { QueueCreate } from './Context';
  * 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];

package/es/useDom.js

@@ -9,9 +9,14 @@ var EMPTY_LIST = [];
  * @param render Render DOM in document
  */
 
-export default function useDom(render) {
+export default function useDom(render, debug) {
   var _React$useState = React.useState(function () {
     var defaultEle = document.createElement('div');
+
+    if (process.env.NODE_ENV !== 'production' && debug) {
+      defaultEle.setAttribute('data-debug', debug);
+    }
+
     return defaultEle;
   }),
       _React$useState2 = _slicedToArray(_React$useState, 1),
@@ -27,7 +32,8 @@ export default function useDom(render) {
 
   var mergedQueueCreate = queueCreate || function (appendFn) {
     setQueue(function (origin) {
-      return [appendFn].concat(_toConsumableArray(origin));
+      var newQueue = [appendFn].concat(_toConsumableArray(origin));
+      return newQueue;
     });
   }; // =========================== DOM ===========================
 

package/lib/Portal.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare type ContainerType = Element | DocumentFragment;
-export declare type GetContainer = string | ContainerType | (() => ContainerType);
+export declare type GetContainer = string | ContainerType | (() => ContainerType) | false;
 export interface PortalProps {
     /** Customize container element. Default will create a div in document.body when `open` */
     getContainer?: GetContainer;
@@ -9,5 +9,7 @@ export interface PortalProps {
     open?: boolean;
     /** Lock screen scroll when open */
     autoLock?: boolean;
+    /** @private debug name. Do not use in prod */
+    debug?: string;
 }
 export default function Portal(props: PortalProps): JSX.Element;

package/lib/Portal.js

@@ -26,7 +26,11 @@ var _useScrollLocker = _interopRequireDefault(require("./useScrollLocker"));
 var _mock = require("./mock");
 
 var getPortalContainer = function getPortalContainer(getContainer) {
-  if (!(0, _canUseDom.default)()) {
+  if (getContainer === false) {
+    return false;
+  }
+
+  if (!(0, _canUseDom.default)() || !getContainer) {
     return null;
   }
 
@@ -45,6 +49,7 @@ function Portal(props) {
   var open = props.open,
       autoLock = props.autoLock,
       getContainer = props.getContainer,
+      debug = props.debug,
       children = props.children;
 
   var _React$useState = React.useState(open),
@@ -58,22 +63,35 @@ function Portal(props) {
     setMergedRender(open);
   }, [open]); // ======================== Container ========================
 
-  var customizeContainer = getPortalContainer(getContainer);
+  var _React$useState3 = React.useState(function () {
+    return getPortalContainer(getContainer);
+  }),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      innerContainer = _React$useState4[0],
+      setInnerContainer = _React$useState4[1];
+
+  React.useEffect(function () {
+    var customizeContainer = getPortalContainer(getContainer); // Tell component that we check this in effect which is safe to be `null`
 
-  var _useDom = (0, _useDom3.default)(mergedRender && !customizeContainer),
+    setInnerContainer(customizeContainer !== null && customizeContainer !== void 0 ? customizeContainer : null);
+  });
+
+  var _useDom = (0, _useDom3.default)(mergedRender && !innerContainer, debug),
       _useDom2 = (0, _slicedToArray2.default)(_useDom, 2),
       defaultContainer = _useDom2[0],
       queueCreate = _useDom2[1];
 
-  var mergedContainer = customizeContainer || defaultContainer; // ========================= Render ==========================
+  var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer; // ========================= Render ==========================
   // Do not render when nothing need render
+  // When innerContainer is `undefined`, it may not ready since user use ref in the same render
 
-  if (!mergedRender || !(0, _canUseDom.default)()) {
+  if (!mergedRender || !(0, _canUseDom.default)() || innerContainer === undefined) {
     return null;
-  }
+  } // Render inline
+
 
-  console.log((0, _mock.inlineMock)());
+  var renderInline = mergedContainer === false || (0, _mock.inlineMock)();
   return /*#__PURE__*/React.createElement(_Context.default.Provider, {
     value: queueCreate
-  }, (0, _mock.inlineMock)() ? children : /*#__PURE__*/(0, _reactDom.createPortal)(children, mergedContainer));
+  }, renderInline ? children : /*#__PURE__*/(0, _reactDom.createPortal)(children, mergedContainer));
 }

package/lib/useDom.d.ts

@@ -3,4 +3,4 @@ import type { QueueCreate } from './Context';
  * 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];

package/lib/useDom.js

@@ -25,9 +25,14 @@ var EMPTY_LIST = [];
  * @param render Render DOM in document
  */
 
-function useDom(render) {
+function useDom(render, debug) {
   var _React$useState = React.useState(function () {
     var defaultEle = document.createElement('div');
+
+    if (process.env.NODE_ENV !== 'production' && debug) {
+      defaultEle.setAttribute('data-debug', debug);
+    }
+
     return defaultEle;
   }),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
@@ -43,7 +48,8 @@ function useDom(render) {
 
   var mergedQueueCreate = queueCreate || function (appendFn) {
     setQueue(function (origin) {
-      return [appendFn].concat((0, _toConsumableArray2.default)(origin));
+      var newQueue = [appendFn].concat((0, _toConsumableArray2.default)(origin));
+      return newQueue;
     });
   }; // =========================== DOM ===========================
 

package/package.json

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