Convert Informer and ProgressBar to JSX

src/plugins/Dashboard/Tabs.js

@@ -29,7 +29,7 @@ class Tabs extends Component {
                     class="UppyDashboardTab-btn"
                     role="tab"
                     tabindex="0"
-                    onclick=${this.input.click}>
+                    onclick=${(ev) => this.input.click()}>
               ${localIcon()}
               <h5 class="UppyDashboardTab-name">${this.props.i18n('myDevice')}</h5>
             </button>

src/plugins/Informer.js

@@ -1,8 +1,6 @@
 const Plugin = require('../core/Plugin')
 
 const { h } = require('preact')
-const hyperx = require('hyperx')
-const html = hyperx(h)
 
 /**
  * Informer
@@ -47,20 +45,26 @@ module.exports = class Informer extends Plugin {
   }
 
   render (state) {
-    const {isHidden, type, message, details} = state.info
-    const style = `background-color: ${this.opts.typeColors[type].bg}; color: ${this.opts.typeColors[type].text};`
+    const { isHidden, type, message, details } = state.info
+    const style = {
+      backgroundColor: this.opts.typeColors[type].bg,
+      color: this.opts.typeColors[type].text
+    }
 
-    return html`<div class="Uppy UppyInformer" 
-                     style="${style}" 
-                     aria-hidden="${isHidden}" >
-      <p role="alert">
-        ${message} 
-        ${details ? html`<span style="color: ${this.opts.typeColors[type].bg}" 
-                               data-balloon="${details}" 
-                               data-balloon-pos="up" 
-                               data-balloon-length="large">?</span>` : null}
-      </p>
-    </div>`
+    return (
+      <div class="Uppy UppyInformer"
+        style={style}
+        aria-hidden={isHidden}>
+        <p role="alert">
+          {message}
+          {details && <span style={{ color: this.opts.typeColors[type].bg }}
+            data-balloon="{details}"
+            data-balloon-pos="up"
+            data-balloon-length="large">?</span>
+          }
+        </p>
+      </div>
+    )
   }
 
   install () {

src/plugins/ProgressBar.js

@@ -1,7 +1,5 @@
 const Plugin = require('../core/Plugin')
 const { h } = require('preact')
-const hyperx = require('hyperx')
-const html = hyperx(h)
 
 /**
  * Progress bar
@@ -30,10 +28,10 @@ module.exports = class ProgressBar extends Plugin {
   render (state) {
     const progress = state.totalProgress || 0
 
-    return html`<div class="UppyProgressBar" style="${this.opts.fixed ? 'position: fixed' : 'null'}">
-      <div class="UppyProgressBar-inner" style="width: ${progress}%"></div>
-      <div class="UppyProgressBar-percentage">${progress}</div>
-    </div>`
+    return <div class="UppyProgressBar" style={{ position: this.opts.fixed ? 'fixed' : 'initial' }}>
+      <div class="UppyProgressBar-inner" style={{ width: progress + '%' }} />
+      <div class="UppyProgressBar-percentage">{progress}</div>
+    </div>
   }
 
   install () {