@rc-component/portal - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

es/mock.js

@@ -6,4 +6,3 @@ export var inline = false;
   }
-
   return inline;
 }

es/Portal.js

@@ -5,2 +5,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import canUseDom from "rc-util/es/Dom/canUseDom";
+import warning from "rc-util/es/warning";
 import { supportRef, useComposeRef } from "rc-util/es/ref";
@@ -11,3 +12,2 @@ import OrderContext from "./Context";
 import { inlineMock } from "./mock";
-
 var getPortalContainer = function getPortalContainer(getContainer) {
@@ -17,34 +17,33 @@ if (getContainer === false) {
   }
-
   if (!canUseDom() || !getContainer) {
     return null;
   }
-
   if (typeof getContainer === 'string') {
     return document.querySelector(getContainer);
   }
-
   if (typeof getContainer === 'function') {
     return getContainer();
   }
-
   return getContainer;
 };
-
 var Portal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   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;
-
+    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),
-      shouldRender = _React$useState2[0],
-      setShouldRender = _React$useState2[1];
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    shouldRender = _React$useState2[0],
+    setShouldRender = _React$useState2[1];
+  var mergedRender = shouldRender || open;
 
-  var mergedRender = shouldRender || open; // ====================== Should Render ======================
+  // ========================= Warning =========================
+  if (process.env.NODE_ENV !== 'production') {
+    warning(canUseDom() || !open, "Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.");
+  }
 
+  // ====================== Should Render ======================
   React.useEffect(function () {
@@ -54,28 +53,28 @@ if (autoDestroy || open) {
     }
-  }, [open, autoDestroy]); // ======================== Container ========================
+  }, [open, autoDestroy]);
 
+  // ======================== Container ========================
   var _React$useState3 = React.useState(function () {
-    return getPortalContainer(getContainer);
-  }),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      innerContainer = _React$useState4[0],
-      setInnerContainer = _React$useState4[1];
-
+      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 customizeContainer = getPortalContainer(getContainer);
 
+    // Tell component that we check this in effect which is safe to be `null`
     setInnerContainer(customizeContainer !== null && customizeContainer !== void 0 ? customizeContainer : null);
   });
-
   var _useDom = useDom(mergedRender && !innerContainer, debug),
-      _useDom2 = _slicedToArray(_useDom, 2),
-      defaultContainer = _useDom2[0],
-      queueCreate = _useDom2[1];
+    _useDom2 = _slicedToArray(_useDom, 2),
+    defaultContainer = _useDom2[0],
+    queueCreate = _useDom2[1];
+  var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer;
 
-  var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer; // ========================= Locker ==========================
+  // ========================= Locker ==========================
+  useScrollLocker(autoLock && open && canUseDom() && (mergedContainer === defaultContainer || mergedContainer === document.body));
 
-  useScrollLocker(autoLock && open && canUseDom() && (mergedContainer === defaultContainer || mergedContainer === document.body)); // =========================== Ref ===========================
-
+  // =========================== Ref ===========================
   var childRef = null;
-
   if (children && supportRef(children) && ref) {
@@ -85,15 +84,14 @@ var _ref = children;
   }
+  var mergedRef = useComposeRef(childRef, ref);
 
-  var mergedRef = useComposeRef(childRef, ref); // ========================= Render ==========================
+  // ========================= 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() || innerContainer === undefined) {
     return null;
-  } // Render inline
+  }
 
-
+  // Render inline
   var renderInline = mergedContainer === false || inlineMock();
   var reffedChildren = children;
-
   if (ref) {
@@ -104,3 +102,2 @@ reffedChildren = /*#__PURE__*/React.cloneElement(children, {
   }
-
   return /*#__PURE__*/React.createElement(OrderContext.Provider, {
@@ -110,7 +107,5 @@ value: queueCreate
 });
-
 if (process.env.NODE_ENV !== 'production') {
   Portal.displayName = 'Portal';
 }
-
 export default Portal;

es/useDom.js

@@ -8,2 +8,3 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 var EMPTY_LIST = [];
+
 /**
@@ -13,29 +14,23 @@ * Will add `div` to document. Nest call will keep order
  */
-
 export default function useDom(render, debug) {
   var _React$useState = React.useState(function () {
-    if (!canUseDom()) {
-      return null;
-    }
+      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),
+    ele = _React$useState2[0];
 
-    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),
-      ele = _React$useState2[0]; // ========================== Order ==========================
-
-
+  // ========================== Order ==========================
   var appendedRef = React.useRef(false);
   var queueCreate = React.useContext(OrderContext);
-
   var _React$useState3 = React.useState(EMPTY_LIST),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      queue = _React$useState4[0],
-      setQueue = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    queue = _React$useState4[0],
+    setQueue = _React$useState4[1];
   var mergedQueueCreate = queueCreate || (appendedRef.current ? undefined : function (appendFn) {
@@ -46,4 +41,5 @@ setQueue(function (origin) {
     });
-  }); // =========================== DOM ===========================
+  });
 
+  // =========================== DOM ===========================
   function append() {
@@ -53,13 +49,9 @@ if (!ele.parentElement) {
     }
-
     appendedRef.current = true;
   }
-
   function cleanup() {
     var _ele$parentElement;
-
     (_ele$parentElement = ele.parentElement) === null || _ele$parentElement === void 0 ? void 0 : _ele$parentElement.removeChild(ele);
     appendedRef.current = false;
   }
-
   useLayoutEffect(function () {
@@ -75,3 +67,2 @@ if (render) {
     }
-
     return cleanup;
@@ -78,0 +69,0 @@ }, [render]);

es/useScrollLocker.js

@@ -11,10 +11,8 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
   var mergedLock = !!lock;
-
   var _React$useState = React.useState(function () {
-    uuid += 1;
-    return "".concat(UNIQUE_ID, "_").concat(uuid);
-  }),
-      _React$useState2 = _slicedToArray(_React$useState, 1),
-      id = _React$useState2[0];
-
+      uuid += 1;
+      return "".concat(UNIQUE_ID, "_").concat(uuid);
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 1),
+    id = _React$useState2[0];
   useLayoutEffect(function () {
@@ -28,3 +26,2 @@ if (mergedLock) {
     }
-
     return function () {
@@ -31,0 +28,0 @@ removeCSS(id);

lib/Context.js

 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,7 +8,5 @@ value: true
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var OrderContext = /*#__PURE__*/React.createContext(null);
 var _default = OrderContext;
 exports.default = _default;

lib/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -15,8 +14,5 @@ value: true
 });
-
 var _Portal = _interopRequireDefault(require("./Portal"));
-
 var _mock = require("./mock");
-
 var _default = _Portal.default;
 exports.default = _default;

lib/mock.js

@@ -10,3 +10,2 @@ "use strict";
 exports.inline = inline;
-
 function inlineMock(nextInline) {
@@ -16,4 +15,3 @@ if (typeof nextInline === 'boolean') {
   }
-
   return inline;
 }

lib/Portal.js

 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,21 +9,12 @@ value: true
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactDom = require("react-dom");
-
 var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
-
+var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
 var _ref2 = require("rc-util/lib/ref");
-
 var _Context = _interopRequireDefault(require("./Context"));
-
 var _useDom3 = _interopRequireDefault(require("./useDom"));
-
 var _useScrollLocker = _interopRequireDefault(require("./useScrollLocker"));
-
 var _mock = require("./mock");
-
 var getPortalContainer = function getPortalContainer(getContainer) {
@@ -35,34 +24,33 @@ if (getContainer === false) {
   }
-
   if (!(0, _canUseDom.default)() || !getContainer) {
     return null;
   }
-
   if (typeof getContainer === 'string') {
     return document.querySelector(getContainer);
   }
-
   if (typeof getContainer === 'function') {
     return getContainer();
   }
-
   return getContainer;
 };
-
 var Portal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   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;
-
+    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),
-      shouldRender = _React$useState2[0],
-      setShouldRender = _React$useState2[1];
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    shouldRender = _React$useState2[0],
+    setShouldRender = _React$useState2[1];
+  var mergedRender = shouldRender || open;
 
-  var mergedRender = shouldRender || open; // ====================== Should Render ======================
+  // ========================= Warning =========================
+  if (process.env.NODE_ENV !== 'production') {
+    (0, _warning.default)((0, _canUseDom.default)() || !open, "Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.");
+  }
 
+  // ====================== Should Render ======================
   React.useEffect(function () {
@@ -72,28 +60,28 @@ if (autoDestroy || open) {
     }
-  }, [open, autoDestroy]); // ======================== Container ========================
+  }, [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];
-
+      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);
 
+    // Tell component that we check this in effect which is safe to be `null`
     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];
+    _useDom2 = (0, _slicedToArray2.default)(_useDom, 2),
+    defaultContainer = _useDom2[0],
+    queueCreate = _useDom2[1];
+  var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer;
 
-  var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer; // ========================= Locker ==========================
+  // ========================= Locker ==========================
+  (0, _useScrollLocker.default)(autoLock && open && (0, _canUseDom.default)() && (mergedContainer === defaultContainer || mergedContainer === document.body));
 
-  (0, _useScrollLocker.default)(autoLock && open && (0, _canUseDom.default)() && (mergedContainer === defaultContainer || mergedContainer === document.body)); // =========================== Ref ===========================
-
+  // =========================== Ref ===========================
   var childRef = null;
-
   if (children && (0, _ref2.supportRef)(children) && ref) {
@@ -103,15 +91,14 @@ var _ref = children;
   }
+  var mergedRef = (0, _ref2.useComposeRef)(childRef, ref);
 
-  var mergedRef = (0, _ref2.useComposeRef)(childRef, ref); // ========================= Render ==========================
+  // ========================= 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)() || innerContainer === undefined) {
     return null;
-  } // Render inline
+  }
 
-
+  // Render inline
   var renderInline = mergedContainer === false || (0, _mock.inlineMock)();
   var reffedChildren = children;
-
   if (ref) {
@@ -122,3 +109,2 @@ reffedChildren = /*#__PURE__*/React.cloneElement(children, {
   }
-
   return /*#__PURE__*/React.createElement(_Context.default.Provider, {
@@ -128,8 +114,6 @@ value: queueCreate
 });
-
 if (process.env.NODE_ENV !== 'production') {
   Portal.displayName = 'Portal';
 }
-
 var _default = Portal;
 exports.default = _default;

lib/useDom.js

 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,16 +9,10 @@ value: true
 exports.default = useDom;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 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 = [];
 
-var EMPTY_LIST = [];
 /**
@@ -30,29 +22,23 @@ * Will add `div` to document. Nest call will keep order
  */
-
 function useDom(render, debug) {
   var _React$useState = React.useState(function () {
-    if (!(0, _canUseDom.default)()) {
-      return null;
-    }
+      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),
+    ele = _React$useState2[0];
 
-    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),
-      ele = _React$useState2[0]; // ========================== Order ==========================
-
-
+  // ========================== Order ==========================
   var appendedRef = React.useRef(false);
   var queueCreate = React.useContext(_Context.default);
-
   var _React$useState3 = React.useState(EMPTY_LIST),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      queue = _React$useState4[0],
-      setQueue = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    queue = _React$useState4[0],
+    setQueue = _React$useState4[1];
   var mergedQueueCreate = queueCreate || (appendedRef.current ? undefined : function (appendFn) {
@@ -63,4 +49,5 @@ setQueue(function (origin) {
     });
-  }); // =========================== DOM ===========================
+  });
 
+  // =========================== DOM ===========================
   function append() {
@@ -70,13 +57,9 @@ if (!ele.parentElement) {
     }
-
     appendedRef.current = true;
   }
-
   function cleanup() {
     var _ele$parentElement;
-
     (_ele$parentElement = ele.parentElement) === null || _ele$parentElement === void 0 ? void 0 : _ele$parentElement.removeChild(ele);
     appendedRef.current = false;
   }
-
   (0, _useLayoutEffect.default)(function () {
@@ -92,3 +75,2 @@ if (render) {
     }
-
     return cleanup;
@@ -95,0 +77,0 @@ }, [render]);

lib/useScrollLocker.js

 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,28 +9,18 @@ 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 _util = require("./util");
-
 var UNIQUE_ID = "rc-util-locker-".concat(Date.now());
 var uuid = 0;
-
 function useScrollLocker(lock) {
   var mergedLock = !!lock;
-
   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];
-
+      uuid += 1;
+      return "".concat(UNIQUE_ID, "_").concat(uuid);
+    }),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
+    id = _React$useState2[0];
   (0, _useLayoutEffect.default)(function () {
@@ -46,3 +34,2 @@ if (mergedLock) {
     }
-
     return function () {
@@ -49,0 +36,0 @@ (0, _dynamicCSS.removeCSS)(id);

lib/util.js

@@ -7,3 +7,2 @@ "use strict";
 exports.isBodyOverflowing = isBodyOverflowing;
-
 /**
@@ -10,0 +9,0 @@ * Test usage export. Do not use in your production

package.json

 {
   "name": "@rc-component/portal",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "React Portal Component",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -12,3 +12,3 @@ # rc-portal
 [codecov-image]: https://img.shields.io/codecov/c/github/react-component/portal/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/react-component/portal/branch/master
+[codecov-url]: https://app.codecov.io/gh/react-component/portal
 [download-image]: https://img.shields.io/npm/dm/rc-portal.svg?style=flat-square
@@ -15,0 +15,0 @@ [download-url]: https://npmjs.org/package/rc-portal

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27514

2.04%

Lines of code

553

5.33%

Worsened metrics

Number of low supply chain risk alerts

6

50%

No dependency changes