From b4e5d863705fb8389792c83b2cbe22fa3f01f5ce Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Wed, 25 May 2022 12:20:49 +0200 Subject: [PATCH] @uppy/react: refactor to ESM (#3780) --- .eslintrc.js | 1 + packages/@uppy/dashboard/src/Dashboard.jsx | 2 +- packages/@uppy/drag-drop/src/DragDrop.jsx | 2 +- packages/@uppy/file-input/src/FileInput.jsx | 2 +- .../@uppy/progress-bar/src/ProgressBar.jsx | 2 +- packages/@uppy/react/index.js | 7 - packages/@uppy/react/index.mjs | 7 - packages/@uppy/react/package.json | 4 +- packages/@uppy/react/src/Dashboard.js | 17 +- packages/@uppy/react/src/DashboardModal.js | 181 ++++++++++++++++-- packages/@uppy/react/src/DragDrop.js | 45 +++-- packages/@uppy/react/src/FileInput.js | 27 +-- packages/@uppy/react/src/ProgressBar.js | 29 +-- packages/@uppy/react/src/StatusBar.js | 55 ++++-- packages/@uppy/react/src/Wrapper.js | 34 ++-- packages/@uppy/react/src/getHTMLProps.js | 2 +- packages/@uppy/react/src/index.js | 7 + .../react/src/nonHtmlPropsHaveChanged.js | 2 +- packages/@uppy/react/src/propTypes.js | 8 +- packages/@uppy/react/src/useUppy.js | 6 +- packages/@uppy/status-bar/src/_StatusBar.jsx | 2 +- 21 files changed, 317 insertions(+), 125 deletions(-) delete mode 100644 packages/@uppy/react/index.js delete mode 100644 packages/@uppy/react/index.mjs create mode 100644 packages/@uppy/react/src/index.js diff --git a/.eslintrc.js b/.eslintrc.js index f2a6c09586..b68a509b6d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -220,6 +220,7 @@ module.exports = { 'packages/@uppy/onedrive/src/**/*.js', 'packages/@uppy/progress-bar/src/**/*.js', 'packages/@uppy/provider-views/src/**/*.js', + 'packages/@uppy/react/src/**/*.js', 'packages/@uppy/redux-dev-tools/src/**/*.js', 'packages/@uppy/screen-capture/src/**/*.js', 'packages/@uppy/status-bar/src/**/*.js', diff --git a/packages/@uppy/dashboard/src/Dashboard.jsx b/packages/@uppy/dashboard/src/Dashboard.jsx index df0fccbdc4..981e64669e 100644 --- a/packages/@uppy/dashboard/src/Dashboard.jsx +++ b/packages/@uppy/dashboard/src/Dashboard.jsx @@ -53,7 +53,7 @@ export default class Dashboard extends UIPlugin { this.defaultLocale = locale - // set default options + // set default options, must be kept in sync with packages/@uppy/react/src/DashboardModal.js const defaultOptions = { target: 'body', metaFields: [], diff --git a/packages/@uppy/drag-drop/src/DragDrop.jsx b/packages/@uppy/drag-drop/src/DragDrop.jsx index c26d885b13..a6909c425c 100644 --- a/packages/@uppy/drag-drop/src/DragDrop.jsx +++ b/packages/@uppy/drag-drop/src/DragDrop.jsx @@ -22,7 +22,7 @@ export default class DragDrop extends UIPlugin { this.defaultLocale = locale - // Default options + // Default options, must be kept in sync with @uppy/react/src/DragDrop.js. const defaultOpts = { target: null, inputName: 'files[]', diff --git a/packages/@uppy/file-input/src/FileInput.jsx b/packages/@uppy/file-input/src/FileInput.jsx index 03b5a21580..7b4cac8099 100644 --- a/packages/@uppy/file-input/src/FileInput.jsx +++ b/packages/@uppy/file-input/src/FileInput.jsx @@ -16,7 +16,7 @@ export default class FileInput extends UIPlugin { this.defaultLocale = locale - // Default options + // Default options, must be kept in sync with @uppy/react/src/FileInput.js. const defaultOptions = { target: null, pretty: true, diff --git a/packages/@uppy/progress-bar/src/ProgressBar.jsx b/packages/@uppy/progress-bar/src/ProgressBar.jsx index 9ce798bc21..b5f6d9adab 100644 --- a/packages/@uppy/progress-bar/src/ProgressBar.jsx +++ b/packages/@uppy/progress-bar/src/ProgressBar.jsx @@ -16,7 +16,7 @@ export default class ProgressBar extends UIPlugin { this.title = 'Progress Bar' this.type = 'progressindicator' - // set default options + // set default options, must kept in sync with @uppy/react/src/ProgressBar.js const defaultOptions = { target: 'body', fixed: false, diff --git a/packages/@uppy/react/index.js b/packages/@uppy/react/index.js deleted file mode 100644 index ff93ef891b..0000000000 --- a/packages/@uppy/react/index.js +++ /dev/null @@ -1,7 +0,0 @@ -exports.Dashboard = require('./lib/Dashboard') -exports.DashboardModal = require('./lib/DashboardModal') -exports.DragDrop = require('./lib/DragDrop') -exports.ProgressBar = require('./lib/ProgressBar') -exports.StatusBar = require('./lib/StatusBar') -exports.FileInput = require('./lib/FileInput') -exports.useUppy = require('./lib/useUppy') diff --git a/packages/@uppy/react/index.mjs b/packages/@uppy/react/index.mjs deleted file mode 100644 index 64496dc085..0000000000 --- a/packages/@uppy/react/index.mjs +++ /dev/null @@ -1,7 +0,0 @@ -export { default as Dashboard } from './lib/Dashboard.js' -export { default as DashboardModal } from './lib/DashboardModal.js' -export { default as DragDrop } from './lib/DragDrop.js' -export { default as ProgressBar } from './lib/ProgressBar.js' -export { default as StatusBar } from './lib/StatusBar.js' -export { default as FileInput } from './lib/FileInput.js' -export { default as useUppy } from './lib/useUppy.js' diff --git a/packages/@uppy/react/package.json b/packages/@uppy/react/package.json index 40d75bddea..52cff017c2 100644 --- a/packages/@uppy/react/package.json +++ b/packages/@uppy/react/package.json @@ -3,9 +3,9 @@ "description": "React component wrappers around Uppy's official UI plugins.", "version": "2.2.1", "license": "MIT", - "main": "index.js", - "module": "index.mjs", + "main": "lib/index.js", "types": "types/index.d.ts", + "type": "module", "keywords": [ "file uploader", "uppy", diff --git a/packages/@uppy/react/src/Dashboard.js b/packages/@uppy/react/src/Dashboard.js index 1f6cdefa6f..c49f8ccb65 100644 --- a/packages/@uppy/react/src/Dashboard.js +++ b/packages/@uppy/react/src/Dashboard.js @@ -1,22 +1,21 @@ -const React = require('react') -const DashboardPlugin = require('@uppy/dashboard') -const basePropTypes = require('./propTypes').dashboard -const getHTMLProps = require('./getHTMLProps') -const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged') - -const h = React.createElement +import { createElement as h, Component } from 'react' +import DashboardPlugin from '@uppy/dashboard' +import { dashboard as basePropTypes } from './propTypes.js' +import getHTMLProps from './getHTMLProps.js' +import nonHtmlPropsHaveChanged from './nonHtmlPropsHaveChanged.js' /** * React Component that renders a Dashboard for an Uppy instance. This component * renders the Dashboard inline, so you can put it anywhere you want. */ -class Dashboard extends React.Component { +class Dashboard extends Component { componentDidMount () { this.installPlugin() } componentDidUpdate (prevProps) { + // eslint-disable-next-line react/destructuring-assignment if (prevProps.uppy !== this.props.uppy) { this.uninstallPlugin(prevProps) this.installPlugin() @@ -69,4 +68,4 @@ Dashboard.defaultProps = { inline: true, } -module.exports = Dashboard +export default Dashboard diff --git a/packages/@uppy/react/src/DashboardModal.js b/packages/@uppy/react/src/DashboardModal.js index 20befea51d..1a46535136 100644 --- a/packages/@uppy/react/src/DashboardModal.js +++ b/packages/@uppy/react/src/DashboardModal.js @@ -1,34 +1,33 @@ -const React = require('react') -const PropTypes = require('prop-types') -const DashboardPlugin = require('@uppy/dashboard') -const basePropTypes = require('./propTypes').dashboard -const getHTMLProps = require('./getHTMLProps') -const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged') - -const h = React.createElement +import { createElement as h, Component } from 'react' +import PropTypes from 'prop-types' +import DashboardPlugin from '@uppy/dashboard' +import { cssSize, locale, metaFields, plugins, uppy as uppyPropType } from './propTypes.js' +import getHTMLProps from './getHTMLProps.js' +import nonHtmlPropsHaveChanged from './nonHtmlPropsHaveChanged.js' /** * React Component that renders a Dashboard for an Uppy instance in a Modal * dialog. Visibility of the Modal is toggled using the `open` prop. */ -class DashboardModal extends React.Component { +class DashboardModal extends Component { componentDidMount () { this.installPlugin() } componentDidUpdate (prevProps) { - if (prevProps.uppy !== this.props.uppy) { + const { uppy, open, onRequestClose } = this.props + if (prevProps.uppy !== uppy) { this.uninstallPlugin(prevProps) this.installPlugin() } else if (nonHtmlPropsHaveChanged(this, prevProps)) { - const options = { ...this.props, onRequestCloseModal: this.props.onRequestClose } + const options = { ...this.props, onRequestCloseModal: onRequestClose } delete options.uppy this.plugin.setOptions(options) } - if (prevProps.open && !this.props.open) { + if (prevProps.open && !open) { this.plugin.closeModal() - } else if (!prevProps.open && this.props.open) { + } else if (!prevProps.open && open) { this.plugin.openModal() } } @@ -38,11 +37,82 @@ class DashboardModal extends React.Component { } installPlugin () { - const { uppy } = this.props + const { + uppy, + target, + open, + onRequestClose, + closeModalOnClickOutside, + disablePageScrollWhenModalOpen, + inline, + plugins, // eslint-disable-line no-shadow + width, + height, + showProgressDetails, + note, + metaFields, // eslint-disable-line no-shadow + proudlyDisplayPoweredByUppy, + autoOpenFileEditor, + animateOpenClose, + browserBackButtonClose, + closeAfterFinish, + disableStatusBar, + disableInformer, + disableThumbnailGenerator, + disableLocalFiles, + disabled, + hideCancelButton, + hidePauseResumeButton, + hideProgressAfterFinish, + hideRetryButton, + hideUploadButton, + showLinkToFileUploadResult, + showRemoveButtonAfterComplete, + showSelectedFiles, + waitForThumbnailsBeforeUpload, + fileManagerSelectionType, + theme, + thumbnailType, + thumbnailWidth, + locale, // eslint-disable-line no-shadow + } = this.props const options = { id: 'react:DashboardModal', - ...this.props, - onRequestCloseModal: this.props.onRequestClose, + target, + closeModalOnClickOutside, + disablePageScrollWhenModalOpen, + inline, + plugins, + width, + height, + showProgressDetails, + note, + metaFields, + proudlyDisplayPoweredByUppy, + autoOpenFileEditor, + animateOpenClose, + browserBackButtonClose, + closeAfterFinish, + disableStatusBar, + disableInformer, + disableThumbnailGenerator, + disableLocalFiles, + disabled, + hideCancelButton, + hidePauseResumeButton, + hideProgressAfterFinish, + hideRetryButton, + hideUploadButton, + showLinkToFileUploadResult, + showRemoveButtonAfterComplete, + showSelectedFiles, + waitForThumbnailsBeforeUpload, + fileManagerSelectionType, + theme, + thumbnailType, + thumbnailWidth, + locale, + onRequestCloseModal: onRequestClose, } if (!options.target) { @@ -53,7 +123,7 @@ class DashboardModal extends React.Component { uppy.use(DashboardPlugin, options) this.plugin = uppy.getPlugin(options.id) - if (this.props.open) { + if (open) { this.plugin.openModal() } } @@ -78,12 +148,85 @@ class DashboardModal extends React.Component { } DashboardModal.propTypes = { + uppy: uppyPropType.isRequired, target: typeof window !== 'undefined' ? PropTypes.instanceOf(window.HTMLElement) : PropTypes.any, open: PropTypes.bool, onRequestClose: PropTypes.func, closeModalOnClickOutside: PropTypes.bool, disablePageScrollWhenModalOpen: PropTypes.bool, - ...basePropTypes, + inline: PropTypes.bool, + plugins, + width: cssSize, + height: cssSize, + showProgressDetails: PropTypes.bool, + note: PropTypes.string, + metaFields, + proudlyDisplayPoweredByUppy: PropTypes.bool, + autoOpenFileEditor: PropTypes.bool, + animateOpenClose: PropTypes.bool, + browserBackButtonClose: PropTypes.bool, + closeAfterFinish: PropTypes.bool, + disableStatusBar: PropTypes.bool, + disableInformer: PropTypes.bool, + disableThumbnailGenerator: PropTypes.bool, + disableLocalFiles: PropTypes.bool, + disabled: PropTypes.bool, + hideCancelButton: PropTypes.bool, + hidePauseResumeButton: PropTypes.bool, + hideProgressAfterFinish: PropTypes.bool, + hideRetryButton: PropTypes.bool, + hideUploadButton: PropTypes.bool, + showLinkToFileUploadResult: PropTypes.bool, + showRemoveButtonAfterComplete: PropTypes.bool, + showSelectedFiles: PropTypes.bool, + waitForThumbnailsBeforeUpload: PropTypes.bool, + fileManagerSelectionType: PropTypes.string, + theme: PropTypes.string, + // pass-through to ThumbnailGenerator + thumbnailType: PropTypes.string, + thumbnailWidth: PropTypes.number, + locale, +} +// Must be kept in sync with @uppy/dashboard/src/Dashboard.jsx. +DashboardModal.defaultProps = { + metaFields: [], + plugins: [], + inline: false, + width: 750, + height: 550, + thumbnailWidth: 280, + thumbnailType: 'image/jpeg', + waitForThumbnailsBeforeUpload: false, + showLinkToFileUploadResult: false, + showProgressDetails: false, + hideUploadButton: false, + hideCancelButton: false, + hideRetryButton: false, + hidePauseResumeButton: false, + hideProgressAfterFinish: false, + note: null, + closeModalOnClickOutside: false, + closeAfterFinish: false, + disableStatusBar: false, + disableInformer: false, + disableThumbnailGenerator: false, + disablePageScrollWhenModalOpen: true, + animateOpenClose: true, + fileManagerSelectionType: 'files', + proudlyDisplayPoweredByUppy: true, + showSelectedFiles: true, + showRemoveButtonAfterComplete: false, + browserBackButtonClose: false, + theme: 'light', + autoOpenFileEditor: false, + disabled: false, + disableLocalFiles: false, + + // extra + open: undefined, + target: undefined, + locale: null, + onRequestClose: undefined, } -module.exports = DashboardModal +export default DashboardModal diff --git a/packages/@uppy/react/src/DragDrop.js b/packages/@uppy/react/src/DragDrop.js index fcb9de6b8a..22d6b03e46 100644 --- a/packages/@uppy/react/src/DragDrop.js +++ b/packages/@uppy/react/src/DragDrop.js @@ -1,22 +1,22 @@ -const React = require('react') -const DragDropPlugin = require('@uppy/drag-drop') -const propTypes = require('./propTypes') -const getHTMLProps = require('./getHTMLProps') -const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged') - -const h = React.createElement +import { createElement as h, Component } from 'react' +import PropTypes from 'prop-types' +import DragDropPlugin from '@uppy/drag-drop' +import * as propTypes from './propTypes.js' +import getHTMLProps from './getHTMLProps.js' +import nonHtmlPropsHaveChanged from './nonHtmlPropsHaveChanged.js' /** * React component that renders an area in which files can be dropped to be * uploaded. */ -class DragDrop extends React.Component { +class DragDrop extends Component { componentDidMount () { this.installPlugin() } componentDidUpdate (prevProps) { + // eslint-disable-next-line react/destructuring-assignment if (prevProps.uppy !== this.props.uppy) { this.uninstallPlugin(prevProps) this.installPlugin() @@ -32,10 +32,21 @@ class DragDrop extends React.Component { } installPlugin () { - const { uppy } = this.props + const { + uppy, + locale, + inputName, + width, + height, + note, + } = this.props const options = { id: 'react:DragDrop', - ...this.props, + locale, + inputName, + width, + height, + note, target: this.container, } delete options.uppy @@ -65,10 +76,20 @@ class DragDrop extends React.Component { } DragDrop.propTypes = { - uppy: propTypes.uppy, + uppy: propTypes.uppy.isRequired, locale: propTypes.locale, + inputName: PropTypes.string, + width: PropTypes.string, + height: PropTypes.string, + note: PropTypes.string, } +// Must be kept in sync with @uppy/drag-drop/src/DragDrop.jsx. DragDrop.defaultProps = { + locale: null, + inputName: 'files[]', + width: '100%', + height: '100%', + note: null, } -module.exports = DragDrop +export default DragDrop diff --git a/packages/@uppy/react/src/FileInput.js b/packages/@uppy/react/src/FileInput.js index c1a04de138..dd84137af2 100644 --- a/packages/@uppy/react/src/FileInput.js +++ b/packages/@uppy/react/src/FileInput.js @@ -1,21 +1,20 @@ -const PropTypes = require('prop-types') -const React = require('react') -const FileInputPlugin = require('@uppy/file-input') -const propTypes = require('./propTypes') - -const h = React.createElement +import { createElement as h, Component } from 'react' +import PropTypes from 'prop-types' +import FileInputPlugin from '@uppy/file-input' +import * as propTypes from './propTypes.js' /** * React component that renders an area in which files can be dropped to be * uploaded. */ -class FileInput extends React.Component { +class FileInput extends Component { componentDidMount () { this.installPlugin() } componentDidUpdate (prevProps) { + // eslint-disable-next-line react/destructuring-assignment if (prevProps.uppy !== this.props.uppy) { this.uninstallPlugin(prevProps) this.installPlugin() @@ -27,10 +26,12 @@ class FileInput extends React.Component { } installPlugin () { - const { uppy } = this.props + const { uppy, locale, pretty, inputName } = this.props const options = { id: 'react:FileInput', - ...this.props, + locale, + pretty, + inputName, target: this.container, } delete options.uppy @@ -57,12 +58,16 @@ class FileInput extends React.Component { } FileInput.propTypes = { - uppy: propTypes.uppy, + uppy: propTypes.uppy.isRequired, locale: propTypes.locale, pretty: PropTypes.bool, inputName: PropTypes.string, } +// Must be kept in sync with @uppy/file-input/src/FileInput.jsx FileInput.defaultProps = { + locale: undefined, + pretty: true, + inputName: 'files[]', } -module.exports = FileInput +export default FileInput diff --git a/packages/@uppy/react/src/ProgressBar.js b/packages/@uppy/react/src/ProgressBar.js index d1cdeb5f2e..601c82d07a 100644 --- a/packages/@uppy/react/src/ProgressBar.js +++ b/packages/@uppy/react/src/ProgressBar.js @@ -1,22 +1,21 @@ -const React = require('react') -const PropTypes = require('prop-types') -const ProgressBarPlugin = require('@uppy/progress-bar') -const uppyPropType = require('./propTypes').uppy -const getHTMLProps = require('./getHTMLProps') -const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged') - -const h = React.createElement +import { createElement as h, Component } from 'react' +import PropTypes from 'prop-types' +import ProgressBarPlugin from '@uppy/progress-bar' +import { uppy as uppyPropType } from './propTypes.js' +import getHTMLProps from './getHTMLProps.js' +import nonHtmlPropsHaveChanged from './nonHtmlPropsHaveChanged.js' /** * React component that renders a progress bar at the top of the page. */ -class ProgressBar extends React.Component { +class ProgressBar extends Component { componentDidMount () { this.installPlugin() } componentDidUpdate (prevProps) { + // eslint-disable-next-line react/destructuring-assignment if (prevProps.uppy !== this.props.uppy) { this.uninstallPlugin(prevProps) this.installPlugin() @@ -32,10 +31,11 @@ class ProgressBar extends React.Component { } installPlugin () { - const { uppy } = this.props + const { uppy, fixed, hideAfterFinish } = this.props const options = { id: 'react:ProgressBar', - ...this.props, + fixed, + hideAfterFinish, target: this.container, } delete options.uppy @@ -65,11 +65,14 @@ class ProgressBar extends React.Component { } ProgressBar.propTypes = { - uppy: uppyPropType, + uppy: uppyPropType.isRequired, fixed: PropTypes.bool, hideAfterFinish: PropTypes.bool, } +// Must be kept in sync with @uppy/progress-bar/src/ProgressBar.jsx ProgressBar.defaultProps = { + fixed: false, + hideAfterFinish: true, } -module.exports = ProgressBar +export default ProgressBar diff --git a/packages/@uppy/react/src/StatusBar.js b/packages/@uppy/react/src/StatusBar.js index e777b9e5e8..1cca06c612 100644 --- a/packages/@uppy/react/src/StatusBar.js +++ b/packages/@uppy/react/src/StatusBar.js @@ -1,23 +1,22 @@ -const React = require('react') -const PropTypes = require('prop-types') -const StatusBarPlugin = require('@uppy/status-bar') -const uppyPropType = require('./propTypes').uppy -const getHTMLProps = require('./getHTMLProps') -const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged') - -const h = React.createElement +import { createElement as h, Component } from 'react' +import PropTypes from 'prop-types' +import StatusBarPlugin from '@uppy/status-bar' +import { uppy as uppyPropType } from './propTypes.js' +import getHTMLProps from './getHTMLProps.js' +import nonHtmlPropsHaveChanged from './nonHtmlPropsHaveChanged.js' /** * React component that renders a status bar containing upload progress and speed, * processing progress and pause/resume/cancel controls. */ -class StatusBar extends React.Component { +class StatusBar extends Component { componentDidMount () { this.installPlugin() } componentDidUpdate (prevProps) { + // eslint-disable-next-line react/destructuring-assignment if (prevProps.uppy !== this.props.uppy) { this.uninstallPlugin(prevProps) this.installPlugin() @@ -33,10 +32,25 @@ class StatusBar extends React.Component { } installPlugin () { - const { uppy } = this.props + const { + uppy, + hideUploadButton, + hideRetryButton, + hidePauseResumeButton, + hideCancelButton, + showProgressDetails, + hideAfterFinish, + doneButtonHandler, + } = this.props const options = { id: 'react:StatusBar', - ...this.props, + hideUploadButton, + hideRetryButton, + hidePauseResumeButton, + hideCancelButton, + showProgressDetails, + hideAfterFinish, + doneButtonHandler, target: this.container, } delete options.uppy @@ -66,11 +80,24 @@ class StatusBar extends React.Component { } StatusBar.propTypes = { - uppy: uppyPropType, - hideAfterFinish: PropTypes.bool, + uppy: uppyPropType.isRequired, + hideUploadButton: PropTypes.bool, + hideRetryButton: PropTypes.bool, + hidePauseResumeButton: PropTypes.bool, + hideCancelButton: PropTypes.bool, showProgressDetails: PropTypes.bool, + hideAfterFinish: PropTypes.bool, + doneButtonHandler: PropTypes.func, } +// Must be kept in sync with @uppy/status-bar/src/_StatusBar.jsx. StatusBar.defaultProps = { + hideUploadButton: false, + hideRetryButton: false, + hidePauseResumeButton: false, + hideCancelButton: false, + showProgressDetails: false, + hideAfterFinish: true, + doneButtonHandler: null, } -module.exports = StatusBar +export default StatusBar diff --git a/packages/@uppy/react/src/Wrapper.js b/packages/@uppy/react/src/Wrapper.js index f3f75e6318..438484a18d 100644 --- a/packages/@uppy/react/src/Wrapper.js +++ b/packages/@uppy/react/src/Wrapper.js @@ -1,10 +1,8 @@ -const React = require('react') -const PropTypes = require('prop-types') -const uppyPropType = require('./propTypes').uppy +import { createElement as h, Component } from 'react' +import PropTypes from 'prop-types' +import { uppy as uppyPropType } from './propTypes.js' -const h = React.createElement - -class UppyWrapper extends React.Component { +class UppyWrapper extends Component { constructor (props) { super(props) @@ -16,7 +14,8 @@ class UppyWrapper extends React.Component { } componentDidUpdate (prevProps) { - if (prevProps.uppy !== this.props.uppy) { + const { uppy } = this.props + if (prevProps.uppy !== uppy) { this.uninstallPlugin(prevProps) this.installPlugin() } @@ -27,17 +26,18 @@ class UppyWrapper extends React.Component { } installPlugin () { - const plugin = this.props.uppy - .getPlugin(this.props.plugin) + const { plugin, uppy } = this.props + const pluginObj = uppy + .getPlugin(plugin) - plugin.mount(this.container, plugin) + pluginObj.mount(this.container, pluginObj) } - uninstallPlugin (props = this.props) { - const plugin = props.uppy - .getPlugin(this.props.plugin) - - plugin.unmount() + uninstallPlugin ({ uppy } = this.props) { + const { plugin } = this.props + uppy + .getPlugin(plugin) + .unmount() } refContainer (container) { @@ -50,8 +50,8 @@ class UppyWrapper extends React.Component { } UppyWrapper.propTypes = { - uppy: uppyPropType, + uppy: uppyPropType.isRequired, plugin: PropTypes.string.isRequired, } -module.exports = UppyWrapper +export default UppyWrapper diff --git a/packages/@uppy/react/src/getHTMLProps.js b/packages/@uppy/react/src/getHTMLProps.js index b6ce49ec02..8ea159fb72 100644 --- a/packages/@uppy/react/src/getHTMLProps.js +++ b/packages/@uppy/react/src/getHTMLProps.js @@ -261,4 +261,4 @@ const getHTMLProps = (props) => { ) } -module.exports = getHTMLProps +export default getHTMLProps diff --git a/packages/@uppy/react/src/index.js b/packages/@uppy/react/src/index.js new file mode 100644 index 0000000000..f8c8213a20 --- /dev/null +++ b/packages/@uppy/react/src/index.js @@ -0,0 +1,7 @@ +export { default as Dashboard } from './Dashboard.js' +export { default as DashboardModal } from './DashboardModal.js' +export { default as DragDrop } from './DragDrop.js' +export { default as ProgressBar } from './ProgressBar.js' +export { default as StatusBar } from './StatusBar.js' +export { default as FileInput } from './FileInput.js' +export { default as useUppy } from './useUppy.js' diff --git a/packages/@uppy/react/src/nonHtmlPropsHaveChanged.js b/packages/@uppy/react/src/nonHtmlPropsHaveChanged.js index 350b73d204..2a7e23b582 100644 --- a/packages/@uppy/react/src/nonHtmlPropsHaveChanged.js +++ b/packages/@uppy/react/src/nonHtmlPropsHaveChanged.js @@ -3,7 +3,7 @@ // TODO: replace with `Object.hasOwn` when dropping support for older browsers. const hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key) -module.exports = function nonHtmlPropsHaveChanged (component, prevProps) { +export default function nonHtmlPropsHaveChanged (component, prevProps) { return Object.keys(component.props) // TODO: replace `validProps` with an exported `Symbol('htmlProps')`. .some(key => !hasOwn(component.validProps, key) && component.props[key] !== prevProps[key]) diff --git a/packages/@uppy/react/src/propTypes.js b/packages/@uppy/react/src/propTypes.js index b6385f3260..b06db10d20 100644 --- a/packages/@uppy/react/src/propTypes.js +++ b/packages/@uppy/react/src/propTypes.js @@ -1,8 +1,8 @@ -const PropTypes = require('prop-types') -const UppyCore = require('@uppy/core').Uppy +import PropTypes from 'prop-types' +import { Uppy as UppyCore } from '@uppy/core' // The `uppy` prop receives the Uppy core instance. -const uppy = PropTypes.instanceOf(UppyCore).isRequired +const uppy = PropTypes.instanceOf(UppyCore) // A list of plugins to mount inside this component. const plugins = PropTypes.arrayOf(PropTypes.string) @@ -51,7 +51,7 @@ const dashboard = { locale, } -module.exports = { +export { uppy, locale, dashboard, diff --git a/packages/@uppy/react/src/useUppy.js b/packages/@uppy/react/src/useUppy.js index cf5d428630..39e047360c 100644 --- a/packages/@uppy/react/src/useUppy.js +++ b/packages/@uppy/react/src/useUppy.js @@ -1,7 +1,7 @@ -const { useEffect, useRef } = require('react') -const UppyCore = require('@uppy/core').Uppy +import { useEffect, useRef } from 'react' +import { Uppy as UppyCore } from '@uppy/core' -module.exports = function useUppy (factory) { +export default function useUppy (factory) { if (typeof factory !== 'function') { throw new TypeError('useUppy: expected a function that returns a new Uppy instance') } diff --git a/packages/@uppy/status-bar/src/_StatusBar.jsx b/packages/@uppy/status-bar/src/_StatusBar.jsx index c977980763..7f45c8af16 100644 --- a/packages/@uppy/status-bar/src/_StatusBar.jsx +++ b/packages/@uppy/status-bar/src/_StatusBar.jsx @@ -85,7 +85,7 @@ export default class StatusBar extends UIPlugin { this.defaultLocale = locale - // set default options + // set default options, must be kept in sync with @uppy/react/src/StatusBar.js const defaultOptions = { target: 'body', hideUploadButton: false,