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

common useTabIndex hook implemented

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-05 00:37:47 +03:00
parent 8181287888
commit 31c3ccde3e
3 changed files with 18 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,13 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useFocusable } = require('stremio-navigation');
const useTabIndex = require('../useTabIndex');
const styles = require('./styles');
const ENTER_KEY_CODE = 13;
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);
@ -35,10 +35,7 @@ const Button = React.forwardRef(({ children, ...props }, ref) => {
...props,
ref,
className: classnames(props.className, styles['button-container'], { 'disabled': props.disabled }),
tabIndex: (props.tabIndex === null || isNaN(props.tabIndex)) ?
(focusable && !props.disabled ? 0 : -1)
:
props.tabIndex,
tabIndex,
onKeyUp,
onMouseDown
},

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

@ -1,12 +1,12 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useFocusable } = require('stremio-navigation');
const useTabIndex = require('../useTabIndex');
const ENTER_KEY_CODE = 13;
const Input = 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,7 +21,7 @@ const Input = React.forwardRef((props, ref) => {
{...props}
ref={ref}
className={classnames(props.className, { 'disabled': props.disabled })}
tabIndex={(props.tabIndex === null || isNaN(props.tabIndex)) ? (focusable && !props.disabled ? 0 : -1) : props.tabIndex}
tabIndex={tabIndex}
onKeyUp={onKeyUp}
/>
);

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

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