From fcfb5bd7affa471ea81050d14f015596ff3a98db Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Sun, 4 Aug 2019 13:26:23 +0300
Subject: [PATCH] Button component implemented

---
 src/common/Button/Button.js | 42 +++++++++++++++++++++++++++++++++++++
 src/common/Button/index.js  |  3 +++
 src/common/index.js         |  2 ++
 3 files changed, 47 insertions(+)
 create mode 100644 src/common/Button/Button.js
 create mode 100644 src/common/Button/index.js

diff --git a/src/common/Button/Button.js b/src/common/Button/Button.js
new file mode 100644
index 000000000..78723aebf
--- /dev/null
+++ b/src/common/Button/Button.js
@@ -0,0 +1,42 @@
+const React = require('react');
+const { useFocusable } = require('stremio-navigation');
+
+const ENTER_KEY_CODE = 13;
+
+const Button = React.forwardRef(({ children, ...props }, ref) => {
+    const focusable = useFocusable();
+    const tabIndex = (props.tabIndex === null || isNaN(props.tabIndex)) ?
+        (focusable ? 0 : -1)
+        :
+        props.tabIndex;
+    const onKeyUp = React.useCallback((event) => {
+        if (typeof props.onKeyUp === 'function') {
+            props.onKeyUp(event);
+        }
+
+        if (event.keyCode === ENTER_KEY_CODE && !event.nativeEvent.clickPrevented) {
+            event.currentTarget.click();
+        }
+    }, [props.onKeyUp]);
+    const onMouseDown = React.useCallback((event) => {
+        if (typeof props.onMouseDown === 'function') {
+            props.onMouseDown(event);
+        }
+
+        if (!event.nativeEvent.blurPrevented) {
+            event.preventDefault();
+            if (document.activeElement instanceof HTMLElement) {
+                document.activeElement.blur();
+            }
+        }
+    }, [props.onMouseDown]);
+    return React.createElement(
+        typeof props.href === 'string' ? 'a' : 'div',
+        { ...props, ref, tabIndex, onKeyUp, onMouseDown },
+        children
+    );
+});
+
+Button.displayName = 'Button';
+
+module.exports = Button;
diff --git a/src/common/Button/index.js b/src/common/Button/index.js
new file mode 100644
index 000000000..f9c08c502
--- /dev/null
+++ b/src/common/Button/index.js
@@ -0,0 +1,3 @@
+const Button = require('./Button');
+
+module.exports = Button;
diff --git a/src/common/index.js b/src/common/index.js
index b58d5d7c1..268b8a3e4 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -1,3 +1,4 @@
+const Button = require('./Button');
 const Checkbox = require('./Checkbox');
 const ColorPicker = require('./ColorPicker');
 const Input = require('./Input');
@@ -14,6 +15,7 @@ const useBinaryState = require('./useBinaryState');
 const useLocationHash = require('./useLocationHash');
 
 module.exports = {
+    Button,
     Checkbox,
     ColorPicker,
     Input,