react-onclickout - npm Package Compare versions

Comparing version 2.0.7 to 2.0.8

index.js

 'use strict';
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
@@ -14,3 +14,3 @@ var React = require('react');
 
-var ClickOutComponent = (function (_React$Component) {
+var ClickOutComponent = function (_React$Component) {
   _inherits(ClickOutComponent, _React$Component);
@@ -21,3 +21,3 @@
 
-    _get(Object.getPrototypeOf(ClickOutComponent.prototype), 'constructor', this).call(this);
+    return _possibleConstructorReturn(this, (ClickOutComponent.__proto__ || Object.getPrototypeOf(ClickOutComponent)).call(this));
   }
@@ -109,4 +109,4 @@
   return ClickOutComponent;
-})(React.Component);
+}(React.Component);
 
 module.exports = ClickOutComponent;

package.json

 {
   "name": "react-onclickout",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "An ES6-friendly on-click-outside React component.",
   "main": "index.js",
   "scripts": {
-    "build": "./node_modules/.bin/babel src/index.jsx --out-file index.js",
+    "build": "babel src/index.jsx --out-file index.js",
     "test": "npm run build && mocha --compilers .jsx:test/compiler.js test/*.jsx",
@@ -28,13 +28,16 @@ "prepublish": "npm run build"
   "peerDependencies": {
-    "react": "^15.x",
-    "react-dom": "^15.x"
+    "react": "^15.x || ^16.x",
+    "react-dom": "^15.x || ^16.x"
   },
   "devDependencies": {
-    "babel": "^5.8.20",
-    "jsdom": "^3.1.2",
+    "babel-cli": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-register": "^6.26.0",
+    "jsdom": "^11.3.0",
     "mocha": "^2.2.5",
-    "react": "^15.x",
-    "react-dom": "^15.x",
+    "react": "^16.x",
+    "react-dom": "^16.x",
     "sinon": "^1.17.2"
   }
 }

README.md

@@ -24,3 +24,3 @@ # An ES6-friendly on-click-outside React component.
 ```jsx
-let ClickOutHandler = require('react-onclickout');
+const ClickOutHandler = require('react-onclickout');
 
@@ -46,3 +46,3 @@ class ExampleComponent extends React.Component {
 ```jsx
-let ClickOutComponent = require('react-onclickout');
+const ClickOutComponent = require('react-onclickout');
 
@@ -63,2 +63,26 @@ class ExampleComponent extends ClickOutComponent {
 
+## Ignoring Elements
+
+There are times when you may want to ignore certain elements that were clicked outside of the target component.  You can handle such a scenario by inspecting the event passed to your `onClickOut` method handler.
+
+```jsx
+const ClickOutHandler = require('react-onclickout');
+
+class ExampleComponent extends React.Component {
+
+  onClickOut(e) {
+    if (hasClass(e.target, 'ignore-me')) return;
+    alert('user clicked outside of the component!');
+  }
+
+  render() {
+    return (
+      <ClickOutHandler onClickOut={this.onClickOut}>
+        <div>Click outside of me!</div>
+      </ClickOutHandler>
+    );
+  }
+}
+```
+
 That's pretty much it.  Pull requests are more than welcome!

test/compiler.js

 'use strict';
 
-require('babel/register')({
+require('babel-register')({
   only: /test/
 });

test/index.jsx

@@ -10,2 +10,4 @@ var assert          = require('assert')
 
+var JSDOM = jsdom.JSDOM;
+
 function incrementClickedOutCount(count) {
@@ -37,4 +39,5 @@ if (typeof count !== 'number') count = 1;
     clickedOutCount = 0;
-    global.document = jsdom.jsdom('<html><body><div id="container"></div></body></html>');
-    global.window = document.parentWindow;
+    var dom = new JSDOM('<html><body><div id="container"></div></body></html>');
+    global.document = dom.window.document;
+    global.window = dom.window;
     container = global.document.querySelector('#container');
@@ -41,0 +44,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

20428

increased by2.53%

Number of package files

10

increased by25%

Number of lines in readme file

86

increased by38.71%

Worsened metrics

Dev dependency count

9

increased by50%

No dependency changes