Merge branch 'generic-input' of github.com:Stremio/stremio-web into share-modal

src/App/styles.less

@@ -79,10 +79,14 @@ html, body, :global(#app) {
         height: 100%;
     }
 
-    input {
+    input[type="email"], input[type="password"], input[type="text"] {
         user-select: text;
     }
 
+    input::-moz-focus-inner {
+        border: 0;
+    }
+
     ::-webkit-scrollbar {
         width: var(--scroll-bar-width);
     }

src/common/Button/Button.js

@@ -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 (
-            <div
-                {...props}
-                ref={forwardedRef}
-                tabIndex={focusable ? 0 : -1}
-                onClick={this.onClick}
-                onKeyUp={this.onKeyUp}
-                onDrag={this.onDrag}
-                onMouseOut={this.onMouseOut}
-            />
-        );
-    }
-}
-
-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) => (
-    <ButtonWithFocusable {...props} forwardedRef={ref} />
-));
-
-ButtonWithForwardedRef.displayName = 'ButtonWithForwardedRef';
-
-export default ButtonWithForwardedRef;

src/common/Button/index.js

@@ -1,3 +0,0 @@
-import Button from './Button';
-
-export default Button;

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 (
+                <div
+                    {...props}
+                    ref={forwardedRef}
+                    tabIndex={focusable ? 0 : -1}
+                    onKeyUp={this.onKeyUp}
+                    onDrag={this.onDrag}
+                    onMouseOut={this.onMouseOut}
+                />
+            );
+        }
+
+        if (type === 'link') {
+            return (
+                <a
+                    {...props}
+                    ref={forwardedRef}
+                    tabIndex={focusable ? 0 : -1}
+                    onKeyUp={this.onKeyUp}
+                    onDrag={this.onDrag}
+                    onMouseOut={this.onMouseOut}
+                />
+            );
+        }
+
         return (
             <input
                 {...props}
                 ref={forwardedRef}
                 tabIndex={focusable ? 0 : -1}
+                type={type}
+                onKeyUp={this.onKeyUp}
+                onDrag={this.onDrag}
+                onMouseOut={this.onMouseOut}
             />
         );
     }
 }
 
 Input.propTypes = {
+    type: PropTypes.oneOf([...BUTTON_INPUT_TYPES, ...TEXT_INPUT_TYPES]).isRequired,
     focusable: PropTypes.bool.isRequired
 };
 Input.defaultProps = {

src/common/Link/Link.js

@@ -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 (
-            <a
-                {...props}
-                ref={forwardedRef}
-                tabIndex={focusable ? 0 : -1}
-            />
-        );
-    }
-}
-
-Link.propTypes = {
-    focusable: PropTypes.bool.isRequired
-};
-Link.defaultProps = {
-    focusable: false
-};
-
-const LinkWithFocusable = withFocusable(Link);
-
-LinkWithFocusable.displayName = 'LinkWithFocusable';
-
-const LinkWithForwardedRef = React.forwardRef((props, ref) => (
-    <LinkWithFocusable {...props} forwardedRef={ref} />
-));
-
-LinkWithForwardedRef.displayName = 'LinkWithForwardedRef';
-
-export default LinkWithForwardedRef;

src/common/Link/index.js

@@ -1,3 +0,0 @@
-import Link from './Link';
-
-export default Link;

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