Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

@uppy/react: refactor to ESM #3780

Merged
merged 3 commits into from May 25, 2022
Merged

@uppy/react: refactor to ESM #3780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
736214c
@uppy/react: refactor to ESM
aduh95 May 24, 2022
e5af41c
fix PropType linter errors and warnings
aduh95 May 24, 2022
09446c3
add missing path in comment
aduh95 May 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Open in desktop
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion packages/@uppy/dashboard/src/Dashboard.jsx
View file
Open in desktop
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As we import Dashboard anyway, couldn't we export and use the default options?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, the linter wants them in the same file :/

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The linter is here to serve us, not the other way around. If we feel it's more maintainable to not having to remember to keep options in sync across the repo — we should slap an eslint-disable on it and reuse the settings :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we want to ignore the warning, we don’t need default props at all (I think) we can simply go back to how it was before that and pass the props along using …this.props. There could be good reasons not to do that though, I suppose the lint rule is there for a reason.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I read it wrong, I thought we had the same defaultOptions object in both Dashboard and react/Dashboard. But the latter has prop types instead of the same object. Probably makes most sense yeah

const defaultOptions = {
target: 'body',
metaFields: [],
Expand Down
2 changes: 1 addition & 1 deletion packages/@uppy/drag-drop/src/DragDrop.jsx
View file
Open in desktop
Expand Up @@ -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[]',
Expand Down
2 changes: 1 addition & 1 deletion packages/@uppy/file-input/src/FileInput.jsx
View file
Open in desktop
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/@uppy/progress-bar/src/ProgressBar.jsx
View file
Open in desktop
Expand Up @@ -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,
Expand Down
7 changes: 0 additions & 7 deletions packages/@uppy/react/index.js
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions packages/@uppy/react/index.mjs
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions packages/@uppy/react/package.json
View file
Open in desktop
Expand Up @@ -3,9 +3,9 @@
"description": "React component wrappers around Uppy's official UI plugins.",
"version": "2.2.0",
"license": "MIT",
"main": "index.js",
"module": "index.mjs",
"main": "lib/index.js",
"types": "types/index.d.ts",
"type": "module",
"keywords": [
"file uploader",
"uppy",
Expand Down
17 changes: 8 additions & 9 deletions packages/@uppy/react/src/Dashboard.js
View file
Open in desktop
@@ -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()
Expand Down Expand Up @@ -69,4 +68,4 @@ Dashboard.defaultProps = {
inline: true,
}

module.exports = Dashboard
export default Dashboard
181 changes: 162 additions & 19 deletions packages/@uppy/react/src/DashboardModal.js
View file
Open in desktop
@@ -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()
}
}
Expand All @@ -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) {
Expand All @@ -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()
}
}
Expand All @@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kudos for writing all these prop types. But yeah, this is why you want TS, this would be reused

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