diff --git a/src/common/Button/Button.js b/src/common/Button/Button.js deleted file mode 100644 index 783a868ba..000000000 --- a/src/common/Button/Button.js +++ /dev/null @@ -1,77 +0,0 @@ -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; -import { withFocusable } from 'stremio-common'; - -class Button extends PureComponent { - onClick = (event) => { - if (this.props.stopPropagation) { - event.stopPropagation(); - } - - if (typeof this.props.onClick === 'function') { - this.props.onClick(event); - } - } - - onKeyUp = (event) => { - if (event.which === 13) { // Enter key code - this.onClick(event); - } - - if (typeof this.props.onKeyUp === 'function') { - this.props.onKeyUp(event); - } - } - - onDrag = (event) => { - event.currentTarget.blur(); - - if (typeof this.props.onDrag === 'function') { - this.props.onDrag(event); - } - } - - onMouseOut = (event) => { - event.currentTarget.blur(); - - if (typeof this.props.onMouseOut === 'function') { - this.props.onMouseOut(event); - } - } - - render() { - const { forwardedRef, focusable, stopPropagation, ...props } = this.props; - return ( -
- ); - } -} - -Button.propTypes = { - focusable: PropTypes.bool.isRequired, - stopPropagation: PropTypes.bool.isRequired -}; -Button.defaultProps = { - focusable: false, - stopPropagation: true -}; - -const ButtonWithFocusable = withFocusable(Button); - -ButtonWithFocusable.displayName = 'ButtonWithFocusable'; - -const ButtonWithForwardedRef = React.forwardRef((props, ref) => ( - -)); - -ButtonWithForwardedRef.displayName = 'ButtonWithForwardedRef'; - -export default ButtonWithForwardedRef; diff --git a/src/common/Button/index.js b/src/common/Button/index.js deleted file mode 100644 index 803f51fbb..000000000 --- a/src/common/Button/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Button from './Button'; - -export default Button; diff --git a/src/common/Input/Input.js b/src/common/Input/Input.js index 1766e975d..6954257a2 100644 --- a/src/common/Input/Input.js +++ b/src/common/Input/Input.js @@ -2,20 +2,96 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { withFocusable } from 'stremio-common'; +const ENTER_KEY_CODE = 13; +const BUTTON_INPUT_TYPES = ['button', 'submit', 'link', 'checkbox']; +const TEXT_INPUT_TYPES = ['text', 'password', 'email']; + class Input extends PureComponent { + onClick = (event) => { + if (typeof this.props.onClick === 'function') { + this.props.onClick(event); + } + + if (this.props.type === 'checkbox') { + event.preventDefault(); + } + } + + onKeyUp = (event) => { + if (typeof this.props.onKeyUp === 'function') { + this.props.onKeyUp(event); + } + + if (!event.defaultPrevented && BUTTON_INPUT_TYPES.includes(this.props.type) && event.which === ENTER_KEY_CODE) { + event.currentTarget.click(); + } + } + + onDrag = (event) => { + if (typeof this.props.onDrag === 'function') { + this.props.onDrag(event); + } + + if (!event.defaultPrevented && BUTTON_INPUT_TYPES.includes(this.props.type)) { + event.currentTarget.blur(); + } + } + + onMouseOut = (event) => { + if (typeof this.props.onMouseOut === 'function') { + this.props.onMouseOut(event); + } + + if (!event.defaultPrevented && BUTTON_INPUT_TYPES.includes(this.props.type)) { + event.currentTarget.blur(); + } + } + render() { - const { forwardedRef, focusable, ...props } = this.props; + const { forwardedRef, focusable, type, ...props } = this.props; + + if (type === 'button') { + return ( +
+ ); + } + + if (type === 'link') { + return ( + + ); + } + return ( ); } } Input.propTypes = { + type: PropTypes.oneOf([...BUTTON_INPUT_TYPES, ...TEXT_INPUT_TYPES]).isRequired, focusable: PropTypes.bool.isRequired }; Input.defaultProps = { diff --git a/src/common/Link/Link.js b/src/common/Link/Link.js deleted file mode 100644 index dadb27377..000000000 --- a/src/common/Link/Link.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; -import { withFocusable } from 'stremio-common'; - -class Link extends PureComponent { - render() { - const { forwardedRef, focusable, ...props } = this.props; - return ( - - ); - } -} - -Link.propTypes = { - focusable: PropTypes.bool.isRequired -}; -Link.defaultProps = { - focusable: false -}; - -const LinkWithFocusable = withFocusable(Link); - -LinkWithFocusable.displayName = 'LinkWithFocusable'; - -const LinkWithForwardedRef = React.forwardRef((props, ref) => ( - -)); - -LinkWithForwardedRef.displayName = 'LinkWithForwardedRef'; - -export default LinkWithForwardedRef; diff --git a/src/common/Link/index.js b/src/common/Link/index.js deleted file mode 100644 index 18a195368..000000000 --- a/src/common/Link/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Link from './Link'; - -export default Link; diff --git a/src/common/index.js b/src/common/index.js index d6fb24585..7d4d2e23e 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -1,9 +1,7 @@ import Slider from './Slider'; import { FocusableProvider, withFocusable } from './Focusable'; -import Button from './Button'; import Checkbox from './Checkbox'; import Input from './Input'; -import Link from './Link'; import { Modal, ModalsContainerContext, withModalsContainer } from './Modal'; import Popup from './Popup'; import Router from './Router'; @@ -15,7 +13,6 @@ import UserPanel from './UserPanel'; export { Checkbox, Input, - Link, Popup, NavBar, ModalsContainerContext, @@ -27,6 +24,5 @@ export { UserPanel, Slider, FocusableProvider, - withFocusable, - Button + withFocusable };