From 50a24ffba4e6d221784fe2dcd0462f5ebec18f8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= Date: Mon, 21 Jan 2019 15:05:25 +0100 Subject: [PATCH 1/2] react: Allow changing instance in `uppy` prop --- packages/@uppy/react/src/Dashboard.js | 15 +++++++++++++-- packages/@uppy/react/src/DashboardModal.js | 15 +++++++++++++-- packages/@uppy/react/src/DragDrop.js | 15 +++++++++++++-- packages/@uppy/react/src/ProgressBar.js | 15 +++++++++++++-- packages/@uppy/react/src/StatusBar.js | 15 +++++++++++++-- packages/@uppy/react/src/Wrapper.js | 15 +++++++++++++-- 6 files changed, 78 insertions(+), 12 deletions(-) diff --git a/packages/@uppy/react/src/Dashboard.js b/packages/@uppy/react/src/Dashboard.js index 91ad997bd9..8d172f05c6 100644 --- a/packages/@uppy/react/src/Dashboard.js +++ b/packages/@uppy/react/src/Dashboard.js @@ -11,6 +11,17 @@ const h = React.createElement class Dashboard extends React.Component { componentDidMount () { + this.installPlugin() + } + + componentDidUpdate (prevProps) { + if (prevProps.uppy !== this.props.uppy) { + this.uninstallPlugin(prevProps) + this.installPlugin() + } + } + + installPlugin () { const uppy = this.props.uppy const options = Object.assign( { id: 'react:Dashboard' }, @@ -23,8 +34,8 @@ class Dashboard extends React.Component { this.plugin = uppy.getPlugin(options.id) } - componentWillUnmount () { - const uppy = this.props.uppy + uninstallPlugin (props = this.props) { + const uppy = props.uppy uppy.removePlugin(this.plugin) } diff --git a/packages/@uppy/react/src/DashboardModal.js b/packages/@uppy/react/src/DashboardModal.js index 109ae2fb49..0bee94f97e 100644 --- a/packages/@uppy/react/src/DashboardModal.js +++ b/packages/@uppy/react/src/DashboardModal.js @@ -12,6 +12,17 @@ const h = React.createElement class DashboardModal extends React.Component { componentDidMount () { + this.installPlugin() + } + + componentDidUpdate (prevProps) { + if (prevProps.uppy !== this.props.uppy) { + this.uninstallPlugin(prevProps) + this.installPlugin() + } + } + + installPlugin () { const uppy = this.props.uppy const options = Object.assign( { id: 'react:DashboardModal' }, @@ -34,8 +45,8 @@ class DashboardModal extends React.Component { } } - componentWillUnmount () { - const uppy = this.props.uppy + uninstallPlugin (props = this.props) { + const uppy = props.uppy uppy.removePlugin(this.plugin) } diff --git a/packages/@uppy/react/src/DragDrop.js b/packages/@uppy/react/src/DragDrop.js index 71684f25a6..ed08caa91d 100644 --- a/packages/@uppy/react/src/DragDrop.js +++ b/packages/@uppy/react/src/DragDrop.js @@ -11,6 +11,17 @@ const h = React.createElement class DragDrop extends React.Component { componentDidMount () { + this.installPlugin() + } + + componentDidUpdate (prevProps) { + if (prevProps.uppy !== this.props.uppy) { + this.uninstallPlugin(prevProps) + this.installPlugin() + } + } + + installPlugin () { const uppy = this.props.uppy const options = Object.assign( { id: 'react:DragDrop' }, @@ -24,8 +35,8 @@ class DragDrop extends React.Component { this.plugin = uppy.getPlugin(options.id) } - componentWillUnmount () { - const uppy = this.props.uppy + uninstallPlugin (props = this.props) { + const uppy = props.uppy uppy.removePlugin(this.plugin) } diff --git a/packages/@uppy/react/src/ProgressBar.js b/packages/@uppy/react/src/ProgressBar.js index 1c644a7d1f..f5d4af8367 100644 --- a/packages/@uppy/react/src/ProgressBar.js +++ b/packages/@uppy/react/src/ProgressBar.js @@ -11,6 +11,17 @@ const h = React.createElement class ProgressBar extends React.Component { componentDidMount () { + this.installPlugin() + } + + componentDidUpdate (prevProps) { + if (prevProps.uppy !== this.props.uppy) { + this.uninstallPlugin(prevProps) + this.installPlugin() + } + } + + installPlugin () { const uppy = this.props.uppy const options = Object.assign( { id: 'react:ProgressBar' }, @@ -24,8 +35,8 @@ class ProgressBar extends React.Component { this.plugin = uppy.getPlugin(options.id) } - componentWillUnmount () { - const uppy = this.props.uppy + uninstallPlugin (props = this.props) { + const uppy = props.uppy uppy.removePlugin(this.plugin) } diff --git a/packages/@uppy/react/src/StatusBar.js b/packages/@uppy/react/src/StatusBar.js index bd04b00c99..06a4ec2892 100644 --- a/packages/@uppy/react/src/StatusBar.js +++ b/packages/@uppy/react/src/StatusBar.js @@ -12,6 +12,17 @@ const h = React.createElement class StatusBar extends React.Component { componentDidMount () { + this.installPlugin() + } + + componentDidUpdate (prevProps) { + if (prevProps.uppy !== this.props.uppy) { + this.uninstallPlugin(prevProps) + this.installPlugin() + } + } + + installPlugin () { const uppy = this.props.uppy const options = Object.assign( { id: 'react:StatusBar' }, @@ -25,8 +36,8 @@ class StatusBar extends React.Component { this.plugin = uppy.getPlugin(options.id) } - componentWillUnmount () { - const uppy = this.props.uppy + uninstallPlugin (props = this.props) { + const uppy = props.uppy uppy.removePlugin(this.plugin) } diff --git a/packages/@uppy/react/src/Wrapper.js b/packages/@uppy/react/src/Wrapper.js index 39b4906264..5d3dcd9815 100644 --- a/packages/@uppy/react/src/Wrapper.js +++ b/packages/@uppy/react/src/Wrapper.js @@ -12,14 +12,25 @@ class UppyWrapper extends React.Component { } componentDidMount () { + this.installPlugin() + } + + componentDidUpdate (prevProps) { + if (prevProps.uppy !== this.props.uppy) { + this.uninstallPlugin(prevProps) + this.installPlugin() + } + } + + installPlugin () { const plugin = this.props.uppy .getPlugin(this.props.plugin) plugin.mount(this.container, plugin) } - componentWillUnmount () { - const plugin = this.props.uppy + uninstallPlugin (props = this.props) { + const plugin = props.uppy .getPlugin(this.props.plugin) plugin.unmount() From 53a362ecd8cf592c91de940f1f3fadcc3e93dd76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= Date: Mon, 21 Jan 2019 15:12:30 +0100 Subject: [PATCH 2/2] Add back componentWillUnmount --- packages/@uppy/react/src/Dashboard.js | 4 ++++ packages/@uppy/react/src/DashboardModal.js | 4 ++++ packages/@uppy/react/src/DragDrop.js | 4 ++++ packages/@uppy/react/src/ProgressBar.js | 4 ++++ packages/@uppy/react/src/StatusBar.js | 4 ++++ packages/@uppy/react/src/Wrapper.js | 4 ++++ 6 files changed, 24 insertions(+) diff --git a/packages/@uppy/react/src/Dashboard.js b/packages/@uppy/react/src/Dashboard.js index 8d172f05c6..bad915ec72 100644 --- a/packages/@uppy/react/src/Dashboard.js +++ b/packages/@uppy/react/src/Dashboard.js @@ -21,6 +21,10 @@ class Dashboard extends React.Component { } } + componentWillUnmount () { + this.uninstallPlugin() + } + installPlugin () { const uppy = this.props.uppy const options = Object.assign( diff --git a/packages/@uppy/react/src/DashboardModal.js b/packages/@uppy/react/src/DashboardModal.js index 0bee94f97e..0b1e3eb54c 100644 --- a/packages/@uppy/react/src/DashboardModal.js +++ b/packages/@uppy/react/src/DashboardModal.js @@ -22,6 +22,10 @@ class DashboardModal extends React.Component { } } + componentWillUnmount () { + this.uninstallPlugin() + } + installPlugin () { const uppy = this.props.uppy const options = Object.assign( diff --git a/packages/@uppy/react/src/DragDrop.js b/packages/@uppy/react/src/DragDrop.js index ed08caa91d..a0ba1fb867 100644 --- a/packages/@uppy/react/src/DragDrop.js +++ b/packages/@uppy/react/src/DragDrop.js @@ -21,6 +21,10 @@ class DragDrop extends React.Component { } } + componentWillUnmount () { + this.uninstallPlugin() + } + installPlugin () { const uppy = this.props.uppy const options = Object.assign( diff --git a/packages/@uppy/react/src/ProgressBar.js b/packages/@uppy/react/src/ProgressBar.js index f5d4af8367..89e7660a1c 100644 --- a/packages/@uppy/react/src/ProgressBar.js +++ b/packages/@uppy/react/src/ProgressBar.js @@ -21,6 +21,10 @@ class ProgressBar extends React.Component { } } + componentWillUnmount () { + this.uninstallPlugin() + } + installPlugin () { const uppy = this.props.uppy const options = Object.assign( diff --git a/packages/@uppy/react/src/StatusBar.js b/packages/@uppy/react/src/StatusBar.js index 06a4ec2892..edea5bb562 100644 --- a/packages/@uppy/react/src/StatusBar.js +++ b/packages/@uppy/react/src/StatusBar.js @@ -22,6 +22,10 @@ class StatusBar extends React.Component { } } + componentWillUnmount () { + this.uninstallPlugin() + } + installPlugin () { const uppy = this.props.uppy const options = Object.assign( diff --git a/packages/@uppy/react/src/Wrapper.js b/packages/@uppy/react/src/Wrapper.js index 5d3dcd9815..c6961c2206 100644 --- a/packages/@uppy/react/src/Wrapper.js +++ b/packages/@uppy/react/src/Wrapper.js @@ -22,6 +22,10 @@ class UppyWrapper extends React.Component { } } + componentWillUnmount () { + this.uninstallPlugin() + } + installPlugin () { const plugin = this.props.uppy .getPlugin(this.props.plugin)