From fdffdb0cb8aad78ac1d4cf7e085c960c7d111236 Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Wed, 13 Dec 2017 19:55:43 -0500
Subject: [PATCH] refactor ActionBrowseTagline into a component

---
 src/plugins/Dashboard/ActionBrowseTagline.js | 57 ++++++++++----------
 src/plugins/Dashboard/FileList.js            |  2 +-
 src/plugins/Dashboard/Tabs.js                | 10 ++--
 3 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/src/plugins/Dashboard/ActionBrowseTagline.js b/src/plugins/Dashboard/ActionBrowseTagline.js
index b2fb4b419..4bdf103a9 100644
--- a/src/plugins/Dashboard/ActionBrowseTagline.js
+++ b/src/plugins/Dashboard/ActionBrowseTagline.js
@@ -1,33 +1,32 @@
-const { h } = require('preact')
+const { h, Component } = require('preact')
 const hyperx = require('hyperx')
 const html = hyperx(h)
 
-let inputEl
-
-module.exports = (props) => {
-  const input = html`
-    <input class="UppyDashboard-input"
-           hidden="true"
-           aria-hidden="true" 
-           tabindex="-1" 
-           type="file" 
-           name="files[]" 
-           multiple="true"
-           onchange=${props.handleInputChange} 
-           ref=${(input) => {
-             inputEl = input
-           }} />`
-
-  return html`
-    <span>
-      ${props.acquirers.length === 0
-        ? props.i18n('dropPaste')
-        : props.i18n('dropPasteImport')
-      }
-      <button type="button"
-              class="UppyDashboard-browse"
-              onclick=${(ev) => inputEl.click()}>${props.i18n('browse')}</button>
-      ${input}
-    </span>
-  `
+class ActionBrowseTagline extends Component {
+  render () {
+    return html`
+      <span>
+        ${this.props.acquirers.length === 0
+          ? this.props.i18n('dropPaste')
+          : this.props.i18n('dropPasteImport')
+        }
+        <button type="button"
+                class="UppyDashboard-browse"
+                onclick=${(ev) => this.input.click()}>${this.props.i18n('browse')}</button>
+        <input class="UppyDashboard-input"
+               hidden="true"
+               aria-hidden="true" 
+               tabindex="-1" 
+               type="file" 
+               name="files[]" 
+               multiple="true"
+               onchange=${this.props.handleInputChange} 
+               ref=${(input) => {
+                 this.input = input
+               }} />
+      </span>
+    `
+  }
 }
+
+module.exports = ActionBrowseTagline
diff --git a/src/plugins/Dashboard/FileList.js b/src/plugins/Dashboard/FileList.js
index f4b146889..31887f75e 100644
--- a/src/plugins/Dashboard/FileList.js
+++ b/src/plugins/Dashboard/FileList.js
@@ -13,7 +13,7 @@ module.exports = (props) => {
        ? html`<div class="UppyDashboard-bgIcon">
           ${dashboardBgIcon()}
           <h3 class="UppyDashboard-dropFilesTitle">
-            ${ActionBrowseTagline({
+            ${h(ActionBrowseTagline, {
               acquirers: props.acquirers,
               handleInputChange: props.handleInputChange,
               i18n: props.i18n
diff --git a/src/plugins/Dashboard/Tabs.js b/src/plugins/Dashboard/Tabs.js
index 43a1a199e..551675a34 100644
--- a/src/plugins/Dashboard/Tabs.js
+++ b/src/plugins/Dashboard/Tabs.js
@@ -13,11 +13,11 @@ module.exports = (props) => {
     return html`
       <div class="UppyDashboardTabs" aria-hidden="${isHidden}">
         <h3 class="UppyDashboardTabs-title">
-        ${ActionBrowseTagline({
-          acquirers: props.acquirers,
-          handleInputChange: props.handleInputChange,
-          i18n: props.i18n
-        })}
+          ${h(ActionBrowseTagline, {
+            acquirers: props.acquirers,
+            handleInputChange: props.handleInputChange,
+            i18n: props.i18n
+          })}
         </h3>
       </div>
     `