From efa631ddcf4ffd6f4d2a0553315b21f1ec7e34cb Mon Sep 17 00:00:00 2001
From: david caneso <dmc@davidcaneso.com>
Date: Fri, 29 Mar 2019 14:38:35 -0700
Subject: [PATCH 1/3] add functionality to support keys other than up, down,
 left, right, and enter. ex: use case mapping a key to simulate the home
 button on a tv remote.

---
 src/Focusable.jsx  |  3 ++-
 src/Navigation.jsx | 27 +++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/Focusable.jsx b/src/Focusable.jsx
index cd00049..2846982 100644
--- a/src/Focusable.jsx
+++ b/src/Focusable.jsx
@@ -198,7 +198,8 @@ Focusable.defaultProps = {
   retainLastFocus: false,
   onFocus: PropTypes.function,
   onBlur: PropTypes.function,
-  onEnterDown: PropTypes.function
+  onEnterDown: PropTypes.function,
+  onSupportedKeyDown: PropTypes.function
 };
 
 export default Focusable;
diff --git a/src/Navigation.jsx b/src/Navigation.jsx
index ad2b100..add6957 100644
--- a/src/Navigation.jsx
+++ b/src/Navigation.jsx
@@ -23,6 +23,12 @@ class Navigation extends Component {
   root = null;
   focusableComponents = {};
   focusableIds = 0;
+  supportedKeys = {};
+
+  constructor(props){
+    super(props);
+    this.supportedKeys = props.supportedKeys;
+  }
 
   onKeyDown = (evt) => {
     if (this._pause || evt.altKey || evt.ctrlKey || evt.metaKey || evt.shiftKey) {
@@ -44,6 +50,22 @@ class Navigation extends Component {
             return preventDefault();
           }
         }
+      }else{
+        
+        if(this.supportedKeys){
+          let keyFound = this.supportedKeys.find(function(item) {
+            return item.code === evt.keyCode;
+          });
+  
+          if(keyFound){
+            // console.log("keyFound", keyFound)
+            if (this.currentFocusedPath) {
+              if (!this.fireEvent(this.getLastFromPath(this.currentFocusedPath), 'supportedKey-down', keyFound.stringValue)) {
+                return preventDefault();
+              }
+            }
+          }
+        }
       }
       return;
     }
@@ -80,6 +102,11 @@ class Navigation extends Component {
         if (element.props.onEnterDown)
           element.props.onEnterDown(evtProps, this);
         break;
+      case 'supportedKey-down':
+        if (element.props.onSupportedKeyDown)
+          element.props.onSupportedKeyDown(evtProps, this);
+        break;
+        
       default:
         return false;
     }

From fd8dd30749b8b3ef3bdf2007dc96db37eb5ecc12 Mon Sep 17 00:00:00 2001
From: david caneso <dmc@davidcaneso.com>
Date: Fri, 29 Mar 2019 14:42:06 -0700
Subject: [PATCH 2/3] update the example to use custom supportedKeys prop.
 focusing on the search field and pressing the space bar mirrors the
 functionality of pressing the enter button focusing on the search field and
 pressing the escape key logs "esc was pressed" to the console

---
 examples/youtube-react-tv/src/App.js    |  2 +-
 examples/youtube-react-tv/src/Search.js | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/examples/youtube-react-tv/src/App.js b/examples/youtube-react-tv/src/App.js
index 59ab89c..8802bef 100644
--- a/examples/youtube-react-tv/src/App.js
+++ b/examples/youtube-react-tv/src/App.js
@@ -28,7 +28,7 @@ class ReactTVApp extends React.Component {
 
   render() {
     return (
-      <Navigation>
+      <Navigation supportedKeys={[{code:32, stringValue:"space"}, {code:27, stringValue:"esc"}]}>
         <div id="container">
           <HorizontalList>
             <Sidebar/>
diff --git a/examples/youtube-react-tv/src/Search.js b/examples/youtube-react-tv/src/Search.js
index dc32860..b6a1afe 100644
--- a/examples/youtube-react-tv/src/Search.js
+++ b/examples/youtube-react-tv/src/Search.js
@@ -25,9 +25,21 @@ export default class Search extends React.Component {
     navigation.forceFocus('sidebar');
   }
 
+  onSupportedKeyDown(event, navigation) {
+    console.log('onSupportedKeyDown', event, navigation);
+    
+    if(event === "space"){
+      this.onEnterDown(event, navigation);
+    }else if(event === "esc"){
+      console.log("esc was pressed");
+      navigation.focusDefault();
+    }
+  }
+
+
   render() {
     return (
-      <Focusable onFocus={() => this.onFocus()} onBlur={() => this.onBlur()} onEnterDown={(e, n) => this.onEnterDown(e, n)} navDefault>
+      <Focusable onFocus={() => this.onFocus()} onBlur={() => this.onBlur()} onEnterDown={(e, n) => this.onEnterDown(e, n)} onSupportedKeyDown={(e, n) => this.onSupportedKeyDown(e, n)} navDefault>
         <div class={this.state.active ? 'search-box-placeholder-focus' : ''} id="search-box-placeholder"><i class="fa fa-search"></i></div>
       </Focusable>
     );

From 4a8f34d2a78c913f9c82bfff1f8b784a783a3b7d Mon Sep 17 00:00:00 2001
From: david caneso <dmc@davidcaneso.com>
Date: Fri, 29 Mar 2019 14:43:23 -0700
Subject: [PATCH 3/3] bump version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d0d9530..d63135e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-key-navigation",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Use the key to navigate around components",
   "main": "build/index.js",
   "bugs": {