react-onclickoutside - npm Package Compare versions

Comparing version 4.5.0 to 4.7.0

index.js

		@@ -40,3 +40,3 @@ /**

		var isSourceFound = function(source, localNode) {
		var isSourceFound = function(source, localNode, ignoreClass) {
		if (source === localNode) {
		@@ -52,5 +52,5 @@ return true;
		if (source.correspondingElement) {
		return source.correspondingElement.classList.contains(IGNORE_CLASS);
		return source.correspondingElement.classList.contains(ignoreClass);
		}
		return source.classList.contains(IGNORE_CLASS);
		return source.classList.contains(ignoreClass);
		};
		@@ -68,2 +68,3 @@
		var found = false;
		var ignoreClass = this.props.outsideClickIgnoreClass \|\| IGNORE_CLASS;
		// If source=local then this event came from "somewhere"
		@@ -75,6 +76,9 @@ // inside and should be ignored. We could handle this with
		while(source.parentNode) {
		found = isSourceFound(source, localNode);
		found = isSourceFound(source, localNode, ignoreClass);
		if(found) return;
		source = source.parentNode;
		}
		// If element is in detached DOM, consider it not clicked
		// outside as it can't be known whether it was outside.
		if(source !== document) return;
		eventHandler(evt);
		@@ -81,0 +85,0 @@ }

package.json

		{
		"name": "react-onclickoutside",
		"version": "4.5.0",
		"version": "4.7.0",
		"description": "An onClickOutside mixin for React components",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -5,3 +5,3 @@ # An onClickOutside mixin for React components

		Note that this mixin relies on the `.classList` property, which is supported by all modern browsers, but not by no longer supported browsers like IE8 or even older. For setups that need to support deprecated browsers, using something like the [MDN classlist-polyfill](https://www.npmjs.com/package/classlist-polyfill) will be necessary.
		Note that this mixin relies on the `.classList` property, which is supported by all modern browsers, but not by no longer supported browsers like IE9 or even older. For setups that need to support deprecated browsers, using a [classlist-polyfill](https://github.com/eligrey/classList.js/) will be necessary.

		@@ -67,3 +67,3 @@ ## installation
		- `disableOnClickOutside()` - Disables outside click listening by explicitly removing the event listening bindings.


		In addition, you can create a component that uses this mixin such that it has the code set up and ready to go, but not listening for outside click events until you explicitly issue its `enableOnClickOutside()`, by passing in a properly called `disableOnClickOutside`:
		@@ -88,12 +88,12 @@

		If you want the mixin to ignore certain elements, then add the class `ignore-react-onclickoutside` to that element and the callback won't be invoked when the click happens inside elements with that class.
		If you want the mixin to ignore certain elements, then add the class `ignore-react-onclickoutside` to that element and the callback won't be invoked when the click happens inside elements with that class. This class can be changed by setting the `outsideClickIgnoreClass` property on the component.

		## ES6/2015 class support via HOC / ES7 decorators

		Since mixins can't be used with ES6/2015 class React components a
		[Higher-Order Component (HOC)](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750)
		and [ES7 decorator](https://github.com/wycats/javascript-decorators) are bundled with the mixin:
		Since mixins can't be used with ES6/2015 class React components a
		[Higher-Order Component (HOC)](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750)
		and [ES7 decorator](https://github.com/wycats/javascript-decorators) are bundled with the mixin:

		```javascript
		import listensToClickOutside from 'react-onclickoutside/decorator';
		import listensToClickOutside from 'react-onclickoutside/decorator';

		@@ -110,3 +110,3 @@ class Component extends React.Component {

		import listensToClickOutside from 'react-onclickoutside/decorator';
		import listensToClickOutside from 'react-onclickoutside/decorator';

		@@ -127,3 +127,3 @@ @listensToClickOutside()

		In every other respect the the mixin and HOC/decorator provides the same functionality.
		In every other respect the the mixin and HOC/decorator provides the same functionality.

		@@ -137,1 +137,10 @@ For bugs and enhancements hit up https://github.com/Pomax/react-onclickoutside/issues
		If you use React 0.14 or above, use v2.5 or higher, as that specifically uses `react-DOM` for the necessary DOM event bindings.


		## IE does not support classList for SVG elements!

		This is true, but also an edge-case problem that needs to be fixed in IE, not in individual libraries so that IE can keep getting away with not implementing proper support for all HTML5 elements. If you rely on this, I fully expect you to have already filed this as a feature request, to be added to MS Edge, or to have voted on getting it implemented.

		If you haven't, and you just want this library fixed, then you already have the power to completely fix this problem yourself without needing to file any PRs: simply add a shim for `classList` to your page(s), loaded before you load your React code, and you'll have instantly fixed every library that you might remotely rely on that makes use of the `classList` property. You can find several shims quite easily, the usualy "first try" shim is the one given over on https://developer.mozilla.org/en/docs/Web/API/Element/classList

		A note on PRs for this issue: 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.

react-onclickoutside - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics