Add functionality to support keys outside of directional arrows and enter button.

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/>

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>
     );

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": {

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;

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;
     }