refactor Dashboard, add inline option

src/plugins/Dashboard/Dashboard.js

@@ -4,20 +4,21 @@ import FileItem from './FileItem'
 import FileCard from './FileCard'
 import { closeIcon, localIcon, uploadIcon, dashboardBgIcon, iconPause, iconResume } from './icons'
 
-export default function Dashboard (props, bus) {
+export default function Dashboard (props) {
   // http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog
 
-  const state = props.state
+  const { bus,
+          // log,
+          state,
+          container,
+          showProgressDetails,
+          hideModal,
+          hideAllPanels,
+          showPanel } = props
+
   const files = state.files
   const modal = state.modal
-  const container = props.container
   const showFileCard = modal.showFileCard
-  const showProgressDetails = props.showProgressDetails
-
-  const hideModal = props.hideModal
-  const hideAllPanels = props.hideAllPanels
-  const showPanel = props.showPanel
-  const log = props.log
 
   const acquirers = modal.targets.filter((target) => {
     return target.type === 'acquirer'
@@ -38,16 +39,16 @@ export default function Dashboard (props, bus) {
     bus.emit('core:upload')
   }
 
-  function handleInputChange (ev) {
+  const handleInputChange = (ev) => {
     ev.preventDefault()
-    log('All right, something selected through input...')
+    // log('All right, something selected through input...')
 
     const files = Utils.toArray(ev.target.files)
 
     files.forEach((file) => {
-      log(file)
+      // log(file)
       bus.emit('file-add', {
-        source: this.id,
+        source: props.id,
         name: file.name,
         type: file.type,
         data: file
@@ -79,31 +80,39 @@ export default function Dashboard (props, bus) {
   function renderPauseResume () {
     if (uploadStartedFilesCount > 0) {
       if (inProgressFilesCount > 0) {
-        return html`<button class="UppyDashboard-pauseResume UppyButton--circular UppyButton--yellow UppyButton--sizeS"
+        return html`<button class="UppyDashboard-pauseResume
+                                   UppyButton--circular
+                                   UppyButton--yellow
+                                   UppyButton--sizeS"
                             onclick=${() => bus.emit('core:pause-all')}>${iconPause()}</button>`
       }
 
       if (uploadStartedFilesCount !== completeFilesCount) {
-        return html`<button class="UppyDashboard-pauseResume UppyButton--circular UppyButton--green UppyButton--sizeS"
+        return html`<button class="UppyDashboard-pauseResume
+                                   UppyButton--circular
+                                   UppyButton--green
+                                   UppyButton--sizeS"
                             onclick=${() => bus.emit('core:resume-all')}>${iconResume()}</button>`
       }
     }
   }
 
-  return html`<div class="Uppy UppyTheme--default UppyDashboard ${isTouchDevice ? 'Uppy--isTouchDevice' : ''}"
-                 aria-hidden="${modal.isHidden}"
-                 aria-label="Uppy Dialog Window (Press escape to close)"
-                 role="dialog">
+  return html`<div class="Uppy UppyTheme--default UppyDashboard
+                          ${isTouchDevice ? 'Uppy--isTouchDevice' : ''}
+                          ${!props.inline ? 'UppyDashboard--modal' : ''}"
+                   aria-hidden="${props.inline ? 'false' : modal.isHidden}"
+                   aria-label="Uppy Dialog Window (Press escape to close)"
+                   role="dialog">
 
     <div class="UppyDashboard-overlay"
-                onclick=${hideModal}></div>
+         onclick=${hideModal}></div>
+
+    <button class="UppyDashboard-close"
+            title="Close Uppy modal"
+            onclick=${hideModal}>${closeIcon()}</button>
 
     <div class="UppyDashboard-inner" tabindex="0">
       <div class="UppyDashboard-innerWrap">
-
-        <button class="UppyDashboard-close" title="Close Uppy modal"
-                onclick=${hideModal}>${closeIcon()}</button>
-
         <div class="UppyDashboardTabs">
           <h3 class="UppyDashboardTabs-title">Drop files here, paste or import from</h3>
           <nav>
@@ -139,8 +148,9 @@ export default function Dashboard (props, bus) {
         ${FileCard({
           files: files,
           showFileCard: showFileCard,
-          metaFields: state.metaFields
-        }, bus)}
+          metaFields: state.metaFields,
+          bus: bus
+        })}
 
         <div class="UppyDashboard-files">
           <ul class="UppyDashboard-filesInner">
@@ -149,9 +159,11 @@ export default function Dashboard (props, bus) {
               : null
             }
             ${Object.keys(files).map((fileID) => {
-              return FileItem(
-                {file: files[fileID], showProgressDetails}, bus
-              )
+              return FileItem({
+                file: files[fileID],
+                showProgressDetails: showProgressDetails,
+                bus: bus
+              })
             })}
           </ul>
           <div class="UppyDashboard-actions">

src/plugins/Dashboard/FileCard.js

@@ -12,8 +12,8 @@ function getIconByMime (fileTypeGeneral) {
   }
 }
 
-export default function fileCard (props, bus) {
-  const files = props.files
+export default function fileCard (props) {
+  const { bus, files } = props
   const showFileCard = props.showFileCard
   let metaFields = props.metaFields
 

src/plugins/Dashboard/FileItem.js

@@ -41,9 +41,8 @@ function getSpeed (fileProgress) {
   return uploadSpeed
 }
 
-export default function fileItem (props, bus) {
-  const file = props.file
-  const showProgressDetails = props.showProgressDetails
+export default function fileItem (props) {
+  const { bus, file, showProgressDetails } = props
 
   const isUploaded = file.progress.uploadComplete
   const uploadInProgressOrComplete = file.progress.uploadStarted
@@ -53,7 +52,7 @@ export default function fileItem (props, bus) {
   const fileName = Utils.getFileNameAndExtension(file.meta.name)[0]
   const truncatedFileName = Utils.truncateString(fileName, 15)
 
-  function remove (ev) {
+  const remove = (ev) => {
     // const el = document.querySelector(`#uppy_${file.id}`)
     // el.classList.add('UppyAnimation-zoomOutLeft')
 

src/plugins/Dashboard/index.js

@@ -16,6 +16,7 @@ export default class DashboardUI extends Plugin {
     // set default options
     const defaultOptions = {
       target: 'body',
+      inline: false,
       defaultTabIcon: defaultTabIcon(),
       panelSelectorPrefix: 'UppyDashboardContent-panel',
       showProgressDetails: true
@@ -192,7 +193,7 @@ export default class DashboardUI extends Plugin {
   }
 
   actions () {
-    const bus = this.core.emitter
+    const bus = this.core.bus
 
     bus.on('file-add', () => {
       this.hideAllPanels()
@@ -208,7 +209,7 @@ export default class DashboardUI extends Plugin {
       })
     })
 
-    bus.on('all-uploads-complete', (uploadedCount) => {
+    bus.on('success', (uploadedCount) => {
       bus.emit(
         'informer',
         `${this.core.i18n('files', {'smart_count': uploadedCount})} successfully uploaded, Sir!`,
@@ -216,22 +217,13 @@ export default class DashboardUI extends Plugin {
         6000
       )
     })
-
-    // setInterval(() => {
-    //   const isOnline = navigator.onLine
-    //   if (!isOnline) {
-    //     bus.emit('informer', 'No internet connection', 'error', 0)
-    //   } else {
-    //     bus.emit('informer-hide')
-    //   }
-    // }, 10000)
   }
 
   handleDrop (files) {
     this.core.log('All right, someone dropped something...')
 
     files.forEach((file) => {
-      this.core.emitter.emit('file-add', {
+      this.core.bus.emit('file-add', {
         source: this.id,
         name: file.name,
         type: file.type,
@@ -241,19 +233,21 @@ export default class DashboardUI extends Plugin {
   }
 
   render (state) {
-    const bus = this.core.emitter
     return Dashboard({
       state: state,
       autoProceed: this.core.opts.autoProceed,
+      id: this.id,
       container: this.opts.target,
       hideModal: this.hideModal,
       panelSelectorPrefix: this.opts.panelSelectorPrefix,
       showProgressDetails: this.opts.showProgressDetails,
+      inline: this.opts.inline,
       handleInputChange: this.handleInputChange,
       showPanel: this.showPanel,
       hideAllPanels: this.hideAllPanels,
-      log: this.core.log
-    }, bus)
+      log: this.core.log,
+      bus: this.core.emitter
+    })
   }
 
   install () {