react-onclickoutside - npm Package Compare versions

Comparing version 5.5.0 to 5.6.0

index.js

@@ -111,3 +111,7 @@ /**
           } else if(typeof instance.handleClickOutside === 'function') {
-            clickOutsideHandler = instance.handleClickOutside;
+            if (React.Component.prototype.isPrototypeOf(instance)) {
+              clickOutsideHandler = instance.handleClickOutside.bind(instance);
+            } else {
+              clickOutsideHandler = instance.handleClickOutside;
+            }
           } else if(typeof instance.props.handleClickOutside === 'function') {
@@ -117,3 +121,3 @@ clickOutsideHandler = instance.props.handleClickOutside;
             throw new Error('Component lacks a handleClickOutside(event) function for processing outside click events.');
-          }             
+          }
 
@@ -120,0 +124,0 @@ var fn = this.__outsideClickHandler = generateOutsideCheck(

package.json

 {
   "name": "react-onclickoutside",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "description": "An onClickOutside mixin for React components",
@@ -33,5 +33,7 @@ "main": "index.js",
   "devDependencies": {
+    "babel-preset-es2015": "^6.14.0",
     "chai": "^3.5.0",
     "eslint": "^3.4.0",
     "karma": "^0.13.22",
+    "karma-babel-preprocessor": "^6.0.1",
     "karma-chai": "^0.1.0",
@@ -38,0 +40,0 @@ "karma-mocha": "^0.2.2",

README.md

@@ -164,2 +164,2 @@ # An onClickOutside wrapper for React components
 
-Eventually this problem will stop being one, but in the mean time *you* are responsible for making *your* site work by shimming everything that needs shimming for IE.  As such, **if you file a PR to fix classList-and-SVG issues specifically for this library, your PR will be clossed and I will politely point you to this README.md section**. I will not accept PRs to fix this issue. You already have the power to fix it, and I expect you to take responsibility as a fellow developer to let Microsoft know you need them to implement this.
+Eventually this problem will stop being one, but in the mean time *you* are responsible for making *your* site work by shimming everything that needs shimming for IE.  As such, **if you file a PR to fix classList-and-SVG issues specifically for this library, your PR will be clossed and I will politely point you to this README.md section**. I will not accept PRs to fix this issue. You already have the power to fix it, and I expect you to take responsibility as a fellow developer to shim what you need instead of getting obsolete quirks supported by libraries whose job isn't to support obsolete quirks.

test/karma.conf.js

@@ -11,5 +11,18 @@ module.exports = function(config) {
     preprocessors: {
-      'test.js': ['webpack']
+      'test.js': ['webpack', 'babel']
     },
 
+    babelPreprocessor: {
+      options: {
+        presets: ['es2015'],
+        sourceMap: 'inline'
+      },
+      filename: function (file) {
+        return file.originalPath.replace(/\.js$/, '.es5.js');
+      },
+      sourceFileName: function (file) {
+        return file.originalPath;
+      }
+    },
+
     reporters: ['spec'],
@@ -26,3 +39,4 @@
       require('karma-phantomjs-launcher'),
-      require('karma-spec-reporter')
+      require('karma-spec-reporter'),
+      require('karma-babel-preprocessor')
     ],
@@ -29,0 +43,0 @@

test/test.js

@@ -69,13 +69,87 @@ var React = require('react');
   });
+  
 
+  describe('with instance method', function() {
+    it('and class inheritance, should call the specified handler when clicking the document', function() {
+      class Component extends React.Component {
+        constructor(...args) {
+          super(...args);
+          this.state = {
+            clickOutsideHandled: false
+          };
+        }
 
-  it('should call the specified handler when clicking the document', function() {
-    var Component = React.createClass({
-      getInitialState: function() {
-        return {
-          clickOutsideHandled: false
-        };
-      },
+        handleClickOutside (event) {
+          if (event === undefined) {
+            throw new Error('event cannot be undefined');
+          }
 
-      myOnClickHandler: function(event) {
+          this.setState({
+            clickOutsideHandled: true
+          });
+        }
+
+        render() {
+          return React.createElement('div');
+        }
+      }
+
+      var WrappedWithCustomHandler = wrapComponent(Component);
+
+      var element = React.createElement(WrappedWithCustomHandler);
+      assert(element, 'element can be created');
+      var component = TestUtils.renderIntoDocument(element);
+      assert(component, 'component renders correctly');
+      document.dispatchEvent(new Event('mousedown'));
+      var instance = component.getInstance();
+      assert(instance.state.clickOutsideHandled, 'clickOutsideHandled got flipped');
+    });
+
+
+    it('and createClass method, should call the specified handler when clicking the document', function() {
+      var Component = React.createClass({
+        getInitialState: function() {
+          return {
+            clickOutsideHandled: false
+          };
+        },
+ 
+        handleClickOutside: function(event) {
+          if (event === undefined) {
+            throw new Error('event cannot be undefined');
+          }
+  
+          this.setState({
+            clickOutsideHandled: true
+          });
+        },
+   
+        render: function() {
+          return React.createElement('div');
+        }
+      });
+
+      var WrappedWithCustomHandler = wrapComponent(Component);
+
+      var element = React.createElement(WrappedWithCustomHandler);
+      assert(element, 'element can be created');
+      var component = TestUtils.renderIntoDocument(element);
+      assert(component, 'component renders correctly');
+      document.dispatchEvent(new Event('mousedown'));
+      var instance = component.getInstance();
+      assert(instance.state.clickOutsideHandled, 'clickOutsideHandled got flipped');
+    });
+  });
+
+
+  describe('with property', function() {
+    it('and class inheritance, should call the specified handler when clicking the document', function() {
+      class Component extends React.Component {
+        render() {
+          return React.createElement('div');
+        }
+      }
+
+      var clickOutsideHandled = false;
+      var handleClickOutside = function(event) {
         if (event === undefined) {
@@ -85,25 +159,67 @@ throw new Error('event cannot be undefined');
 
-        this.setState({
-          clickOutsideHandled: true
-        });
-      },
+        clickOutsideHandled = true;
+      };
 
-      render: function() {
-        return React.createElement('div');
-      }
+      var WrappedWithCustomHandler = wrapComponent(Component);
+
+      var element = React.createElement(WrappedWithCustomHandler, { handleClickOutside: handleClickOutside });
+      assert(element, 'element can be created');
+      var component = TestUtils.renderIntoDocument(element);
+      assert(component, 'component renders correctly');
+      document.dispatchEvent(new Event('mousedown'));
+      assert(clickOutsideHandled, 'clickOutsideHandled got flipped');
     });
 
-    var WrappedWithCustomHandler = wrapComponent(Component, {
-      handleClickOutside: function (instance) {
-        return instance.myOnClickHandler;
-      }
+
+    it('and createClass method, should call the specified handler when clicking the document', function() {
+      var Component = React.createClass({
+        render: function() {
+          return React.createElement('div');
+        }
+      });
+
+      var clickOutsideHandled = false;
+      var handleClickOutside = function(event) {
+        if (event === undefined) {
+          throw new Error('event cannot be undefined');
+        }
+
+        clickOutsideHandled = true;
+      };
+
+      var WrappedWithCustomHandler = wrapComponent(Component);
+
+      var element = React.createElement(WrappedWithCustomHandler, { handleClickOutside: handleClickOutside });
+      assert(element, 'element can be created');
+      var component = TestUtils.renderIntoDocument(element);
+      assert(component, 'component renders correctly');
+      document.dispatchEvent(new Event('mousedown'));
+      assert(clickOutsideHandled, 'clickOutsideHandled got flipped');
     });
 
-    var element = React.createElement(WrappedWithCustomHandler);
-    assert(element, 'element can be created');
-    var component = TestUtils.renderIntoDocument(element);
-    assert(component, 'component renders correctly');
-    document.dispatchEvent(new Event('mousedown'));
-    var instance = component.getInstance();
-    assert(instance.state.clickOutsideHandled, 'clickOutsideHandled got flipped');
+    
+    // ToDo: Does not work
+    it.skip('and stateless function, should call the specified handler when clicking the document', function() {
+      var Component = function() {
+        return React.createElement('div');
+      };
+
+      var clickOutsideHandled = false;
+      var handleClickOutside = function(event) {
+        if (event === undefined) {
+          throw new Error('event cannot be undefined');
+        }
+
+        clickOutsideHandled = true;
+      };
+
+      var WrappedWithCustomHandler = wrapComponent(Component);
+
+      var element = React.createElement(WrappedWithCustomHandler, { handleClickOutside: handleClickOutside });
+      assert(element, 'element can be created');
+      var component = TestUtils.renderIntoDocument(element);
+      assert(component, 'component renders correctly');
+      document.dispatchEvent(new Event('mousedown'));
+      assert(clickOutsideHandled, 'clickOutsideHandled got flipped');
+    });
   });
@@ -154,2 +270,3 @@
 
+
   it('should fallback to call component.props.handleClickOutside when no component.handleClickOutside is defined', function() {
@@ -156,0 +273,0 @@ var StatelessComponent = React.createClass({

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

32515

increased by17.19%

Number of package files

10

increased by11.11%

Lines of code

592

increased by23.59%

Worsened metrics

Dev dependency count

16

increased by14.29%

No dependency changes