@uppy/react: refactor to ESM (#3780)

.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',

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: [],

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[]',

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,

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,

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",

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

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