react-onclickoutside - npm Package Compare versions

Comparing version 6.6.2 to 6.6.3

dist/react-onclickoutside.js

@@ -56,2 +56,25 @@ (function (global, factory) {
 
+// ideally will get replaced with external dep
+// when rafrex/detect-passive-events#4 and rafrex/detect-passive-events#5 get merged in
+var testPassiveEventSupport = function testPassiveEventSupport() {
+  if (typeof window === 'undefined' || typeof window.addEventListener !== 'function') {
+    return;
+  }
+
+  var passive = false;
+
+  var options = Object.defineProperty({}, 'passive', {
+    get: function get() {
+      passive = true;
+    }
+  });
+
+  var noop = function noop() {};
+
+  window.addEventListener('testPassiveEventSupport', noop, options);
+  window.removeEventListener('testPassiveEventSupport', noop, options);
+
+  return passive;
+};
+
 function autoInc() {
@@ -117,2 +140,4 @@ var seed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
 
+var passiveEventSupport = void 0;
+
 var handlersMap = {};
@@ -164,3 +189,10 @@ var enabledInstances = {};
       _this.enableOnClickOutside = function () {
-        if (typeof document === 'undefined' || enabledInstances[_this._uid]) return;
+        if (typeof document === 'undefined' || enabledInstances[_this._uid]) {
+          return;
+        }
+
+        if (typeof passiveEventSupport === 'undefined') {
+          passiveEventSupport = testPassiveEventSupport();
+        }
+
         enabledInstances[_this._uid] = true;
@@ -200,3 +232,3 @@
 
-          if (isTouchEvent) {
+          if (isTouchEvent && passiveEventSupport) {
             handlerOptions = { passive: !_this.props.preventDefault };
@@ -203,0 +235,0 @@ }

dist/react-onclickoutside.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t(e.onClickOutside={},e.React,e.ReactDOM)}(this,function(e,t,n){"use strict";function o(e,t,n){return e===t||(e.correspondingElement?e.correspondingElement.classList.contains(n):e.classList.contains(n))}function i(e,t,n){if(e===t)return!0;for(;e.parentNode;){if(o(e,t,n))return!0;e=e.parentNode}return e}function r(e){return document.documentElement.clientWidth<=e.clientX||document.documentElement.clientHeight<=e.clientY}var c=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return function(){return++e}}(),s=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},u=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},a=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},d={},l={},p=["touchstart","touchmove"],f="ignore-react-onclickoutside";e.IGNORE_CLASS_NAME=f,e.default=function(e,o){var h,O;return O=h=function(f){function h(e){s(this,h);var t=a(this,f.call(this,e));return t.__outsideClickHandler=function(e){if("function"!=typeof t.__clickOutsideHandlerProp){var n=t.getInstance();if("function"!=typeof n.props.handleClickOutside){if("function"!=typeof n.handleClickOutside)throw Error("WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.");n.handleClickOutside(e)}else n.props.handleClickOutside(e)}else t.__clickOutsideHandlerProp(e)},t.enableOnClickOutside=function(){if("undefined"!=typeof document&&!l[t._uid]){l[t._uid]=!0;var e=t.props.eventTypes;e.forEach||(e=[e]),d[t._uid]=function(e){t.props.disableOnClickOutside||null!==t.componentNode&&(t.props.preventDefault&&e.preventDefault(),t.props.stopPropagation&&e.stopPropagation(),t.props.excludeScrollbar&&r(e)||i(e.target,t.componentNode,t.props.outsideClickIgnoreClass)===document&&t.__outsideClickHandler(e))},e.forEach(function(e){var n=null;-1!==p.indexOf(e)&&(n={passive:!t.props.preventDefault}),document.addEventListener(e,d[t._uid],n)})}},t.disableOnClickOutside=function(){delete l[t._uid];var e=d[t._uid];if(e&&"undefined"!=typeof document){var n=t.props.eventTypes;n.forEach||(n=[n]),n.forEach(function(t){return document.removeEventListener(t,e)}),delete d[t._uid]}},t.getRef=function(e){return t.instanceRef=e},t._uid=c(),t}return u(h,f),h.prototype.getInstance=function(){if(!e.prototype.isReactComponent)return this;var t=this.instanceRef;return t.getInstance?t.getInstance():t},h.prototype.componentDidMount=function(){if("undefined"!=typeof document&&document.createElement){var e=this.getInstance();if(o&&"function"==typeof o.handleClickOutside&&(this.__clickOutsideHandlerProp=o.handleClickOutside(e),"function"!=typeof this.__clickOutsideHandlerProp))throw Error("WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.");this.componentNode=n.findDOMNode(this.getInstance()),this.enableOnClickOutside()}},h.prototype.componentDidUpdate=function(){this.componentNode=n.findDOMNode(this.getInstance())},h.prototype.componentWillUnmount=function(){this.disableOnClickOutside()},h.prototype.render=function(){var n=this,o=Object.keys(this.props).filter(function(e){return"excludeScrollbar"!==e}).reduce(function(e,t){return e[t]=n.props[t],e},{});return e.prototype.isReactComponent?o.ref=this.getRef:o.wrappedRef=this.getRef,o.disableOnClickOutside=this.disableOnClickOutside,o.enableOnClickOutside=this.enableOnClickOutside,t.createElement(e,o)},h}(t.Component),h.displayName="OnClickOutside("+(e.displayName||e.name||"Component")+")",h.defaultProps={eventTypes:["mousedown","touchstart"],excludeScrollbar:o&&o.excludeScrollbar||!1,outsideClickIgnoreClass:f,preventDefault:!1,stopPropagation:!1},h.getClass=function(){return e.getClass?e.getClass():e},O},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t(e.onClickOutside={},e.React,e.ReactDOM)}(this,function(e,t,n){"use strict";function o(e,t,n){return e===t||(e.correspondingElement?e.correspondingElement.classList.contains(n):e.classList.contains(n))}function i(e,t,n){if(e===t)return!0;for(;e.parentNode;){if(o(e,t,n))return!0;e=e.parentNode}return e}function r(e){return document.documentElement.clientWidth<=e.clientX||document.documentElement.clientHeight<=e.clientY}var c=function(){if("undefined"!=typeof window&&"function"==typeof window.addEventListener){var e=!1,t=Object.defineProperty({},"passive",{get:function(){e=!0}}),n=function(){};return window.addEventListener("testPassiveEventSupport",n,t),window.removeEventListener("testPassiveEventSupport",n,t),e}},s=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return function(){return++e}}(),u=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},d=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},a=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},p=void 0,l={},f={},h=["touchstart","touchmove"],O="ignore-react-onclickoutside";e.IGNORE_CLASS_NAME=O,e.default=function(e,o){var m,v;return v=m=function(O){function m(e){u(this,m);var t=a(this,O.call(this,e));return t.__outsideClickHandler=function(e){if("function"!=typeof t.__clickOutsideHandlerProp){var n=t.getInstance();if("function"!=typeof n.props.handleClickOutside){if("function"!=typeof n.handleClickOutside)throw Error("WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.");n.handleClickOutside(e)}else n.props.handleClickOutside(e)}else t.__clickOutsideHandlerProp(e)},t.enableOnClickOutside=function(){if("undefined"!=typeof document&&!f[t._uid]){void 0===p&&(p=c()),f[t._uid]=!0;var e=t.props.eventTypes;e.forEach||(e=[e]),l[t._uid]=function(e){t.props.disableOnClickOutside||null!==t.componentNode&&(t.props.preventDefault&&e.preventDefault(),t.props.stopPropagation&&e.stopPropagation(),t.props.excludeScrollbar&&r(e)||i(e.target,t.componentNode,t.props.outsideClickIgnoreClass)===document&&t.__outsideClickHandler(e))},e.forEach(function(e){var n=null;-1!==h.indexOf(e)&&p&&(n={passive:!t.props.preventDefault}),document.addEventListener(e,l[t._uid],n)})}},t.disableOnClickOutside=function(){delete f[t._uid];var e=l[t._uid];if(e&&"undefined"!=typeof document){var n=t.props.eventTypes;n.forEach||(n=[n]),n.forEach(function(t){return document.removeEventListener(t,e)}),delete l[t._uid]}},t.getRef=function(e){return t.instanceRef=e},t._uid=s(),t}return d(m,O),m.prototype.getInstance=function(){if(!e.prototype.isReactComponent)return this;var t=this.instanceRef;return t.getInstance?t.getInstance():t},m.prototype.componentDidMount=function(){if("undefined"!=typeof document&&document.createElement){var e=this.getInstance();if(o&&"function"==typeof o.handleClickOutside&&(this.__clickOutsideHandlerProp=o.handleClickOutside(e),"function"!=typeof this.__clickOutsideHandlerProp))throw Error("WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.");this.componentNode=n.findDOMNode(this.getInstance()),this.enableOnClickOutside()}},m.prototype.componentDidUpdate=function(){this.componentNode=n.findDOMNode(this.getInstance())},m.prototype.componentWillUnmount=function(){this.disableOnClickOutside()},m.prototype.render=function(){var n=this,o=Object.keys(this.props).filter(function(e){return"excludeScrollbar"!==e}).reduce(function(e,t){return e[t]=n.props[t],e},{});return e.prototype.isReactComponent?o.ref=this.getRef:o.wrappedRef=this.getRef,o.disableOnClickOutside=this.disableOnClickOutside,o.enableOnClickOutside=this.enableOnClickOutside,t.createElement(e,o)},m}(t.Component),m.displayName="OnClickOutside("+(e.displayName||e.name||"Component")+")",m.defaultProps={eventTypes:["mousedown","touchstart"],excludeScrollbar:o&&o.excludeScrollbar||!1,outsideClickIgnoreClass:O,preventDefault:!1,stopPropagation:!1},m.getClass=function(){return e.getClass?e.getClass():e},v},Object.defineProperty(e,"__esModule",{value:!0})});

es/index.js

@@ -10,4 +10,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 import * as DOMHelpers from './dom-helpers';
+import { testPassiveEventSupport } from './detect-passive-events';
 import uid from './uid';
 
+var passiveEventSupport = void 0;
+
 var handlersMap = {};
@@ -59,3 +62,10 @@ var enabledInstances = {};
       _this.enableOnClickOutside = function () {
-        if (typeof document === 'undefined' || enabledInstances[_this._uid]) return;
+        if (typeof document === 'undefined' || enabledInstances[_this._uid]) {
+          return;
+        }
+
+        if (typeof passiveEventSupport === 'undefined') {
+          passiveEventSupport = testPassiveEventSupport();
+        }
+
         enabledInstances[_this._uid] = true;
@@ -95,3 +105,3 @@
 
-          if (isTouchEvent) {
+          if (isTouchEvent && passiveEventSupport) {
             handlerOptions = { passive: !_this.props.preventDefault };
@@ -98,0 +108,0 @@ }

lib/index.js

@@ -15,2 +15,4 @@ 'use strict';
 
+var _detectPassiveEvents = require('./detect-passive-events');
+
 var _uid = require('./uid');
@@ -30,2 +32,4 @@
 
+var passiveEventSupport = void 0;
+
 var handlersMap = {};
@@ -77,3 +81,10 @@ var enabledInstances = {};
       _this.enableOnClickOutside = function () {
-        if (typeof document === 'undefined' || enabledInstances[_this._uid]) return;
+        if (typeof document === 'undefined' || enabledInstances[_this._uid]) {
+          return;
+        }
+
+        if (typeof passiveEventSupport === 'undefined') {
+          passiveEventSupport = (0, _detectPassiveEvents.testPassiveEventSupport)();
+        }
+
         enabledInstances[_this._uid] = true;
@@ -113,3 +124,3 @@
 
-          if (isTouchEvent) {
+          if (isTouchEvent && passiveEventSupport) {
             handlerOptions = { passive: !_this.props.preventDefault };
@@ -116,0 +127,0 @@ }

package.json

 {
   "name": "react-onclickoutside",
-  "version": "6.6.2",
+  "version": "6.6.3",
   "description": "An onClickOutside wrapper for React components",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -11,6 +11,4 @@ [![npm version](https://img.shields.io/npm/v/react-onclickoutside.svg)](https://www.npmjs.com/package/react-onclickoutside)
 
-This HOC supports stateless components as of v5.7.0, and uses pure class notation rather than `createClass` as of v6.
+This HOC supports stateless components as of v5.7.0, and switched to using transpiled es6 classes rather than `createClass` as of v6.
 
-This HOC is a **pure ES6 implementation** as of v6.x - if you need ES5 code you can either use 5.x or below, or set up your build system so that it does ES5 conversion for you, at whatever is the most logical point in your build chain.
-
 ## Sections covered in this README
@@ -17,0 +15,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

Improved metrics

Total package byte prevSize

54293

increased by5.66%

Number of package files

12

increased by20%

Lines of code

799

increased by9.9%

Worsened metrics

Number of lines in readme file

278

decreased by-0.71%

No dependency changes