Slight improvements in throttle implementation (#18)

* Added throttling options and key up now calls .cancel instead of .flush

* New build

* Bumped minor version to reflect changes (v2.5.0 -> v2.6.0)

* New version and changes reflected in CHANGELOG.md

CHANGELOG.md

@@ -6,6 +6,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.6.0]
+### Fixed
+- Key up triggers `.cancel()` instead of `.flush()`
+### Added
+- Throttling now applies options to disable trailing functions
+
 ## [2.5.0]
 ### Fixed
 - Throttling is now only applied if the throttle option supplied was greater than 0

dist/spatialNavigation.js

@@ -82,6 +82,11 @@ var DEFAULT_KEY_MAP = (_DEFAULT_KEY_MAP = {}, _defineProperty(_DEFAULT_KEY_MAP,
 
 var DEBUG_FN_COLORS = ['#0FF', '#FF0', '#F0F'];
 
+var THROTTLE_OPTIONS = {
+  leading: true,
+  trailing: false
+};
+
 /* eslint-disable no-nested-ternary */
 
 var SpatialNavigation = function () {
@@ -467,11 +472,11 @@ var SpatialNavigation = function () {
 
         // 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);
+          this.keyDownEventListener = (0, _throttle2.default)(this.keyDownEventListener.bind(this), this.throttle, THROTTLE_OPTIONS);
 
-          // When throttling then make sure to only throttle key down and flush in the case of key up
+          // When throttling then make sure to only throttle key down and cancel any queued functions in case of key up
           this.keyUpEventListener = function () {
-            return _this3.keyDownEventListener.flush();
+            return _this3.keyDownEventListener.cancel();
           };
 
           window.addEventListener('keyup', this.keyUpEventListener);

package.json

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

src/spatialNavigation.js

@@ -40,6 +40,11 @@ const DEFAULT_KEY_MAP = {
 
 const DEBUG_FN_COLORS = ['#0FF', '#FF0', '#F0F'];
 
+const THROTTLE_OPTIONS = {
+  leading: true,
+  trailing: false
+};
+
 /* eslint-disable no-nested-ternary */
 class SpatialNavigation {
   /**
@@ -399,10 +404,11 @@ class SpatialNavigation {
 
       // 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);
+        this.keyDownEventListener =
+          lodashThrottle(this.keyDownEventListener.bind(this), this.throttle, THROTTLE_OPTIONS);
 
-        // When throttling then make sure to only throttle key down and flush in the case of key up
-        this.keyUpEventListener = () => this.keyDownEventListener.flush();
+        // When throttling then make sure to only throttle key down and cancel any queued functions in case of key up
+        this.keyUpEventListener = () => this.keyDownEventListener.cancel();
 
         window.addEventListener('keyup', this.keyUpEventListener);
       }