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 ( - +
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 ( - this.onFocus()} onBlur={() => this.onBlur()} onEnterDown={(e, n) => this.onEnterDown(e, n)} navDefault> + this.onFocus()} onBlur={() => this.onBlur()} onEnterDown={(e, n) => this.onEnterDown(e, n)} onSupportedKeyDown={(e, n) => this.onSupportedKeyDown(e, n)} navDefault>
); 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": { 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; }