react: Add dashboard plugin inside component again. add `plugins` option.

examples/react-example/App.js

@@ -23,7 +23,6 @@ module.exports = class App extends React.Component {
   componentWillMount () {
     this.uppy = new Uppy({ autoProceed: false })
       .use(Tus10, { endpoint: 'https://master.tus.io/files' })
-      .use(DashboardPlugin, { inline: true })
       .use(DragDropPlugin, {
         locale: {
           strings: {
@@ -33,7 +32,7 @@ module.exports = class App extends React.Component {
         }
       })
       .use(ProgressBarPlugin)
-      .use(GoogleDrive, { target: DashboardPlugin, host: 'https://server.uppy.io' })
+      .use(GoogleDrive, { host: 'https://server.uppy.io' })
       .run()
 
     this.uppy2 = new Uppy({ autoProceed: false })
@@ -73,7 +72,10 @@ module.exports = class App extends React.Component {
           Show Dashboard
         </label>
         {showInlineDashboard && (
-          <Dashboard uppy={this.uppy} />
+          <Dashboard
+            uppy={this.uppy}
+            plugins={['GoogleDrive']}
+          />
         )}
 
         <h2>Modal Dashboard</h2>

src/plugins/Dashboard/index.js

@@ -424,6 +424,12 @@ module.exports = class DashboardUI extends Plugin {
       this.mount(target, this)
     }
 
+    const plugins = this.opts.plugins || []
+    plugins.forEach((pluginID) => {
+      const plugin = this.core.getPlugin(pluginID)
+      if (plugin) plugin.mount(this, plugin)
+    })
+
     if (!this.opts.disableStatusBar) {
       this.core.use(StatusBar, {
         target: this
@@ -455,6 +461,12 @@ module.exports = class DashboardUI extends Plugin {
       if (statusBar) this.core.removePlugin(statusBar)
     }
 
+    const plugins = this.opts.plugins || []
+    plugins.forEach((pluginID) => {
+      const plugin = this.core.getPlugin(pluginID)
+      if (plugin) plugin.unmount()
+    })
+
     this.unmount()
     this.removeActions()
     this.removeEvents()

src/uppy-react/Dashboard.js

@@ -1,7 +1,7 @@
 const React = require('react')
 const PropTypes = require('prop-types')
 const UppyCore = require('../core/Core')
-const UppyWrapper = require('./Wrapper')
+const DashboardPlugin = require('../plugins/Dashboard')
 
 const h = React.createElement
 
@@ -10,14 +10,42 @@ const h = React.createElement
  * renders the Dashboard inline, so you can put it anywhere you want.
  */
 
-const Dashboard = (props) =>
-  h(UppyWrapper, props)
+class Dashboard extends React.Component {
+  componentDidMount () {
+    const uppy = this.props.uppy
+    const options = Object.assign(
+      {},
+      this.props,
+      { target: this.container }
+    )
+    delete options.uppy
+    uppy.use(DashboardPlugin, options)
+
+    this.plugin = uppy.getPlugin('DashboardUI')
+  }
+
+  componentWillUnmount () {
+    const uppy = this.props.uppy
+
+    uppy.removePlugin(this.plugin)
+  }
+
+  render () {
+    return h('div', {
+      ref: (container) => {
+        this.container = container
+      }
+    })
+  }
+}
 
 Dashboard.propTypes = {
-  uppy: PropTypes.instanceOf(UppyCore).isRequired
+  uppy: PropTypes.instanceOf(UppyCore).isRequired,
+  inline: PropTypes.bool,
+  plugins: PropTypes.arrayOf(PropTypes.string)
 }
 Dashboard.defaultProps = {
-  plugin: 'DashboardUI'
+  inline: true
 }
 
 module.exports = Dashboard