Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 10:42:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

use event.key for readability

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-06 10:24:25 +03:00
parent 9cea2ca7a6
commit 28781d2acc
4 changed files with 11 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/common/Button/Button.js
View file

@ -4,8 +4,6 @@ const classnames = require('classnames');
const useTabIndex = require('../useTabIndex');
const styles = require('./styles');
const ENTER_KEY_CODE = 13;
const Button = React.forwardRef(({ children, ...props }, ref) => {
const tabIndex = useTabIndex(props.tabIndex, props.disabled);
const onKeyUp = React.useCallback((event) => {
@ -13,7 +11,7 @@ const Button = React.forwardRef(({ children, ...props }, ref) => {
props.onKeyUp(event);
}
if (event.keyCode === ENTER_KEY_CODE && !event.nativeEvent.clickPrevented) {
if (event.key === 'Enter' && !event.nativeEvent.clickPrevented) {
event.currentTarget.click();
}
}, [props.onKeyUp]);

4
src/common/Input/Input.js
View file

@ -4,8 +4,6 @@ const classnames = require('classnames');
const useTabIndex = require('../useTabIndex');
const styles = require('./styles');
const ENTER_KEY_CODE = 13;
const Input = React.forwardRef((props, ref) => {
const tabIndex = useTabIndex(props.tabIndex, props.disabled);
const onKeyUp = React.useCallback((event) => {
@ -13,7 +11,7 @@ const Input = React.forwardRef((props, ref) => {
props.onKeyUp(event);
}
if (event.keyCode === ENTER_KEY_CODE && !event.nativeEvent.submitPrevented && typeof props.onSubmit === 'function') {
if (event.key === 'Enter' && !event.nativeEvent.submitPrevented && typeof props.onSubmit === 'function') {
props.onSubmit(event);
}
}, [props.onKeyUp, props.onSubmit]);

7
src/routes/Intro/Intro.js
View file

@ -7,7 +7,6 @@ require('./styles');
const LOGIN_FORM = 'LOGIN_FORM';
const SIGNUP_FORM = 'SIGNUP_FORM';
const ARROW_KEY_CODE = { 38: 'up', 40: 'down' };
class Intro extends React.Component {
constructor(props) {
@ -60,8 +59,10 @@ class Intro extends React.Component {
textInputOnKeyDown = (event) => {
event.stopPropagation();
if (ARROW_KEY_CODE[event.keyCode]) {
window.navigate(ARROW_KEY_CODE[event.keyCode]);
if (event.key === 'ArrowDown') {
window.navigate('down');
} else if (event.key === 'ArrowUp') {
window.navigate('up');
}
}

10
src/services/KeyboardNavigation/KeyboardNavigation.js
View file

@ -1,17 +1,17 @@
require('spatial-navigation-polyfill');
const TABS = [
{ href: '#/', keyCode: 112 },
{ href: '#/discover', keyCode: 113 },
{ href: '#/library', keyCode: 114 },
{ href: '#/calendar', keyCode: 115 }
{ href: '#/', key: 'F1' },
{ href: '#/discover', key: 'F2' },
{ href: '#/library', key: 'F3' },
{ href: '#/calendar', key: 'F4' }
];
function KeyboardNavigation() {
var active = false;
function onKeyDown(event) {
const tab = TABS.find(({ keyCode }) => event.keyCode === keyCode);
const tab = TABS.find(({ key }) => key === event.key);
if (tab) {
event.preventDefault();
window.location = tab.href;