dashboard: refactor — only load one acquire panel (activeAcquirer or empty), change focus behavior, utilize onload/onunload

src/plugins/Dashboard/Dashboard.js

@@ -146,19 +146,19 @@ export default function Dashboard (props) {
           : null
         }
 
-        ${props.acquirers.map((target) => {
-          return html`<div class="UppyDashboardContent-panel"
-                           id="${props.panelSelectorPrefix}--${target.id}"
-                           role="tabpanel"
-                           aria-hidden="${target.isHidden}">
-             <div class="UppyDashboardContent-bar">
-               <h2 class="UppyDashboardContent-title">${props.i18n('importFrom')} ${target.name}</h2>
-               <button class="UppyDashboardContent-back"
-                       onclick=${props.hideAllPanels}>${props.i18n('done')}</button>
+        <div class="UppyDashboardContent-panel"
+             role="tabpanel"
+             aria-hidden="${props.activeAcquirer ? props.activeAcquirer.isHidden : 'true'}">
+          <div class="UppyDashboardContent-bar">
+            <h2 class="UppyDashboardContent-title">
+              ${props.i18n('importFrom')} ${props.activeAcquirer ? props.activeAcquirer.name : null}
+            </h2>
+            <button class="UppyDashboardContent-back"
+                    onclick=${props.hideAllPanels}>${props.i18n('done')}</button>
              </div>
-            ${target.render(props.state)}
-          </div>`
-        })}
+            ${props.activeAcquirer ? props.activeAcquirer.render(props.state) : null}
+          </div>
+        </div>
 
         <div class="UppyDashboard-progressindicators">
           ${props.progressindicators.map((target) => {

src/plugins/Dashboard/index.js

@@ -101,7 +101,7 @@ export default class DashboardUI extends Plugin {
     const newTargets = modal.targets.map((target) => {
       if (target.type === 'acquirer') {
         if (target.id === id) {
-          target.focus()
+          // target.focus()
           return Object.assign({}, target, {
             isHidden: false
           })
@@ -268,6 +268,14 @@ export default class DashboardUI extends Plugin {
       return target.type === 'acquirer'
     })
 
+    let activeAcquirer = acquirers.filter((acquirer) => {
+      return !acquirer.isHidden
+    })[0]
+
+    if (typeof activeAcquirer === 'undefined') {
+      activeAcquirer = false
+    }
+
     const progressindicators = state.modal.targets.filter((target) => {
       return target.type === 'progressindicator'
     })
@@ -318,6 +326,7 @@ export default class DashboardUI extends Plugin {
       isAllComplete: isAllComplete,
       isAllPaused: isAllPaused,
       acquirers: acquirers,
+      activeAcquirer: activeAcquirer,
       progressindicators: progressindicators,
       autoProceed: this.core.opts.autoProceed,
       id: this.id,

src/plugins/Dummy.js

@@ -44,33 +44,38 @@ export default class Dummy extends Plugin {
     const bla = html`<h2>this is strange 2</h2>`
     return html`
       <div class="wow-this-works">
-        <input class="UppyDummy-firstInput" type="text" value="hello">
+        <input class="UppyDummy-firstInput" type="text" value="hello" onload=${(el) => {
+          el.focus()
+        }} />
         ${this.strange}
         ${bla}
       </div>
     `
   }
 
-  focus () {
-    const firstInput = document.querySelector(`${this.target} .UppyDummy-firstInput`)
-
-    // only works for the first time if wrapped in setTimeout for some reason
-    // firstInput.focus()
-    setTimeout(function () {
-      firstInput.focus()
-    }, 10)
-
-    setTimeout(() => {
-      this.core.emit('informer', 'Hello! I’m a test Informer message', 'info', 4500)
-      this.addFakeFileJustToTest()
-    }, 1000)
-  }
+  // focus () {
+  //   return
+  //   console.log(`${this.target} .UppyDummy-firstInput`)
+  //
+  //   const firstInput = document.querySelector(`${this.target} .UppyDummy-firstInput`)
+  //
+  //   // only works for the first time if wrapped in setTimeout for some reason
+  //   // firstInput.focus()
+  //   setTimeout(function () {
+  //     firstInput.focus()
+  //   }, 10)
+  //
+  //   setTimeout(() => {
+  //     this.core.emit('informer', 'Hello! I’m a test Informer message', 'info', 4500)
+  //     this.addFakeFileJustToTest()
+  //   }, 1000)
+  // }
 
   install () {
     const target = this.opts.target
     const plugin = this
     this.target = this.mount(target, plugin)
-    //
+
     // function workerFunc () {
     //   self.addEventListener('message', (e) => {
     //     const file = e.data.file

src/plugins/Webcam/CameraScreen.js

@@ -11,7 +11,10 @@ export default (props) => {
   }
 
   return html`
-    <div class="UppyWebcam-container">
+    <div class="UppyWebcam-container" onload=${(el) => {
+      props.focus()
+      document.querySelector('.UppyWebcam-stopRecordBtn').focus()
+    }}>
       <div class='UppyWebcam-videoContainer'>
         ${video}
       </div>

src/plugins/Webcam/index.js

@@ -93,6 +93,8 @@ export default class Webcam extends Plugin {
   }
 
   render (state) {
+    this.start()
+
     if (!state.webcam.cameraReady && !state.webcam.useTheFlash) {
       return PermissionsScreen(state.webcam)
     }
@@ -105,23 +107,13 @@ export default class Webcam extends Plugin {
 
     return CameraScreen(extend(state.webcam, {
       onSnapshot: this.takeSnapshot,
+      focus: this.focus,
       getSWFHTML: this.webcam.getSWFHTML,
       src: this.stream
     }))
   }
 
   focus () {
-    const firstInput = document.querySelector('.UppyWebcam-stopRecordBtn')
-    // only works for the first time if wrapped in setTimeout for some reason
-    // firstInput.focus()
-    if (firstInput) {
-      setTimeout(function () {
-        firstInput.focus()
-      }, 10)
-    }
-
-    this.start()
-
     setTimeout(() => {
       this.core.emitter.emit('informer', 'Smile!', 'info', 3500)
     }, 1000)