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
};