turn Tabs into a component too

src/plugins/Dashboard/ActionBrowseTagline.js

@@ -12,15 +12,17 @@ class ActionBrowseTagline extends Component {
         }
         <button type="button"
                 class="UppyDashboard-browse"
-                onclick=${(ev) => this.input.click()}>${this.props.i18n('browse')}</button>
+                onclick=${(ev) => this.input.click()}>
+          ${this.props.i18n('browse')}
+        </button>
         <input class="UppyDashboard-input"
                hidden="true"
-               aria-hidden="true" 
+               aria-hidden="true"
                tabindex="-1" 
-               type="file" 
-               name="files[]" 
+               type="file"
+               name="files[]"
                multiple="true"
-               onchange=${this.props.handleInputChange} 
+               onchange=${this.props.handleInputChange}
                ref=${(input) => {
                  this.input = input
                }} />

src/plugins/Dashboard/Dashboard.js

@@ -94,7 +94,7 @@ module.exports = function Dashboard (props) {
 
       <div class="UppyDashboard-innerWrap">
 
-        ${Tabs({
+        ${h(Tabs, {
           files: props.files,
           handleInputChange: handleInputChange,
           acquirers: props.acquirers,

src/plugins/Dashboard/Tabs.js

@@ -1,65 +1,65 @@
 const ActionBrowseTagline = require('./ActionBrowseTagline')
 const { localIcon } = require('./icons')
-const { h } = require('preact')
+const { h, Component } = require('preact')
 const hyperx = require('hyperx')
 const html = hyperx(h)
 
-let inputEl
+class Tabs extends Component {
+  render () {
+    const isHidden = Object.keys(this.props.files).length === 0
 
-module.exports = (props) => {
-  const isHidden = Object.keys(props.files).length === 0
+    if (this.props.acquirers.length === 0) {
+      return html`
+        <div class="UppyDashboardTabs" aria-hidden="${isHidden}">
+          <h3 class="UppyDashboardTabs-title">
+            ${h(ActionBrowseTagline, {
+              acquirers: this.props.acquirers,
+              handleInputChange: this.props.handleInputChange,
+              i18n: this.props.i18n
+            })}
+          </h3>
+        </div>
+      `
+    }
 
-  if (props.acquirers.length === 0) {
-    return html`
-      <div class="UppyDashboardTabs" aria-hidden="${isHidden}">
-        <h3 class="UppyDashboardTabs-title">
-          ${h(ActionBrowseTagline, {
-            acquirers: props.acquirers,
-            handleInputChange: props.handleInputChange,
-            i18n: props.i18n
-          })}
-        </h3>
-      </div>
-    `
-  }
-
-  return html`<div class="UppyDashboardTabs">
-      <ul class="UppyDashboardTabs-list" role="tablist">
-        <li class="UppyDashboardTab" role="presentation">
-          <button type="button" 
-                  class="UppyDashboardTab-btn"
-                  role="tab"
-                  tabindex="0"
-                  onclick=${ev => inputEl.click()}>
-            ${localIcon()}
-            <h5 class="UppyDashboardTab-name">${props.i18n('myDevice')}</h5>
-          </button>
-          <input class="UppyDashboard-input"
-                 hidden="true"
-                 aria-hidden="true" 
-                 tabindex="-1" 
-                 type="file" 
-                 name="files[]" 
-                 multiple="true"
-                 onchange=${props.handleInputChange} 
-                 ref=${(input) => {
-                   inputEl = input
-                 }} />
-        </li>
-        ${props.acquirers.map((target) => {
-          return html`<li class="UppyDashboardTab" role="presentation">
-            <button class="UppyDashboardTab-btn"
-                    type="button"
+    return html`<div class="UppyDashboardTabs">
+        <ul class="UppyDashboardTabs-list" role="tablist">
+          <li class="UppyDashboardTab" role="presentation">
+            <button type="button" 
+                    class="UppyDashboardTab-btn"
                     role="tab"
                     tabindex="0"
-                    aria-controls="UppyDashboardContent-panel--${target.id}"
-                    aria-selected="${target.isHidden ? 'false' : 'true'}"
-                    onclick=${() => props.showPanel(target.id)}>
-              ${target.icon()}
-              <h5 class="UppyDashboardTab-name">${target.name}</h5>
+                    onclick=${this.input.click}>
+              ${localIcon()}
+              <h5 class="UppyDashboardTab-name">${this.props.i18n('myDevice')}</h5>
             </button>
-          </li>`
-        })}
-      </ul>
-  </div>`
+            <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 }} />
+          </li>
+          ${this.props.acquirers.map((target) => {
+            return html`<li class="UppyDashboardTab" role="presentation">
+              <button class="UppyDashboardTab-btn"
+                      type="button"
+                      role="tab"
+                      tabindex="0"
+                      aria-controls="UppyDashboardContent-panel--${target.id}"
+                      aria-selected="${target.isHidden ? 'false' : 'true'}"
+                      onclick=${() => this.props.showPanel(target.id)}>
+                ${target.icon()}
+                <h5 class="UppyDashboardTab-name">${target.name}</h5>
+              </button>
+            </li>`
+          })}
+        </ul>
+    </div>`
+  }
 }
+
+module.exports = Tabs