uppy-react: Add initial React Dashboard component.

package.json

@@ -70,6 +70,8 @@
     "onchange": "3.2.1",
     "postcss": "5.1.0",
     "pre-commit": "1.1.3",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
     "sass": "0.5.0",
     "selenium-webdriver": "2.53.3",
     "uppy-server": "0.0.7",

src/uppy-react/Dashboard.js

@@ -0,0 +1,31 @@
+const React = require('react')
+const UppyCore = require('../core/Core').Uppy
+const DashboardPlugin = require('../plugins/Dashboard')
+
+const h = React.createElement
+
+class Dashboard extends React.Component {
+  componentDidMount () {
+    const uppy = this.props.uppy
+    uppy.use(DashboardPlugin, {
+      target: this.container,
+      inline: true
+    })
+
+    this.plugin = uppy.getPlugin('DashboardUI')
+  }
+
+  render () {
+    return h('div', {
+      ref: (container) => {
+        this.container = container
+      }
+    })
+  }
+}
+
+Dashboard.propTypes = {
+  uppy: React.PropTypes.instanceOf(UppyCore).isRequired
+}
+
+module.exports = Dashboard

src/uppy-react/DashboardModal.js

@@ -0,0 +1,43 @@
+const React = require('react')
+const UppyCore = require('../core/Core').Uppy
+const ReactDashboardPlugin = require('./bridge/ReactDashboardPlugin')
+
+const h = React.createElement
+
+class Dashboard extends React.Component {
+  componentDidMount () {
+    const uppy = this.props.uppy
+    uppy.use(ReactDashboardPlugin, {
+      target: this.container,
+      onRequestClose: this.props.onRequestClose
+    })
+
+    this.plugin = uppy.getPlugin('ReactDashboard')
+    if (this.props.open) {
+      this.plugin.showModalInternal()
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (this.props.open && !nextProps.open) {
+      this.plugin.hideModalInternal()
+    } else if (!this.props.open && nextProps.open) {
+      this.plugin.showModalInternal()
+    }
+  }
+
+  render () {
+    return h('div', {
+      ref: (container) => {
+        this.container = container
+      }
+    })
+  }
+}
+
+Dashboard.propTypes = {
+  uppy: React.PropTypes.instanceOf(UppyCore).isRequired,
+  onRequestClose: React.PropTypes.func
+}
+
+module.exports = Dashboard

src/uppy-react/bridge/ReactDashboardPlugin.js

@@ -0,0 +1,31 @@
+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

src/uppy-react/index.js

@@ -0,0 +1,2 @@
+exports.Dashboard = require('./Dashboard')
+exports.DashboardModal = require('./DashboardModal')