react-hotkeys-hook - npm Package Compare versions

Comparing version 2.4.1 to 3.0.0

dist/react-hotkeys-hook.cjs.development.js

@@ -12,2 +12,14 @@ 'use strict';
 
+hotkeys.filter = function () {
+  return true;
+};
+
+var tagFilter = function tagFilter(_ref, enableOnTags) {
+  var target = _ref.target,
+      srcElement = _ref.srcElement;
+  // @ts-ignore
+  var targetTagName = target && target.tagName || srcElement && srcElement.tagName;
+  return Boolean(targetTagName && enableOnTags && enableOnTags.includes(targetTagName));
+};
+
 function useHotkeys(keys, callback, options, deps) {
@@ -19,10 +31,18 @@ if (options instanceof Array) {
 
-  var _ref = options || {},
-      enableOnTags = _ref.enableOnTags,
-      filter = _ref.filter,
-      keyup = _ref.keyup,
-      keydown = _ref.keydown;
+  var _ref2 = options || {},
+      enableOnTags = _ref2.enableOnTags,
+      filter = _ref2.filter,
+      keyup = _ref2.keyup,
+      keydown = _ref2.keydown;
 
   var ref = react.useRef(null);
   var memoisedCallback = react.useCallback(function (keyboardEvent, hotkeysEvent) {
+    if (filter && !filter(keyboardEvent)) {
+      return false;
+    }
+
+    if (options && options.enableOnTags && !tagFilter(keyboardEvent, options.enableOnTags)) {
+      return false;
+    }
+
     if (ref.current === null || document.activeElement === ref.current) {
@@ -36,14 +56,2 @@ callback(keyboardEvent, hotkeysEvent);
   react.useEffect(function () {
-    if (options && options.enableOnTags) {
-      hotkeys.filter = function (_ref2) {
-        var target = _ref2.target,
-            srcElement = _ref2.srcElement;
-        // @ts-ignore
-        var targetTagName = target && target.tagName || srcElement && srcElement.tagName;
-        return Boolean(targetTagName && enableOnTags && enableOnTags.includes(targetTagName));
-      };
-    }
-
-    if (filter) hotkeys.filter = filter;
-
     if (keyup && keydown !== true) {
@@ -50,0 +58,0 @@ options.keydown = false;

dist/react-hotkeys-hook.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";var e,t=(e=require("hotkeys-js"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("react");exports.useHotkeys=function(e,r,u,s){u instanceof Array&&(s=u,u=void 0);var a=u||{},o=a.enableOnTags,c=a.filter,i=a.keyup,l=a.keydown,f=n.useRef(null),d=n.useCallback((function(e,t){return(null===f.current||document.activeElement===f.current)&&(r(e,t),!0)}),s?[f].concat(s):[f]);return n.useEffect((function(){return u&&u.enableOnTags&&(t.filter=function(e){var t=e.target,n=e.srcElement,r=t&&t.tagName||n&&n.tagName;return Boolean(r&&o&&o.includes(r))}),c&&(t.filter=c),i&&!0!==l&&(u.keydown=!1),t(e,u||{},d),function(){return t.unbind(e,d)}}),[d,u,o,c,e]),f},exports.useIsHotkeyPressed=function(){return t.isPressed};
+"use strict";var e,n=(e=require("hotkeys-js"))&&"object"==typeof e&&"default"in e?e.default:e,t=require("react");n.filter=function(){return!0},exports.useHotkeys=function(e,r,u,a){u instanceof Array&&(a=u,u=void 0);var s=u||{},o=s.enableOnTags,c=s.filter,i=s.keyup,l=s.keydown,f=t.useRef(null),d=t.useCallback((function(e,n){return!(c&&!c(e)||u&&u.enableOnTags&&!function(e,n){var t=e.target,r=e.srcElement,u=t&&t.tagName||r&&r.tagName;return Boolean(u&&n&&n.includes(u))}(e,u.enableOnTags)||null!==f.current&&document.activeElement!==f.current||(r(e,n),0))}),a?[f].concat(a):[f]);return t.useEffect((function(){return i&&!0!==l&&(u.keydown=!1),n(e,u||{},d),function(){return n.unbind(e,d)}}),[d,u,o,c,e]),f},exports.useIsHotkeyPressed=function(){return n.isPressed};
 //# sourceMappingURL=react-hotkeys-hook.cjs.production.min.js.map

dist/react-hotkeys-hook.esm.js

@@ -8,2 +8,14 @@ import hotkeys from 'hotkeys-js';
 
+hotkeys.filter = function () {
+  return true;
+};
+
+var tagFilter = function tagFilter(_ref, enableOnTags) {
+  var target = _ref.target,
+      srcElement = _ref.srcElement;
+  // @ts-ignore
+  var targetTagName = target && target.tagName || srcElement && srcElement.tagName;
+  return Boolean(targetTagName && enableOnTags && enableOnTags.includes(targetTagName));
+};
+
 function useHotkeys(keys, callback, options, deps) {
@@ -15,10 +27,18 @@ if (options instanceof Array) {
 
-  var _ref = options || {},
-      enableOnTags = _ref.enableOnTags,
-      filter = _ref.filter,
-      keyup = _ref.keyup,
-      keydown = _ref.keydown;
+  var _ref2 = options || {},
+      enableOnTags = _ref2.enableOnTags,
+      filter = _ref2.filter,
+      keyup = _ref2.keyup,
+      keydown = _ref2.keydown;
 
   var ref = useRef(null);
   var memoisedCallback = useCallback(function (keyboardEvent, hotkeysEvent) {
+    if (filter && !filter(keyboardEvent)) {
+      return false;
+    }
+
+    if (options && options.enableOnTags && !tagFilter(keyboardEvent, options.enableOnTags)) {
+      return false;
+    }
+
     if (ref.current === null || document.activeElement === ref.current) {
@@ -32,14 +52,2 @@ callback(keyboardEvent, hotkeysEvent);
   useEffect(function () {
-    if (options && options.enableOnTags) {
-      hotkeys.filter = function (_ref2) {
-        var target = _ref2.target,
-            srcElement = _ref2.srcElement;
-        // @ts-ignore
-        var targetTagName = target && target.tagName || srcElement && srcElement.tagName;
-        return Boolean(targetTagName && enableOnTags && enableOnTags.includes(targetTagName));
-      };
-    }
-
-    if (filter) hotkeys.filter = filter;
-
     if (keyup && keydown !== true) {
@@ -46,0 +54,0 @@ options.keydown = false;

package.json

 {
   "name": "react-hotkeys-hook",
-  "version": "2.4.1",
+  "version": "3.0.0",
   "repository": "https://[e-mail]/JohannesKlauss/react-keymap-hook.git",
@@ -31,4 +31,4 @@ "author": "Johannes Klauss",
     "publish": "np",
-    "docz:dev": "docz dev",
-    "docz:build": "docz build"
+    "docz:dev": "gatsby develop",
+    "docz:build": "gatsby build"
   },
@@ -60,6 +60,6 @@ "babel": {
     "@babel/core": "7.12.10",
+    "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/preset-env": "7.12.11",
     "@babel/preset-react": "7.12.10",
     "@babel/preset-typescript": "7.12.7",
-    "@emotion/core": "11.0.0",
     "@testing-library/react": "11.2.2",
@@ -73,5 +73,8 @@ "@testing-library/react-hooks": "3.4.2",
     "docz": "2.3.1",
-    "emotion-theming": "11.0.0",
     "eslint-plugin-prettier": "3.3.0",
+    "gatsby": "2.29.1",
     "gatsby-plugin-emotion": "5.1.0",
+    "gatsby-plugin-sharp": "2.11.1",
+    "gatsby-theme-docz": "2.3.1",
+    "gatsby-transformer-sharp": "2.9.0",
     "jest": "26.6.3",
@@ -78,0 +81,0 @@ "prettier": "2.2.1",

README.md

@@ -55,3 +55,5 @@ # react-hotkeys-hook
 - `options: Options = {}`
-  - `filter: (event: KeyboardEvent): boolean` is used to enable hotkeys inside input elements. Check out [hotkeys docs](https://github.com/jaywcjlove/hotkeys/#filter) for usage. Due to constraints with the base library, `filter` is a global setting. As a result, it is currently not possible to have different filters for separate calls of `useHotkey`.
+  - * `filter: (event: KeyboardEvent): boolean` is used to filter if a callback gets triggered depending on the keyboard event.
+    **Breaking Change in `3.0.0`!** Prior to version `3.0.0` the filter settings was one global setting that applied to every
+    hook. Since `3.0.0` this behavior changed. The `filter` option is now locally scoped to each call of `useHotkeys`.
   - * `enableOnTags: string[]` is used to enable listening to hotkeys in form fields. Available values are `INPUT`, `TEXTAREA` and `SELECT`. **IMPORTANT!** When you provide a custom `filter` implementation function this parameter will be ignored. Similar to `filter`, setting this option will enable it globally.
@@ -58,0 +60,0 @@ - `splitKey: string` is used to change the splitting character inside the keys argument. Default is `+`, but if you want

src/useHotkeys.ts

@@ -6,2 +6,12 @@ import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';
 
+// We implement our own custom filter system.
+hotkeys.filter = () => true;
+
+const tagFilter = ({ target, srcElement }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {
+  // @ts-ignore
+  const targetTagName = (target && target.tagName) || (srcElement && srcElement.tagName);
+
+  return Boolean(targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags));
+};
+
 export type Options = {
@@ -29,2 +39,10 @@ filter?: typeof hotkeys.filter;
   const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {
+    if (filter && !filter(keyboardEvent)) {
+      return false;
+    }
+
+    if (options && (options as Options).enableOnTags && !tagFilter(keyboardEvent, (options as Options).enableOnTags)) {
+      return false;
+    }
+
     if (ref.current === null || document.activeElement === ref.current) {
@@ -39,13 +57,2 @@ callback(keyboardEvent, hotkeysEvent);
   useEffect(() => {
-    if (options && (options as Options).enableOnTags) {
-      hotkeys.filter = ({ target, srcElement }) => {
-        // @ts-ignore
-        const targetTagName = (target && target.tagName) || (srcElement && srcElement.tagName);
-
-        return Boolean(targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags));
-      };
-    }
-
-    if (filter) hotkeys.filter = filter;
-
     if (keyup && keydown !== true) {
@@ -52,0 +59,0 @@ (options as Options).keydown = false;

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

38847

increased by8.64%

Lines of code

403

increased by13.52%

Number of lines in readme file

102

increased by2%

Worsened metrics

Dev dependency count

27

increased by12.5%

No dependency changes