Implement `onRequestClose` in main Dashboard plugin.

src/plugins/Dashboard/index.js

@@ -55,7 +55,8 @@ module.exports = class DashboardUI extends Plugin {
       hideUploadButton: false,
       note: false,
       closeModalOnClickOutside: false,
-      locale: defaultLocale
+      locale: defaultLocale,
+      onRequestCloseModal: () => this.closeModal()
     }
 
     // merge default options with the ones set by user
@@ -68,6 +69,7 @@ module.exports = class DashboardUI extends Plugin {
     this.containerWidth = this.translator.translate.bind(this.translator)
 
     this.closeModal = this.closeModal.bind(this)
+    this.requestCloseModal = this.requestCloseModal.bind(this)
     this.openModal = this.openModal.bind(this)
     this.isModalOpen = this.isModalOpen.bind(this)
 
@@ -145,6 +147,14 @@ module.exports = class DashboardUI extends Plugin {
     })})
   }
 
+  requestCloseModal () {
+    if (this.opts.onRequestCloseModal) {
+      return this.opts.onRequestCloseModal()
+    } else {
+      this.closeModal()
+    }
+  }
+
   openModal () {
     const modal = this.core.getState().modal
 
@@ -191,12 +201,12 @@ module.exports = class DashboardUI extends Plugin {
   // Close the Modal on esc key press
   handleEscapeKeyPress (event) {
     if (event.keyCode === 27) {
-      this.closeModal()
+      this.requestCloseModal()
     }
   }
 
   handleClickOutside () {
-    if (this.opts.closeModalOnClickOutside) this.closeModal()
+    if (this.opts.closeModalOnClickOutside) this.requestCloseModal()
   }
 
   initEvents () {
@@ -361,7 +371,7 @@ module.exports = class DashboardUI extends Plugin {
       autoProceed: this.core.opts.autoProceed,
       hideUploadButton: this.opts.hideUploadButton,
       id: this.id,
-      closeModal: this.closeModal,
+      closeModal: this.requestCloseModal,
       handleClickOutside: this.handleClickOutside,
       showProgressDetails: this.opts.showProgressDetails,
       inline: this.opts.inline,

src/uppy-react/DashboardModal.js

@@ -1,7 +1,7 @@
 const React = require('react')
 const PropTypes = require('prop-types')
 const UppyCore = require('../core/Core')
-const ReactDashboardPlugin = require('./bridge/ReactDashboardPlugin')
+const DashboardPlugin = require('../plugins/Dashboard')
 const StatusBarPlugin = require('../plugins/StatusBar')
 const InformerPlugin = require('../plugins/Informer')
 
@@ -15,7 +15,7 @@ const h = React.createElement
 class DashboardModal extends React.Component {
   componentDidMount () {
     const uppy = this.props.uppy
-    uppy.use(ReactDashboardPlugin, {
+    uppy.use(DashboardPlugin, {
       target: this.container,
       disableInformer: true,
       disableStatusBar: true,
@@ -27,24 +27,24 @@ class DashboardModal extends React.Component {
       // TODO Accept a React node here and render it so we can pass a DOM
       // element to this option.
       // defaultTabIcon: this.props.defaultTabIcon,
-      onRequestClose: this.props.onRequestClose
+      onRequestHideModal: this.props.onRequestClose
     })
-    uppy.use(StatusBarPlugin, { target: ReactDashboardPlugin })
-    uppy.use(InformerPlugin, { target: ReactDashboardPlugin })
+    uppy.use(StatusBarPlugin, { target: DashboardPlugin })
+    uppy.use(InformerPlugin, { target: DashboardPlugin })
 
-    this.plugin = uppy.getPlugin('ReactDashboard')
+    this.plugin = uppy.getPlugin('DashboardUI')
     this.statusBar = uppy.getPlugin('StatusBarUI')
     this.informer = uppy.getPlugin('Informer')
     if (this.props.open) {
-      this.plugin.showModalInternal()
+      this.plugin.showModal()
     }
   }
 
   componentWillReceiveProps (nextProps) {
     if (this.props.open && !nextProps.open) {
-      this.plugin.hideModalInternal()
+      this.plugin.hideModal()
     } else if (!this.props.open && nextProps.open) {
-      this.plugin.showModalInternal()
+      this.plugin.showModal()
     }
   }
 

src/uppy-react/bridge/ReactDashboardPlugin.js

@@ -1,31 +0,0 @@
-const DashboardPlugin = require('../../plugins/Dashboard')
-
-/**
- * A version of the Dashboard plugin that externalises the modal open state
- * management, allowing the React component wrapper to open and close it at
- * will.
- */
-class ReactDashboardPlugin extends DashboardPlugin {
-  constructor (core, opts) {
-    super(core, opts)
-
-    this.id = 'ReactDashboard'
-  }
-
-  showModalInternal () {
-    super.showModal()
-  }
-  hideModalInternal () {
-    super.hideModal()
-  }
-
-  hideModal () {
-    if (this.opts.onRequestClose) {
-      this.opts.onRequestClose()
-    } else {
-      this.hideModalInternal()
-    }
-  }
-}
-
-module.exports = ReactDashboardPlugin