@noriginmedia/react-spatial-navigation - npm Package Compare versions

Comparing version 2.4.0 to 2.5.0

CHANGELOG.md

@@ -9,2 +9,8 @@ # Changelog
 
+## [2.5.0]
+### Fixed
+- Throttling is now only applied if the throttle option supplied was greater than 0
+### Added
+- Key up now flushes any throttled input
+
 ## [2.4.0]
@@ -11,0 +17,0 @@ ### Added

dist/spatialNavigation.js

@@ -346,3 +346,4 @@ 'use strict';
 
-    this.keyEventListener = null;
+    this.keyDownEventListener = null;
+    this.keyUpEventListener = null;
     this.keyMap = DEFAULT_KEY_MAP;
@@ -433,3 +434,3 @@
       if (window) {
-        this.keyEventListener = function (event) {
+        this.keyDownEventListener = function (event) {
           if (_this3.paused === true) {
@@ -461,3 +462,3 @@ return;
             if (preventDefaultNavigation) {
-              _this3.log('keyEventListener', 'default navigation prevented');
+              _this3.log('keyDownEventListener', 'default navigation prevented');
               _this3.visualDebugger && _this3.visualDebugger.clear();
@@ -470,3 +471,15 @@ } else {
 
-        window.addEventListener('keydown', (0, _throttle2.default)(this.keyEventListener, this.throttle));
+        // Apply throttle only if the option we got is > 0 to avoid limiting the listener to every animation frame
+        if (this.throttle) {
+          this.keyDownEventListener = (0, _throttle2.default)(this.keyDownEventListener.bind(this), this.throttle);
+
+          // When throttling then make sure to only throttle key down and flush in the case of key up
+          this.keyUpEventListener = function () {
+            return _this3.keyDownEventListener.flush();
+          };
+
+          window.addEventListener('keyup', this.keyUpEventListener);
+        }
+
+        window.addEventListener('keydown', this.keyDownEventListener);
       }
@@ -478,4 +491,9 @@ }
       if (window) {
-        window.removeEventListener('keydown', this.keyEventListener);
-        this.keyEventListener = null;
+        window.removeEventListener('keydown', this.keyDownEventListener);
+        this.keyDownEventListener = null;
+
+        if (this.throttle) {
+          window.removeEventListener('keyup', this.keyUpEventListener);
+          this.keyUpEventListener = null;
+        }
       }
@@ -482,0 +500,0 @@ }

package.json

 {
   "name": "@noriginmedia/react-spatial-navigation",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "HOC-based Spatial Navigation (key navigation) solution for React",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/spatialNavigation.js

@@ -290,3 +290,4 @@ import filter from 'lodash/filter';
 
-    this.keyEventListener = null;
+    this.keyDownEventListener = null;
+    this.keyUpEventListener = null;
     this.keyMap = DEFAULT_KEY_MAP;
@@ -367,3 +368,3 @@
     if (window) {
-      this.keyEventListener = (event) => {
+      this.keyDownEventListener = (event) => {
         if (this.paused === true) {
@@ -393,3 +394,3 @@ return;
           if (preventDefaultNavigation) {
-            this.log('keyEventListener', 'default navigation prevented');
+            this.log('keyDownEventListener', 'default navigation prevented');
             this.visualDebugger && this.visualDebugger.clear();
@@ -402,3 +403,13 @@ } else {
 
-      window.addEventListener('keydown', lodashThrottle(this.keyEventListener, this.throttle));
+      // Apply throttle only if the option we got is > 0 to avoid limiting the listener to every animation frame
+      if (this.throttle) {
+        this.keyDownEventListener = lodashThrottle(this.keyDownEventListener.bind(this), this.throttle);
+
+        // When throttling then make sure to only throttle key down and flush in the case of key up
+        this.keyUpEventListener = () => this.keyDownEventListener.flush();
+
+        window.addEventListener('keyup', this.keyUpEventListener);
+      }
+
+      window.addEventListener('keydown', this.keyDownEventListener);
     }
@@ -409,4 +420,9 @@ }
     if (window) {
-      window.removeEventListener('keydown', this.keyEventListener);
-      this.keyEventListener = null;
+      window.removeEventListener('keydown', this.keyDownEventListener);
+      this.keyDownEventListener = null;
+
+      if (this.throttle) {
+        window.removeEventListener('keyup', this.keyUpEventListener);
+        this.keyUpEventListener = null;
+      }
     }
@@ -413,0 +429,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

4663739

increased by0.03%

Lines of code

3055

increased by0.86%

No dependency changes