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

package/es/Portal.d.ts

@@ -1,13 +1,17 @@
 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;
     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;
+    /** @private debug name. Do not use in prod */
+    debug?: string;
 }
 export default function Portal(props: PortalProps): JSX.Element;

package/es/Portal.js

@@ -1,4 +1,4 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import canUseDom from "rc-util/es/Dom/canUseDom";
@@ -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,35 +31,54 @@ export default function Portal(props) {
   var open = props.open,
       autoLock = props.autoLock,
       getContainer = props.getContainer,
+      debug = props.debug,
+      _props$autoDestroy = props.autoDestroy,
+      autoDestroy = _props$autoDestroy === void 0 ? true : _props$autoDestroy,
       children = props.children;
 
   var _React$useState = React.useState(open),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       mergedRender = _React$useState2[0],
-      setMergedRender = _React$useState2[1];
+      setMergedRender = _React$useState2[1]; // ====================== Should Render ======================
+
+
+  React.useEffect(function () {
+    if (autoDestroy || open) {
+      setMergedRender(open);
+    }
+  }, [open, autoDestroy]); // ======================== Container ========================
 
-  useScrollLocker(autoLock && open); // ====================== Should Render ======================
+  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 () {
-    setMergedRender(open);
-  }, [open]); // ======================== Container ========================
+    var customizeContainer = getPortalContainer(getContainer); // Tell component that we check this in effect which is safe to be `null`
 
-  var customizeContainer = getPortalContainer(getContainer);
+    setInnerContainer(customizeContainer !== null && customizeContainer !== void 0 ? customizeContainer : null);
+  });
 
-  var _useDom = useDom(mergedRender && !customizeContainer),
+  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; // ========================= Locker ==========================
+
+  useScrollLocker(autoLock && open && canUseDom() && (mergedContainer === defaultContainer || mergedContainer === document.body)); // ========================= 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

@@ -1,7 +1,8 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
+import canUseDom from "rc-util/es/Dom/canUseDom";
 import OrderContext from "./Context";
 var EMPTY_LIST = [];
 /**
@@ -9,9 +10,18 @@ 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 () {
+    if (!canUseDom()) {
+      return null;
+    }
+
     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 +37,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/es/useScrollLocker.js

@@ -1,43 +1,32 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { updateCSS, removeCSS } from "rc-util/es/Dom/dynamicCSS";
+import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
 import getScrollBarSize from "rc-util/es/getScrollBarSize";
-var lockCount = 0;
-var locked = false;
+import { isBodyOverflowing } from "./util";
 var UNIQUE_ID = "rc-util-locker-".concat(Date.now());
+var uuid = 0;
+export default function useScrollLocker(lock) {
+  var mergedLock = !!lock;
 
-function syncLocker() {
-  var nextLocked = lockCount > 0;
-
-  if (locked !== nextLocked) {
-    locked = nextLocked;
+  var _React$useState = React.useState(function () {
+    uuid += 1;
+    return "".concat(UNIQUE_ID, "_").concat(uuid);
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 1),
+      id = _React$useState2[0];
 
-    if (locked) {
+  useLayoutEffect(function () {
+    if (mergedLock) {
       var scrollbarSize = getScrollBarSize();
-      updateCSS("\nhtml body {\n  overflow-y: hidden;\n  width: calc(100% - ".concat(scrollbarSize, "px);\n}"), UNIQUE_ID);
+      var isOverflow = isBodyOverflowing();
+      updateCSS("\nhtml body {\n  overflow-y: hidden;\n  ".concat(isOverflow ? "width: calc(100% - ".concat(scrollbarSize, "px);") : '', "\n}"), id);
     } else {
-      removeCSS(UNIQUE_ID);
+      removeCSS(id);
     }
-  }
-}
 
-export default function useScrollLocker(lock) {
-  React.useLayoutEffect(function () {
-    if (lock) {
-      lockCount += 1;
-      syncLocker();
-    } else {
-      lockCount -= 1;
-      syncLocker();
-    }
-  }, [lock]);
-  var lockRef = React.useRef(lock);
-  lockRef.current = lock;
-  React.useLayoutEffect(function () {
     return function () {
-      if (lockRef.current) {
-        lockCount -= 1;
-        syncLocker();
-      }
+      removeCSS(id);
     };
-  }, []);
+  }, [mergedLock, id]);
 }

package/es/util.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Test usage export. Do not use in your production
+ */
+export declare function isBodyOverflowing(): boolean;

package/es/util.js

@@ -0,0 +1,6 @@
+/**
+ * Test usage export. Do not use in your production
+ */
+export function isBodyOverflowing() {
+  return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth;
+}

package/lib/Portal.d.ts

@@ -1,13 +1,17 @@
 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;
     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;
+    /** @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,35 +49,54 @@ function Portal(props) {
   var open = props.open,
       autoLock = props.autoLock,
       getContainer = props.getContainer,
+      debug = props.debug,
+      _props$autoDestroy = props.autoDestroy,
+      autoDestroy = _props$autoDestroy === void 0 ? true : _props$autoDestroy,
       children = props.children;
 
   var _React$useState = React.useState(open),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       mergedRender = _React$useState2[0],
-      setMergedRender = _React$useState2[1];
+      setMergedRender = _React$useState2[1]; // ====================== Should Render ======================
 
-  (0, _useScrollLocker.default)(autoLock && open); // ====================== Should Render ======================
 
   React.useEffect(function () {
-    setMergedRender(open);
-  }, [open]); // ======================== Container ========================
+    if (autoDestroy || open) {
+      setMergedRender(open);
+    }
+  }, [open, autoDestroy]); // ======================== Container ========================
+
+  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 customizeContainer = getPortalContainer(getContainer);
+    setInnerContainer(customizeContainer !== null && customizeContainer !== void 0 ? customizeContainer : null);
+  });
 
-  var _useDom = (0, _useDom3.default)(mergedRender && !customizeContainer),
+  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; // ========================= Locker ==========================
+
+  (0, _useScrollLocker.default)(autoLock && open && (0, _canUseDom.default)() && (mergedContainer === defaultContainer || mergedContainer === document.body)); // ========================= 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

@@ -17,6 +17,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
 
+var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
+
 var _Context = _interopRequireDefault(require("./Context"));
 
 var EMPTY_LIST = [];
@@ -25,9 +27,18 @@ var EMPTY_LIST = [];
  * @param render Render DOM in document
  */
 
-function useDom(render) {
+function useDom(render, debug) {
   var _React$useState = React.useState(function () {
+    if (!(0, _canUseDom.default)()) {
+      return null;
+    }
+
     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 +54,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/lib/useScrollLocker.js

@@ -1,57 +1,50 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useScrollLocker;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _dynamicCSS = require("rc-util/lib/Dom/dynamicCSS");
 
+var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
+
 var _getScrollBarSize = _interopRequireDefault(require("rc-util/lib/getScrollBarSize"));
 
-var lockCount = 0;
-var locked = false;
+var _util = require("./util");
+
 var UNIQUE_ID = "rc-util-locker-".concat(Date.now());
+var uuid = 0;
 
-function syncLocker() {
-  var nextLocked = lockCount > 0;
+function useScrollLocker(lock) {
+  var mergedLock = !!lock;
 
-  if (locked !== nextLocked) {
-    locked = nextLocked;
+  var _React$useState = React.useState(function () {
+    uuid += 1;
+    return "".concat(UNIQUE_ID, "_").concat(uuid);
+  }),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
+      id = _React$useState2[0];
 
-    if (locked) {
+  (0, _useLayoutEffect.default)(function () {
+    if (mergedLock) {
       var scrollbarSize = (0, _getScrollBarSize.default)();
-      (0, _dynamicCSS.updateCSS)("\nhtml body {\n  overflow-y: hidden;\n  width: calc(100% - ".concat(scrollbarSize, "px);\n}"), UNIQUE_ID);
+      var isOverflow = (0, _util.isBodyOverflowing)();
+      (0, _dynamicCSS.updateCSS)("\nhtml body {\n  overflow-y: hidden;\n  ".concat(isOverflow ? "width: calc(100% - ".concat(scrollbarSize, "px);") : '', "\n}"), id);
     } else {
-      (0, _dynamicCSS.removeCSS)(UNIQUE_ID);
+      (0, _dynamicCSS.removeCSS)(id);
     }
-  }
-}
 
-function useScrollLocker(lock) {
-  React.useLayoutEffect(function () {
-    if (lock) {
-      lockCount += 1;
-      syncLocker();
-    } else {
-      lockCount -= 1;
-      syncLocker();
-    }
-  }, [lock]);
-  var lockRef = React.useRef(lock);
-  lockRef.current = lock;
-  React.useLayoutEffect(function () {
     return function () {
-      if (lockRef.current) {
-        lockCount -= 1;
-        syncLocker();
-      }
+      (0, _dynamicCSS.removeCSS)(id);
     };
-  }, []);
+  }, [mergedLock, id]);
 }

package/lib/util.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Test usage export. Do not use in your production
+ */
+export declare function isBodyOverflowing(): boolean;

package/lib/util.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isBodyOverflowing = isBodyOverflowing;
+
+/**
+ * Test usage export. Do not use in your production
+ */
+function isBodyOverflowing() {
+  return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/portal",
-  "version": "1.0.0-1",
+  "version": "1.0.0-10",
   "description": "React Portal Component",
   "keywords": [
     "react",
@@ -36,12 +36,15 @@
     "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
     "start": "dumi dev",
-    "test": "umi-test",
-    "test:coverage": "umi-test --coverage",
+    "test": "npm run test:client && npm run test:server",
+    "test:client": "umi-test --testPathIgnorePatterns=ssr.test.tsx --testPathIgnorePatterns=ssr.test.tsx",
+    "test:coverage": "npm run test:client --coverage",
+    "test:server": "umi-test --env=node tests/ssr.test.tsx",
     "watch": "father dev"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.0",
+    "classnames": "^2.3.2",
     "rc-util": "^5.8.0"
   },
   "devDependencies": {