Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

useTabIndex hook reverted

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-19 18:23:01 +03:00
parent 541a5b95d2
commit 99d467d022
4 changed files with 20 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,10 @@
const React = require('react');
const classnames = require('classnames');
const { useFocusable } = require('stremio-router');
const useTabIndex = require('stremio/common/useTabIndex');
const styles = require('./styles');
const Button = React.forwardRef(({ children, ...props }, ref) => {
const focusable = useFocusable();
const tabIndex = useTabIndex(props.tabIndex, props.disabled);
const onKeyUp = React.useCallback((event) => {
if (typeof props.onKeyUp === 'function') {
props.onKeyUp(event);
@ -29,10 +29,10 @@ const Button = React.forwardRef(({ children, ...props }, ref) => {
return React.createElement(
typeof props.href === 'string' && props.href.length > 0 ? 'a' : 'div',
{
tabIndex: focusable && !props.disabled ? 0 : -1,
...props,
ref,
className: classnames(props.className, styles['button-container'], { 'disabled': props.disabled }),
tabIndex,
onKeyUp,
onMouseDown
},

6
src/common/TextInput/TextInput.js
View file

@ -1,10 +1,10 @@
const React = require('react');
const classnames = require('classnames');
const { useFocusable } = require('stremio-router');
const useTabIndex = require('stremio/common/useTabIndex');
const styles = require('./styles');
const TextInput = React.forwardRef((props, ref) => {
const focusable = useFocusable();
const tabIndex = useTabIndex(props.tabIndex, props.disabled);
const onKeyUp = React.useCallback((event) => {
if (typeof props.onKeyUp === 'function') {
props.onKeyUp(event);
@ -21,10 +21,10 @@ const TextInput = React.forwardRef((props, ref) => {
autoCapitalize={'off'}
autoComplete={'off'}
spellCheck={false}
tabIndex={focusable && !props.disabled ? 0 : -1}
{...props}
ref={ref}
className={classnames(props.className, styles['text-input-container'], { 'disabled': props.disabled })}
tabIndex={tabIndex}
onKeyUp={onKeyUp}
/>
);

4
src/common/index.js
View file

@ -20,6 +20,7 @@ const useBinaryState = require('./useBinaryState');
const useFullscreen = require('./useFullscreen');
const useLocationHash = require('./useLocationHash');
const useRouteActive = require('./useRouteActive');
const useTabIndex = require('./useTabIndex');
module.exports = {
Button,
@ -43,5 +44,6 @@ module.exports = {
useBinaryState,
useFullscreen,
useLocationHash,
useRouteActive
useRouteActive,
useTabIndex
};

11
src/common/useTabIndex.js Normal file
View file

@ -0,0 +1,11 @@
const { useFocusable } = require('stremio-router');
const useTabIndex = (tabIndex, disabled) => {
const focusable = useFocusable();
return (tabIndex === null || isNaN(tabIndex)) ?
(focusable && !disabled ? 0 : -1)
:
tabIndex;
};
module.exports = useTabIndex;