react-click-away-listener - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/react-click-away-listener.es.js

@@ -1,2 +0,2 @@
-import r from"prop-types";import e,{createRef as n,useEffect as t}from"react";function o(){return(o=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(r[t]=n[t])}return r}).apply(this,arguments)}function a(r,e){if(null==r)return{};var n,t,o=function(r,e){if(null==r)return{};var n,t,o={},a=Object.keys(r);for(t=0;t<a.length;t++)n=a[t],e.indexOf(n)>=0||(o[n]=r[n]);return o}(r,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);for(t=0;t<a.length;t++)n=a[t],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(r,n)&&(o[n]=r[n])}return o}var c=function(r){var c=r.children,i=r.onClickAway,l=r.clickAwayId,u=a(r,["children","onClickAway","clickAwayId"]),f=n(null);return t(function(){var r=document.addEventListener("mousedown",function(r){var e=r.target.dataset&&r.target.dataset.preventClickaway,n=f&&f.current;e&&e===l||n&&!n.contains(r.target)&&i()});return function(){document.removeEventListener("mousedown",r)}}),e.createElement("div",o({ref:f},u),c)};c.defaultProps={children:null,onClickAway:function(){}},c.propTypes={children:r.oneOfType([r.arrayOf(r.node),r.node]),refs:r.array,clickAwayId:r.string,forwardedRef:r.any,onClickAway:r.func};export default c;
+var e=function(){return(e=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e}).apply(this,arguments)},r=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t},t=function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)Object.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r.default=e,r};Object.defineProperty(exports,"__esModule",{value:!0});var n=t(require("react"));exports.default=function(t){var o=t.children,u=t.onClickAway,c=r(t,["children","onClickAway"]),a=n.useRef(null);return n.useEffect((function(){var e=function(e){a.current&&a.current.contains(e.target)||u()};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}})),n.default.createElement("div",e({ref:a},c),o)};
 //# sourceMappingURL=react-click-away-listener.es.js.map

dist/react-click-away-listener.js

@@ -1,2 +0,2 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var Proptypes=_interopDefault(require("prop-types")),React=require("react"),React__default=_interopDefault(React);function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}function _objectWithoutProperties(e,t){if(null==e)return{};var r,n,o=_objectWithoutPropertiesLoose(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var ClickAwayListener=function(e){var t=e.children,r=e.onClickAway,n=e.clickAwayId,o=_objectWithoutProperties(e,["children","onClickAway","clickAwayId"]),a=React.createRef(null);return React.useEffect(function(){var e=document.addEventListener("mousedown",function(e){var t=e.target.dataset&&e.target.dataset.preventClickaway,o=a&&a.current;t&&t===n||o&&!o.contains(e.target)&&r()});return function(){document.removeEventListener("mousedown",e)}}),React__default.createElement("div",_extends({ref:a},o),t)};ClickAwayListener.defaultProps={children:null,onClickAway:function(){}},ClickAwayListener.propTypes={children:Proptypes.oneOfType([Proptypes.arrayOf(Proptypes.node),Proptypes.node]),refs:Proptypes.array,clickAwayId:Proptypes.string,forwardedRef:Proptypes.any,onClickAway:Proptypes.func},module.exports=ClickAwayListener;
+"use strict";var __assign=function(){return(__assign=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e}).apply(this,arguments)},__rest=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t},__importStar=function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)Object.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r.default=e,r};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__importStar(require("react")),ClickAwayListener=function(e){var r=e.children,t=e.onClickAway,n=__rest(e,["children","onClickAway"]),o=react_1.useRef(null);return react_1.useEffect((function(){var e=function(e){o.current&&o.current.contains(e.target)||t()};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}})),react_1.default.createElement("div",__assign({ref:o},n),r)};exports.default=ClickAwayListener;
 //# sourceMappingURL=react-click-away-listener.js.map

dist/react-click-away-listener.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react"],t):(e=e||self)["react-click-away-listener"]=t(e["prop-types"],e.react)}(this,function(e,t){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var r="default"in t?t.default:t;function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function a(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var o=function(e){var o=e.children,c=e.onClickAway,i=e.clickAwayId,f=a(e,["children","onClickAway","clickAwayId"]),u=t.createRef(null);return t.useEffect(function(){var e=document.addEventListener("mousedown",function(e){var t=e.target.dataset&&e.target.dataset.preventClickaway,r=u&&u.current;t&&t===i||r&&!r.contains(e.target)&&c()});return function(){document.removeEventListener("mousedown",e)}}),r.createElement("div",n({ref:u},f),o)};return o.defaultProps={children:null,onClickAway:function(){}},o.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),refs:e.array,clickAwayId:e.string,forwardedRef:e.any,onClickAway:e.func},o});
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";var e=function(){return(e=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e}).apply(this,arguments)},n=function(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)n.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(t[r[o]]=e[r[o]])}return t},t=function(e){if(e&&e.__esModule)return e;var n={};if(null!=e)for(var t in e)Object.hasOwnProperty.call(e,t)&&(n[t]=e[t]);return n.default=e,n};Object.defineProperty(exports,"__esModule",{value:!0});var r=t(require("react"));exports.default=function(t){var o=t.children,u=t.onClickAway,c=n(t,["children","onClickAway"]),i=r.useRef(null);return r.useEffect((function(){var e=function(e){i.current&&i.current.contains(e.target)||u()};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}})),r.default.createElement("div",e({ref:i},c),o)}}));
 //# sourceMappingURL=react-click-away-listener.umd.js.map

package.json

 {
 	"name": "react-click-away-listener",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "A simple click away listener built with React Hooks",
 	"main": "dist/react-click-away-listener.js",
 	"module": "dist/react-click-away-listener.es.js",
+	"types": "dist/react-click-away-listener.d.ts",
 	"umd": "dist/react-click-away-listener.umd.js",
@@ -12,4 +13,5 @@ "scripts": {
 		"coverage": "jest --coverage",
+		"build-tsc": "tsc -w",
 		"prepublish": "npm run build",
-		"build": "rollup -c rollup.config.js",
+		"build": "tsc && rollup -c rollup.config.js",
 		"report-coverage": "cat ./coverage/lcov.info | codecov"
@@ -26,4 +28,6 @@ },
 		"@babel/preset-react": "^7.0.0",
+		"@testing-library/react": "^9.3.1",
+		"@types/jest": "^24.0.21",
+		"@types/react": "^16.9.11",
 		"babel-cli": "^6.26.0",
-		"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
 		"codecov.io": "^0.1.6",
@@ -35,14 +39,14 @@ "eslint": "^5.13.0",
 		"eslint-plugin-react-hooks": "^1.6.0",
-		"jest": "^24.0.0",
-		"prop-types": "^15.6.2",
-		"react": "^16.8.6",
-		"react-dom": "^16.8.6",
-		"react-testing-library": "^6.1.2",
-		"rollup": "^1.1.2",
-		"rollup-plugin-babel": "^4.3.2",
-		"rollup-plugin-terser": "^4.0.4"
+		"jest": "^24.9.0",
+		"react": "^16.11.0",
+		"react-dom": "^16.11.0",
+		"rollup": "^1.26.3",
+		"rollup-plugin-babel": "^4.3.3",
+		"rollup-plugin-terser": "^5.1.2",
+		"ts-jest": "^24.1.0",
+		"typescript": "^3.6.4"
 	},
 	"peerDependencies": {
-		"react": "^16.8.6",
-		"react-dom": "^16.8.6"
+		"react": "^16.11.0",
+		"react-dom": "^16.11.0"
 	},
@@ -52,4 +56,7 @@ "jest": {
 			"<rootDir>/src/**.js"
-		]
+		],
+		"transform": {
+			"^.+\\.tsx?$": "ts-jest"
+		}
 	}
 }

README.md

@@ -41,2 +41,24 @@ <p align="center">
 
+### Binding action creators to ClickAwayListeners
+
+Action creators are whatever triggers your actions(onClick, onTouch), mostly a button but any element in general can have those handlers so ¯\_(ツ)\_/¯
+
+How do we make sure there's no collision between them?
+
+- By adding a clickAwayId on ClickAwayListener
+- And preventClickaway dataset with the id specified
+
+More like:
+
+```jsx
+const id = "click-yay";
+
+return (
+	<ClickAwayListener onClickAway={fakeHandleClick} clickAwayId={id}>
+		Hello World
+	</ClickAwayListener>
+	<button data-prevent-clickaway={id}>A button</button>
+)
+```
+
 ## Examples
@@ -43,0 +65,0 @@

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20591

increased by20.88%

Number of lines in readme file

70

increased by45.83%

Worsened metrics

Dev dependency count

20

increased by11.11%

Lines of code

18

decreased by-18.18%

Number of low quality alerts

5

increased by25%

No dependency changes