Fix issue #45 - Added setThrottle (#55)

* Added setThrottle

* Updated readme

Author: guilleccc

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+# [1.1.5]
+## Added
+- Add `setThrottle` to dynamically change throttle time.
+
+## Changed
+- Remove event listeners for `unbindEventHandlers` regardless of throttle value
+
 # [1.1.4]
 ## Changed
 - Update `parentFocusKey` when `removeFocusable`

README.md

@@ -265,6 +265,16 @@ setKeyMap({
 });
 ```
 
+### `setThrottle`
+A method for dynamically updating `throttle` and `throttleKeypresses` values. This might be useful if you want to throttle listeners under specific sections or pages.
+
+```jsx
+setThrottle({
+  throttle: 500,
+  throttleKeypresses: true
+});
+```
+
 ### `destroy`
 Resets all the settings and the storage of focusable components. Disables the navigation service.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noriginmedia/norigin-spatial-navigation",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "React hooks based Spatial Navigation solution",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/SpatialNavigation.ts

@@ -540,6 +540,7 @@ class SpatialNavigationService {
     this.updateAllLayouts = this.updateAllLayouts.bind(this);
     this.navigateByDirection = this.navigateByDirection.bind(this);
     this.init = this.init.bind(this);
+    this.setThrottle = this.setThrottle.bind(this);
     this.destroy = this.destroy.bind(this);
     this.setKeyMap = this.setKeyMap.bind(this);
     this.getCurrentFocusKey = this.getCurrentFocusKey.bind(this);
@@ -577,6 +578,21 @@ class SpatialNavigationService {
     }
   }
 
+  setThrottle({
+    throttle: throttleParam = 0,
+    throttleKeypresses = false
+  } = {}) {
+    this.throttleKeypresses = throttleKeypresses;
+
+    if (!this.nativeMode) {
+      this.unbindEventHandlers();
+      if (Number.isInteger(throttleParam)) {
+        this.throttle = throttleParam;
+      }
+      this.bindEventHandlers();
+    }
+  }
+
   startDrawLayouts() {
     const draw = () => {
       requestAnimationFrame(() => {
@@ -701,13 +717,15 @@ class SpatialNavigationService {
   unbindEventHandlers() {
     // We check both because the React Native remote debugger implements window, but not window.removeEventListener.
     if (typeof window !== 'undefined' && window.removeEventListener) {
-      window.removeEventListener('keydown', this.keyDownEventListener);
-      this.keyDownEventListener = null;
+      window.removeEventListener('keyup', this.keyUpEventListener);
+      this.keyUpEventListener = null;
 
-      if (this.throttle) {
-        window.removeEventListener('keyup', this.keyUpEventListener);
-        this.keyUpEventListener = null;
-      }
+      const listener = this.throttle
+        ? this.keyDownEventListenerThrottled
+        : this.keyDownEventListener;
+
+      window.removeEventListener('keydown', listener);
+      this.keyDownEventListener = null;
     }
   }
 
@@ -1438,4 +1456,4 @@ class SpatialNavigationService {
 /** @internal */
 export const SpatialNavigation = new SpatialNavigationService();
 
-export const { init, destroy, setKeyMap } = SpatialNavigation;
+export const { init, setThrottle, destroy, setKeyMap } = SpatialNavigation;