Merge pull request #1062 from transloadit/fix/onMount

[@uppy/core] Add onMount and this.parent to Plugin

packages/@uppy/core/src/Plugin.js

@@ -72,6 +72,16 @@ module.exports = class Plugin {
     }
   }
 
+  /**
+  * Called when plugin is mounted, whether in DOM or into another plugin.
+  * Needed because sometimes plugins are mounted separately/after `install`,
+  * so this.el and this.parent might not be available in `install`.
+  * This is the case with @uppy/react plugins, for example.
+  */
+  onMount () {
+
+  }
+
   /**
    * Check if supplied `target` is a DOM element or an `object`.
    * If it’s an object — target is a plugin, and we search `plugins`
@@ -107,6 +117,7 @@ module.exports = class Plugin {
 
       this.el = preact.render(this.render(this.uppy.getState()), targetElement)
 
+      this.onMount()
       return this.el
     }
 
@@ -127,9 +138,11 @@ module.exports = class Plugin {
     }
 
     if (targetPlugin) {
-      const targetPluginName = targetPlugin.id
-      this.uppy.log(`Installing ${callerPluginName} to ${targetPluginName}`)
+      this.uppy.log(`Installing ${callerPluginName} to ${targetPlugin.id}`)
+      this.parent = targetPlugin
       this.el = targetPlugin.addTarget(plugin)
+
+      this.onMount()
       return this.el
     }
 

packages/@uppy/dashboard/src/index.js

@@ -456,7 +456,10 @@ module.exports = class Dashboard extends Plugin {
     this.ro.observe(this.el.querySelector('.uppy-Dashboard-inner'))
 
     this.uppy.on('plugin-remove', this.removeTarget)
-    this.uppy.on('file-added', (ev) => this.toggleAddFilesPanel(false))
+    this.uppy.on('file-added', (ev) => {
+      this.toggleAddFilesPanel(false)
+      this.hideAllPanels()
+    })
   }
 
   removeEvents () {
@@ -658,7 +661,9 @@ module.exports = class Dashboard extends Plugin {
     const plugins = this.opts.plugins || []
     plugins.forEach((pluginID) => {
       const plugin = this.uppy.getPlugin(pluginID)
-      if (plugin) plugin.mount(this, plugin)
+      if (plugin) {
+        plugin.mount(this, plugin)
+      }
     })
 
     if (!this.opts.disableStatusBar) {

packages/@uppy/url/src/index.js

@@ -141,8 +141,11 @@ module.exports = class Url extends Plugin {
         }
       })
       .then(() => {
-        const dashboard = this.uppy.getPlugin('Dashboard')
-        if (dashboard) dashboard.hideAllPanels()
+        // Close the Dashboard panel if plugin is installed
+        // into Dashboard (could be other parent UI plugin)
+        // if (this.parent && this.parent.hideAllPanels) {
+        //   this.parent.hideAllPanels()
+        // }
       })
       .catch((err) => {
         this.uppy.log(err)
@@ -206,23 +209,29 @@ module.exports = class Url extends Plugin {
       addFile={this.addFile} />
   }
 
+  onMount () {
+    if (this.el) {
+      this.el.addEventListener('drop', this.handleDrop)
+      this.el.addEventListener('dragover', this.handleDragOver)
+      this.el.addEventListener('dragleave', this.handleDragLeave)
+      this.el.addEventListener('paste', this.handlePaste)
+    }
+  }
+
   install () {
     const target = this.opts.target
     if (target) {
       this.mount(target, this)
     }
-
-    this.el.addEventListener('drop', this.handleDrop)
-    this.el.addEventListener('dragover', this.handleDragOver)
-    this.el.addEventListener('dragleave', this.handleDragLeave)
-    this.el.addEventListener('paste', this.handlePaste)
   }
 
   uninstall () {
-    this.el.removeEventListener('drop', this.handleDrop)
-    this.el.removeEventListener('dragover', this.handleDragOver)
-    this.el.removeEventListener('dragleave', this.handleDragLeave)
-    this.el.removeEventListener('paste', this.handlePaste)
+    if (this.el) {
+      this.el.removeEventListener('drop', this.handleDrop)
+      this.el.removeEventListener('dragover', this.handleDragOver)
+      this.el.removeEventListener('dragleave', this.handleDragLeave)
+      this.el.removeEventListener('paste', this.handlePaste)
+    }
 
     this.unmount()
   }

packages/@uppy/webcam/src/index.js

@@ -183,8 +183,12 @@ module.exports = class Webcam extends Plugin {
     .then(() => {
       this.recordingChunks = null
       this.recorder = null
-      const dashboard = this.uppy.getPlugin('Dashboard')
-      if (dashboard) dashboard.hideAllPanels()
+
+      // Close the Dashboard panel if plugin is installed
+      // into Dashboard (could be other parent UI plugin)
+      // if (this.parent && this.parent.hideAllPanels) {
+      //   this.parent.hideAllPanels()
+      // }
     }, (error) => {
       this.recordingChunks = null
       this.recorder = null
@@ -242,8 +246,11 @@ module.exports = class Webcam extends Plugin {
       return this.getImage()
     }).then((tagFile) => {
       this.captureInProgress = false
-      const dashboard = this.uppy.getPlugin('Dashboard')
-      if (dashboard) dashboard.hideAllPanels()
+      // Close the Dashboard panel if plugin is installed
+      // into Dashboard (could be other parent UI plugin)
+      // if (this.parent && this.parent.hideAllPanels) {
+      //   this.parent.hideAllPanels()
+      // }
       try {
         this.uppy.addFile(tagFile)
       } catch (err) {