react: Add <StatusBar />

src/react/StatusBar.js

@@ -0,0 +1,50 @@
+const React = require('react')
+const PropTypes = require('prop-types')
+const UppyCore = require('../core')
+const StatusBarPlugin = require('../plugins/StatusBar')
+
+const h = React.createElement
+
+/**
+ * React component that renders a status bar containing upload progress and speed,
+ * processing progress and pause/resume/cancel controls.
+ */
+
+class StatusBar extends React.Component {
+  componentDidMount () {
+    const uppy = this.props.uppy
+    const options = Object.assign(
+      {},
+      this.props,
+      { target: this.container }
+    )
+    delete options.uppy
+
+    uppy.use(StatusBarPlugin, options)
+
+    this.plugin = uppy.getPlugin('StatusBar')
+  }
+
+  componentWillUnmount () {
+    const uppy = this.props.uppy
+
+    uppy.removePlugin(this.plugin)
+  }
+
+  render () {
+    return h('div', {
+      ref: (container) => {
+        this.container = container
+      }
+    })
+  }
+}
+
+StatusBar.propTypes = {
+  uppy: PropTypes.instanceOf(UppyCore).isRequired
+}
+StatusBar.defaultProps = {
+}
+
+module.exports = StatusBar
+

src/react/index.js

@@ -2,3 +2,4 @@ exports.Dashboard = require('./Dashboard')
 exports.DashboardModal = require('./DashboardModal')
 exports.DragDrop = require('./DragDrop')
 exports.ProgressBar = require('./ProgressBar')
+exports.StatusBar = require('./StatusBar')

website/src/docs/react.md

@@ -53,13 +53,15 @@ const AvatarPicker = ({ currentAvatar }) => {
 The plugins that are available as React component wrappers are:
 
  - [Dashboard][]
+ - [DashboardModal][]
  - [DragDrop][]
  - [ProgressBar][]
- - [DashboardModal][]
+ - [StatusBar][]
 
 [React]: https://facebook.github.io/react
 [Preact]: https://preact.js.org/
 [Dashboard]: /docs/dashboard
 [DragDrop]: /docs/dragdrop
 [ProgressBar]: /docs/progressbar
+[ProgressBar]: /docs/statusbar
 [DashboardModal]: /docs/react/dashboard-modal