More info about pressed keys on events (#55)

* added pressedKeys

* check for mouse events

* updated changelog and readme

Author: salvan13

CHANGELOG.md

@@ -4,6 +4,10 @@ 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).
 
+## [2.9.3]
+### Added
+- Added `KeyDetails` param on callback functions `onEnterPress` and `onArrowPress`
+
 ## [2.9.2]
 ### Fixed
 - Fixed issue #46 Focus jumps on wrong component: Removed `setTimeout` in `measureLayout` to avoid coordinates mismatches with DOM nodes.

README.md

@@ -260,10 +260,11 @@ String that is used as a component focus key. Should be **unique**, otherwise it
 Callback function that is called when the item is currently focused and Enter (OK) key is pressed.
 
 Payload:
-All the props passed to HOC is passed back to this callback. Useful to avoid creating callback functions during render.
+1. All the props passed to HOC is passed back to this callback. Useful to avoid creating callback functions during render.
+2. [Details](#keydetails-object) - info about pressed keys
 
 ```jsx
-const onPress = ({prop1, prop2}) => {...};
+const onPress = ({prop1, prop2}, details) => {...};
 
 ...
 <FocusableItem 
@@ -280,6 +281,7 @@ Callback function that is called when the item is currently focused and an arrow
 Payload:
 1. The directional arrow (left, right, up, down): string
 2. All the props passed to HOC is passed back to this callback. Useful to avoid creating callback functions during render.
+3. [Details](#keydetails-object) - info about pressed keys
 
 Prevent default navigation:
 By returning `false` the default navigation behavior is prevented.
@@ -373,6 +375,19 @@ This function pauses key listeners. Useful when you need to temporary disable na
 ### `resumeSpatialNavigation`: function
 This function resumes key listeners if it was paused with [pauseSpatialNavigation](#pauseSpatialNavigation-function)
 
+### Data Types
+
+### `KeyDetails`: object
+This object contains informations about keys.
+```
+{
+  pressedKeys: {
+    [KEY]: number
+  }
+}
+```
+`pressedKeys` contains a property for each pressed key in a given moment, the value is the number of keydown events fired before the keyup event.
+
 # Development
 ## Dev environment
 This library is using Parcel to serve the web build.

src/App.js

@@ -14,6 +14,8 @@ SpatialNavigation.init({
 
 // SpatialNavigation.setKeyMap(keyMap); -> Custom key map
 
+const KEY_ENTER = 'enter';
+
 const styles = StyleSheet.create({
   wrapper: {
     flex: 1,
@@ -194,9 +196,12 @@ class Content extends React.PureComponent {
     this.onProgramPress = this.onProgramPress.bind(this);
   }
 
-  onProgramPress(program) {
+  onProgramPress(programProps, {pressedKeys} = {}) {
+    if (pressedKeys && pressedKeys[KEY_ENTER] > 1) {
+      return;
+    }
     this.setState({
-      currentProgram: program
+      currentProgram: programProps
     });
   }
 
@@ -324,7 +329,7 @@ class Category extends React.PureComponent {
         {programs.map((program, index) => ((<ProgramFocusable
           {...program}
           focusKey={`PROGRAM-${this.props.realFocusKey}-${index}`}
-          onPress={this.props.onProgramPress}
+          onPress={() => this.props.onProgramPress(program)}
           onEnterPress={this.props.onProgramPress}
           key={program.title}
           onBecameFocused={this.onProgramFocused}

src/spatialNavigation.js

@@ -292,6 +292,8 @@ class SpatialNavigation {
     this.nativeMode = false;
     this.throttle = 0;
 
+    this.pressedKeys = {};
+
     /**
      * Flag used to block key events from this service
      * @type {boolean}
@@ -374,6 +376,10 @@ class SpatialNavigation {
     }
   }
 
+  getEventType(keyCode) {
+    return findKey(this.getKeyMap(), (code) => keyCode === code);
+  }
+
   bindEventHandlers() {
     if (window) {
       this.keyDownEventListener = (event) => {
@@ -385,22 +391,28 @@ class SpatialNavigation {
           this.logIndex += 1;
         }
 
-        const eventType = findKey(this.getKeyMap(), (code) => event.keyCode === code);
+        const eventType = this.getEventType(event.keyCode);
 
         if (!eventType) {
           return;
         }
 
+        this.pressedKeys[eventType] = this.pressedKeys[eventType] ? this.pressedKeys[eventType] + 1 : 1;
+
         event.preventDefault();
         event.stopPropagation();
 
+        const details = {
+          pressedKeys: this.pressedKeys
+        };
+
         if (eventType === KEY_ENTER && this.focusKey) {
-          this.onEnterPress();
+          this.onEnterPress(details);
 
           return;
         }
 
-        const preventDefaultNavigation = this.onArrowPress(eventType) === false;
+        const preventDefaultNavigation = this.onArrowPress(eventType, details) === false;
 
         if (preventDefaultNavigation) {
           this.log('keyDownEventListener', 'default navigation prevented');
@@ -414,13 +426,20 @@ class SpatialNavigation {
       if (this.throttle) {
         this.keyDownEventListener =
           lodashThrottle(this.keyDownEventListener.bind(this), this.throttle, THROTTLE_OPTIONS);
+      }
 
-        // 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();
+      // When throttling then make sure to only throttle key down and cancel any queued functions in case of key up
+      this.keyUpEventListener = (event) => {
+        const eventType = this.getEventType(event.keyCode);
 
-        window.addEventListener('keyup', this.keyUpEventListener);
-      }
+        Reflect.deleteProperty(this.pressedKeys, eventType);
+
+        if (this.throttle) {
+          this.keyDownEventListener.cancel();
+        }
+      };
 
+      window.addEventListener('keyup', this.keyUpEventListener);
       window.addEventListener('keydown', this.keyDownEventListener);
     }
   }
@@ -437,7 +456,7 @@ class SpatialNavigation {
     }
   }
 
-  onEnterPress() {
+  onEnterPress(details) {
     const component = this.focusableComponents[this.focusKey];
 
     /* Guard against last-focused component being unmounted at time of onEnterPress (e.g due to UI fading out) */
@@ -454,7 +473,7 @@ class SpatialNavigation {
       return;
     }
 
-    component.onEnterPressHandler && component.onEnterPressHandler();
+    component.onEnterPressHandler && component.onEnterPressHandler(details);
   }
 
   onArrowPress(...args) {

src/withFocusable.js

@@ -72,13 +72,13 @@ const withFocusable = ({
     onEnterPressHandler: ({
       onEnterPress = noop,
       ...rest
-    }) => () => {
-      onEnterPress(rest);
+    }) => (details) => {
+      onEnterPress(rest, details);
     },
     onArrowPressHandler: ({
       onArrowPress = noop,
       ...rest
-    }) => (...args) => onArrowPress(...args, rest),
+    }) => (direction, details) => onArrowPress(direction, rest, details),
     onBecameFocusedHandler: ({
       onBecameFocused = noop,
       ...rest