diff --git a/packages/@uppy/core/src/Plugin.js b/packages/@uppy/core/src/Plugin.js index 3fde0a3fe..9c8157734 100644 --- a/packages/@uppy/core/src/Plugin.js +++ b/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 } diff --git a/packages/@uppy/dashboard/src/index.js b/packages/@uppy/dashboard/src/index.js index 272adfebd..1dc44b4f3 100644 --- a/packages/@uppy/dashboard/src/index.js +++ b/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) { diff --git a/packages/@uppy/url/src/index.js b/packages/@uppy/url/src/index.js index d4eb804d6..c16a3d605 100644 --- a/packages/@uppy/url/src/index.js +++ b/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() } diff --git a/packages/@uppy/webcam/src/index.js b/packages/@uppy/webcam/src/index.js index 4883d721c..1ca503029 100644 --- a/packages/@uppy/webcam/src/index.js +++ b/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) {