react-relative-portal - npm Package Compare versions

Comparing version 1.4.2 to 1.5.0

dist/Portal.js

@@ -27,4 +27,2 @@ 'use strict';
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -46,36 +44,17 @@
       _this.node = document.createElement('div');
-      document.body.appendChild(_this.node);
-
       _this.root = null;
       _this.handleRootRef = function (root) {
-        if (root !== _this.root) {
-          if (_this.root) {
-            _this.root.removeEventListener('click', _this.handleInClick);
-          }
-          if (root) {
-            root.addEventListener('click', _this.handleInClick);
-          }
-        }
         _this.root = root;
       };
 
-      // The previous implementation triggered `onOutClick` after a click in the `Portal` content
-      // if it gets re-rendered during that click. It assumed that if the clicked element
-      // is not found in the root element via `root.contains(e.target)`, it's outside.
-      // But if after re-render the clicked element gets removed from the DOM, so it cannot be found
-      // in the root element. Instead we capture and flag the click event before it bubbles up
-      // to the `document` to be handled by `handleOutClick`.
-      _this.isInClick = false;
-      _this.handleInClick = function () {
-        _this.isInClick = true;
-      };
-
       _this.handleOutClick = function (e) {
-        var isOutClick = !_this.isInClick;
-        _this.isInClick = false;
-
         var onOutClick = _this.props.onOutClick;
 
-        if (isOutClick && typeof onOutClick === 'function') {
-          onOutClick(e);
+        if (typeof onOutClick === 'function') {
+          if (_this.root && !_this.root.contains(e.target)) {
+            onOutClick(e);
+          }
+          if (!_this.root) {
+            onOutClick(e);
+          }
         }
@@ -90,10 +69,7 @@ };
   _createClass(Portal, [{
-    key: 'componentWillUpdate',
-    value: function componentWillUpdate(_ref) {
-      var onOutClick = _ref.onOutClick,
-          props = _objectWithoutProperties(_ref, ['onOutClick']);
-
-      // eslint-disable-line no-unused-vars
-      // It's recommended to use `ref` callbacks instead of `findDOMNode`. https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md
-      _reactDom2.default.unstable_renderSubtreeIntoContainer(this, _react2.default.createElement('div', _extends({}, props, { ref: this.handleRootRef })), this.node);
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (_exenv.canUseDOM) {
+        document.body.appendChild(this.node);
+      }
     }
@@ -104,7 +80,3 @@ }, {
       if (_exenv.canUseDOM) {
-        // `this.handleRootRef` won't be called with `null`, so cleanup here.
-        if (this.root) {
-          this.root.removeEventListener('click', this.handleInClick);
-        }
-        document.removeEventListener('click', this.handleOutClick);
+        document.removeEventListener('click', this.handleOutClick, true);
         document.body.removeChild(this.node);
@@ -116,3 +88,3 @@ }
     value: function render() {
-      return null;
+      return _reactDom2.default.createPortal(_react2.default.createElement('div', _extends({}, this.props, { ref: this.handleRootRef })), this.node);
     }
@@ -119,0 +91,0 @@ }]);

package.json

 {
   "name": "react-relative-portal",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "React component for place dropdowns outside overflow: hidden; elements",
@@ -51,5 +51,5 @@ "main": "dist/RelativePortal.js",
   "peerDependencies": {
-    "react": ">=0.14.0",
-    "react-dom": ">=0.14.0"
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0"
   }
 }

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

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

Worsened metrics

Total package byte prevSize

15961

decreased by-8.99%

Lines of code

224

decreased by-9.31%

No dependency changes