checkbox focusability handled

This commit is contained in:
NikolaBorislavovHristov 2019-01-28 13:33:23 +02:00
parent 413ca7d8ca
commit f1c955541e
2 changed files with 11 additions and 4 deletions

View file

@ -2,11 +2,13 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from 'stremio-icons/dom';
import { withFocusable } from 'stremio-common';
import styles from './styles';
class Checkbox extends Component {
shouldComponentUpdate(nextProps) {
return nextProps.checked !== this.props.checked ||
return nextProps.focusable !== this.props.focusable ||
nextProps.checked !== this.props.checked ||
nextProps.disabled !== this.props.disabled ||
nextProps.className !== this.props.className;
}
@ -29,6 +31,7 @@ class Checkbox extends Component {
ref={this.props.forwardedRef}
className={styles['native-checkbox']}
type={'checkbox'}
tabIndex={this.props.focusable ? 0 : -1}
disabled={this.props.disabled}
defaultChecked={this.props.checked}
onClick={this.onClick}
@ -50,8 +53,12 @@ Checkbox.defaultProps = {
checked: false
};
const CheckboxWithFocusable = withFocusable(Checkbox);
CheckboxWithFocusable.displayName = 'CheckboxWithFocusable';
const CheckboxWithForwardedRef = React.forwardRef((props, ref) => (
<Checkbox {...props} forwardedRef={ref} />
<CheckboxWithFocusable {...props} forwardedRef={ref} />
));
CheckboxWithForwardedRef.displayName = 'CheckboxWithForwardedRef';

View file

@ -1,7 +1,6 @@
import Checkbox from './Checkbox';
import Popup from './Popup';
import NavBar from './NavBar';
import { ModalsContainerContext, Modal, withModalsContainer } from './Modal';
import { Modal, ModalsContainerContext, withModalsContainer } from './Modal';
import MetadataItem from './MetadataItem';
import Router from './Router';
import LibraryItemList from './LibraryItemList';
@ -10,6 +9,7 @@ import ShareAddon from './ShareAddon';
import UserPanel from './UserPanel';
import Slider from './Slider';
import { FocusableContext, withFocusable } from './Focusable';
import Checkbox from './Checkbox';
import Button from './Button';
export {