@uiw/react-portal - npm Package Compare versions

Comparing version 4.3.1 to 4.4.0

lib/cjs/index.d.ts

 import React from 'react';
 export interface PortalProps {
+    children?: React.ReactNode;
     /**
      * Callback invoked when the children of this `Portal` have been added to the DOM.
      */
-    onChildrenMount?: () => void;
+    onChildrenMount?: (portalElement: HTMLElement) => void;
     /**
@@ -12,2 +13,3 @@ * The HTML element that children will be mounted to.
     container?: HTMLElement;
+    visible?: boolean;
 }
@@ -17,12 +19,2 @@ export interface PortalState {
 }
-export default class Portal extends React.Component<PortalProps> {
-    static defaultProps: PortalProps;
-    state: PortalState;
-    private portalElement;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    private createContainerElement;
-    unstableRenderNoPortal(): void;
-}
+export default function Portal(props?: PortalProps): JSX.Element;

lib/cjs/index.js

@@ -10,14 +10,6 @@ "use strict";
 });
-exports.default = void 0;
+exports.default = Portal;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _react = _interopRequireWildcard(require("react"));
@@ -27,100 +19,63 @@
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function Portal() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var children = props.children,
+      _props$container = props.container,
+      body = _props$container === void 0 ? typeof document !== 'undefined' ? document.body : undefined : _props$container,
+      visible = props.visible,
+      onChildrenMount = props.onChildrenMount;
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      hasMounted = _useState2[0],
+      setHasMounted = _useState2[1];
 
-/** Detect if `React.createPortal()` API method does not exist. */
-var cannotCreatePortal = !(typeof _reactDom.default.createPortal === 'function');
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      portalElement = _useState4[0],
+      setPortalElement = _useState4[1];
 
-var Portal = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Portal, _React$Component);
-
-  var _super = _createSuper(Portal);
-
-  function Portal() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Portal);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.state = {
-      hasMounted: false
+  (0, _react.useEffect)(function () {
+    // Component Will Unmount
+    return function () {
+      if (portalElement) {
+        portalElement.remove();
+      }
     };
-    _this.portalElement = void 0;
-    return _this;
-  }
-
-  (0, _createClass2.default)(Portal, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (!this.props.container) {
-        return;
+  }, []);
+  (0, _react.useMemo)(function () {
+    if (visible && body) {
+      if (!portalElement) {
+        var elm = document.createElement('div');
+        setPortalElement(elm);
+        body.appendChild(elm);
       }
-
-      this.portalElement = this.createContainerElement();
-      this.props.container.appendChild(this.portalElement);
-      this.setState({
-        hasMounted: true
-      }, this.props.onChildrenMount);
-
-      if (cannotCreatePortal) {
-        this.unstableRenderNoPortal();
-      }
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      if (cannotCreatePortal) {
-        this.unstableRenderNoPortal();
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.portalElement != null) {
-        if (cannotCreatePortal) {
-          _reactDom.default.unmountComponentAtNode(this.portalElement);
-        }
 
-        this.portalElement.remove();
-      }
+    if (!visible && portalElement) {
+      setHasMounted(false);
+      setPortalElement(undefined);
+      var timer = setTimeout(function () {
+        portalElement && portalElement.remove();
+        clearTimeout(timer);
+      });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      // Only render `children` once this component has mounted in a browser environment,
-      // so they are immediately attached to the DOM tree.
-      // See long comment on componentDidMount in https://reactjs.org/docs/portals.html#event-bubbling-through-portals
-      if (cannotCreatePortal || typeof document === 'undefined' || !this.state.hasMounted) {
-        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null);
-      } else {
-        return /*#__PURE__*/_reactDom.default.createPortal(this.props.children, this.portalElement);
-      }
+  }, [visible]);
+  (0, _react.useMemo)(function () {
+    if (portalElement && !hasMounted) {
+      setHasMounted(true);
+      onChildrenMount && onChildrenMount(portalElement);
     }
-  }, {
-    key: "createContainerElement",
-    value: function createContainerElement() {
-      var container = document.createElement('div');
-      return container;
-    }
-  }, {
-    key: "unstableRenderNoPortal",
-    value: function unstableRenderNoPortal() {
-      _reactDom.default.unstable_renderSubtreeIntoContainer(
-      /* parentComponent */
-      this, /*#__PURE__*/_react.default.createElement("div", null, this.props.children), this.portalElement);
-    }
-  }]);
-  return Portal;
-}(_react.default.Component);
+  }, [portalElement, hasMounted]); // Only render `children` once this component has mounted in a browser environment,
+  // so they are immediately attached to the DOM tree.
+  // See long comment on componentDidMount in https://reactjs.org/docs/portals.html#event-bubbling-through-portals
 
-exports.default = Portal;
-Portal.defaultProps = {
-  container: typeof document !== 'undefined' ? document.body : undefined
-};
+  if (typeof document === 'undefined' || !hasMounted) {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null);
+  } else {
+    return /*#__PURE__*/_reactDom.default.createPortal(children, portalElement);
+  }
+}
+
 module.exports = exports.default; 
 //# sourceMappingURL=index.js.map

lib/esm/index.d.ts

 import React from 'react';
 export interface PortalProps {
+    children?: React.ReactNode;
     /**
      * Callback invoked when the children of this `Portal` have been added to the DOM.
      */
-    onChildrenMount?: () => void;
+    onChildrenMount?: (portalElement: HTMLElement) => void;
     /**
@@ -12,2 +13,3 @@ * The HTML element that children will be mounted to.
     container?: HTMLElement;
+    visible?: boolean;
 }
@@ -17,12 +19,2 @@ export interface PortalState {
 }
-export default class Portal extends React.Component<PortalProps> {
-    static defaultProps: PortalProps;
-    state: PortalState;
-    private portalElement;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    private createContainerElement;
-    unstableRenderNoPortal(): void;
-}
+export default function Portal(props?: PortalProps): JSX.Element;

lib/esm/index.js

@@ -1,108 +0,63 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-import React, { Fragment } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { Fragment, useEffect, useState, useMemo } from 'react';
 import ReactDOM from 'react-dom';
+export default function Portal() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var children = props.children,
+      _props$container = props.container,
+      body = _props$container === void 0 ? typeof document !== 'undefined' ? document.body : undefined : _props$container,
+      visible = props.visible,
+      onChildrenMount = props.onChildrenMount;
 
-/** Detect if `React.createPortal()` API method does not exist. */
-var cannotCreatePortal = !(typeof ReactDOM.createPortal === 'function');
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasMounted = _useState2[0],
+      setHasMounted = _useState2[1];
 
-var Portal = /*#__PURE__*/function (_React$Component) {
-  _inherits(Portal, _React$Component);
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      portalElement = _useState4[0],
+      setPortalElement = _useState4[1];
 
-  var _super = _createSuper(Portal);
-
-  function Portal() {
-    var _this;
-
-    _classCallCheck(this, Portal);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.state = {
-      hasMounted: false
+  useEffect(function () {
+    // Component Will Unmount
+    return function () {
+      if (portalElement) {
+        portalElement.remove();
+      }
     };
-    _this.portalElement = void 0;
-    return _this;
-  }
-
-  _createClass(Portal, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (!this.props.container) {
-        return;
+  }, []);
+  useMemo(function () {
+    if (visible && body) {
+      if (!portalElement) {
+        var elm = document.createElement('div');
+        setPortalElement(elm);
+        body.appendChild(elm);
       }
-
-      this.portalElement = this.createContainerElement();
-      this.props.container.appendChild(this.portalElement);
-      this.setState({
-        hasMounted: true
-      }, this.props.onChildrenMount);
-
-      if (cannotCreatePortal) {
-        this.unstableRenderNoPortal();
-      }
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      if (cannotCreatePortal) {
-        this.unstableRenderNoPortal();
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.portalElement != null) {
-        if (cannotCreatePortal) {
-          ReactDOM.unmountComponentAtNode(this.portalElement);
-        }
 
-        this.portalElement.remove();
-      }
+    if (!visible && portalElement) {
+      setHasMounted(false);
+      setPortalElement(undefined);
+      var timer = setTimeout(function () {
+        portalElement && portalElement.remove();
+        clearTimeout(timer);
+      });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      // Only render `children` once this component has mounted in a browser environment,
-      // so they are immediately attached to the DOM tree.
-      // See long comment on componentDidMount in https://reactjs.org/docs/portals.html#event-bubbling-through-portals
-      if (cannotCreatePortal || typeof document === 'undefined' || !this.state.hasMounted) {
-        return /*#__PURE__*/React.createElement(Fragment, null);
-      } else {
-        return /*#__PURE__*/ReactDOM.createPortal(this.props.children, this.portalElement);
-      }
+  }, [visible]);
+  useMemo(function () {
+    if (portalElement && !hasMounted) {
+      setHasMounted(true);
+      onChildrenMount && onChildrenMount(portalElement);
     }
-  }, {
-    key: "createContainerElement",
-    value: function createContainerElement() {
-      var container = document.createElement('div');
-      return container;
-    }
-  }, {
-    key: "unstableRenderNoPortal",
-    value: function unstableRenderNoPortal() {
-      ReactDOM.unstable_renderSubtreeIntoContainer(
-      /* parentComponent */
-      this, /*#__PURE__*/React.createElement("div", null, this.props.children), this.portalElement);
-    }
-  }]);
+  }, [portalElement, hasMounted]); // Only render `children` once this component has mounted in a browser environment,
+  // so they are immediately attached to the DOM tree.
+  // See long comment on componentDidMount in https://reactjs.org/docs/portals.html#event-bubbling-through-portals
 
-  return Portal;
-}(React.Component);
-
-Portal.defaultProps = {
-  container: typeof document !== 'undefined' ? document.body : undefined
-};
-export { Portal as default }; 
+  if (typeof document === 'undefined' || !hasMounted) {
+    return /*#__PURE__*/React.createElement(Fragment, null);
+  } else {
+    return /*#__PURE__*/ReactDOM.createPortal(children, portalElement);
+  }
+} 
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@uiw/react-portal",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "Portal component",
@@ -53,3 +53,3 @@ "author": "Kenny Wong <[e-mail]>",
   },
-  "gitHead": "f469dd7fc4c211873d65efcc065e2d0de2c64fed"
+  "gitHead": "efc1f4d8d93eb92af00649e92dd922b3074b0cab"
 }

README.md

@@ -19,3 +19,3 @@ Portal 入口
   return (
-    <Portal className="name">
+    <Portal className="name" visible={true}>
       容器内显示内容
@@ -32,3 +32,4 @@ </Portal>
 | className | 指定样式名 | string | - |
+| visible | 当值为 `true` 的时候才会创建 `createPortal`，可避免初始化创建多余的 `dom` 节点挂载 | boolean | - |
 | container | 指定容器节点生成，服务端渲染默认为 `null` | any | `document.body` |
 | onChildrenMount | 渲染后的回调函数 | () => void | - |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

33

increased by3.13%

Worsened metrics

Total package byte prevSize

19356

decreased by-19.31%

Lines of code

227

decreased by-29.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes