Socket
Socket
Sign inDemoInstall

@uppy/react

Package Overview
Dependencies
Maintainers
8
Versions
112
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uppy/react - npm Package Compare versions

Comparing version 2.2.1 to 3.0.0-beta

lib/index.js
lib/index.js.map
src/index.js

7

CHANGELOG.md
# @uppy/react
## 3.0.0-beta
Released: 2022-05-30
Included in: Uppy v3.0.0-beta
- @uppy/react: refactor to ESM (Antoine du Hamel / #3780)
## 2.2.1

@@ -4,0 +11,0 @@

21

lib/Dashboard.js

@@ -1,12 +0,6 @@

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';
/**

@@ -17,3 +11,3 @@ * React Component that renders a Dashboard for an Uppy instance. This component

class Dashboard extends React.Component {
class Dashboard extends Component {
componentDidMount() {

@@ -24,2 +18,3 @@ this.installPlugin();

componentDidUpdate(prevProps) {
// eslint-disable-next-line react/destructuring-assignment
if (prevProps.uppy !== this.props.uppy) {

@@ -84,2 +79,2 @@ this.uninstallPlugin(prevProps);

};
module.exports = Dashboard;
export default Dashboard;

191

lib/DashboardModal.js

@@ -1,14 +0,7 @@

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';
/**

@@ -19,3 +12,3 @@ * React Component that renders a Dashboard for an Uppy instance in a Modal

class DashboardModal extends React.Component {
class DashboardModal extends Component {
componentDidMount() {

@@ -26,3 +19,9 @@ this.installPlugin();

componentDidUpdate(prevProps) {
if (prevProps.uppy !== this.props.uppy) {
const {
uppy,
open,
onRequestClose
} = this.props;
if (prevProps.uppy !== uppy) {
this.uninstallPlugin(prevProps);

@@ -32,3 +31,3 @@ this.installPlugin();

const options = { ...this.props,
onRequestCloseModal: this.props.onRequestClose
onRequestCloseModal: onRequestClose
};

@@ -39,5 +38,5 @@ delete options.uppy;

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();

@@ -53,8 +52,80 @@ }

const {
uppy
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
};

@@ -70,3 +141,3 @@

if (this.props.open) {
if (open) {
this.plugin.openModal();

@@ -102,2 +173,3 @@ }

DashboardModal.propTypes = {
uppy: uppyPropType.isRequired,
target: typeof window !== 'undefined' ? PropTypes.instanceOf(window.HTMLElement) : PropTypes.any,

@@ -108,4 +180,75 @@ open: 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;

52

lib/DragDrop.js

@@ -1,12 +0,7 @@

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';
/**

@@ -17,3 +12,3 @@ * React component that renders an area in which files can be dropped to be

class DragDrop extends React.Component {
class DragDrop extends Component {
componentDidMount() {

@@ -24,2 +19,3 @@ this.installPlugin();

componentDidUpdate(prevProps) {
// eslint-disable-next-line react/destructuring-assignment
if (prevProps.uppy !== this.props.uppy) {

@@ -43,7 +39,16 @@ this.uninstallPlugin(prevProps);

const {
uppy
uppy,
locale,
inputName,
width,
height,
note
} = this.props;
const options = {
id: 'react:DragDrop',
...this.props,
locale,
inputName,
width,
height,
note,
target: this.container

@@ -82,6 +87,17 @@ };

DragDrop.propTypes = {
uppy: propTypes.uppy,
locale: propTypes.locale
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
};
DragDrop.defaultProps = {};
module.exports = DragDrop;
export default DragDrop;

36

lib/FileInput.js

@@ -1,10 +0,5 @@

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';
/**

@@ -15,3 +10,3 @@ * React component that renders an area in which files can be dropped to be

class FileInput extends React.Component {
class FileInput extends Component {
componentDidMount() {

@@ -22,2 +17,3 @@ this.installPlugin();

componentDidUpdate(prevProps) {
// eslint-disable-next-line react/destructuring-assignment
if (prevProps.uppy !== this.props.uppy) {

@@ -35,7 +31,12 @@ this.uninstallPlugin(prevProps);

const {
uppy
uppy,
locale,
pretty,
inputName
} = this.props;
const options = {
id: 'react:FileInput',
...this.props,
locale,
pretty,
inputName,
target: this.container

@@ -71,8 +72,13 @@ };

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[]'
};
FileInput.defaultProps = {};
module.exports = FileInput;
export default FileInput;

2

lib/getHTMLProps.js

@@ -38,2 +38,2 @@ // List taken from React.HTMLAttributes supported properties:

module.exports = getHTMLProps;
export default getHTMLProps;

4

lib/nonHtmlPropsHaveChanged.js

@@ -5,5 +5,5 @@ 'use strict'; // TODO: replace with `Object.hasOwn` when dropping support for older browsers.

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]);
};
}

39

lib/ProgressBar.js

@@ -1,14 +0,7 @@

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';
/**

@@ -18,3 +11,3 @@ * React component that renders a progress bar at the top of the page.

class ProgressBar extends React.Component {
class ProgressBar extends Component {
componentDidMount() {

@@ -25,2 +18,3 @@ this.installPlugin();

componentDidUpdate(prevProps) {
// eslint-disable-next-line react/destructuring-assignment
if (prevProps.uppy !== this.props.uppy) {

@@ -44,7 +38,10 @@ this.uninstallPlugin(prevProps);

const {
uppy
uppy,
fixed,
hideAfterFinish
} = this.props;
const options = {
id: 'react:ProgressBar',
...this.props,
fixed,
hideAfterFinish,
target: this.container

@@ -83,7 +80,11 @@ };

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
};
ProgressBar.defaultProps = {};
module.exports = ProgressBar;
export default ProgressBar;

14

lib/propTypes.js

@@ -1,8 +0,6 @@

const PropTypes = require('prop-types');
import PropTypes from 'prop-types';
import { Uppy as UppyCore } from '@uppy/core'; // The `uppy` prop receives the Uppy core instance.
const UppyCore = require('@uppy/core').Uppy; // The `uppy` prop receives the Uppy core instance.
const uppy = PropTypes.instanceOf(UppyCore); // A list of plugins to mount inside this component.
const uppy = PropTypes.instanceOf(UppyCore).isRequired; // A list of plugins to mount inside this component.
const plugins = PropTypes.arrayOf(PropTypes.string); // Language strings for this component.

@@ -44,6 +42,2 @@

};
module.exports = {
uppy,
locale,
dashboard
};
export { uppy, locale, dashboard };

61

lib/StatusBar.js

@@ -1,14 +0,7 @@

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';
/**

@@ -19,3 +12,3 @@ * React component that renders a status bar containing upload progress and speed,

class StatusBar extends React.Component {
class StatusBar extends Component {
componentDidMount() {

@@ -26,2 +19,3 @@ this.installPlugin();

componentDidUpdate(prevProps) {
// eslint-disable-next-line react/destructuring-assignment
if (prevProps.uppy !== this.props.uppy) {

@@ -45,7 +39,20 @@ this.uninstallPlugin(prevProps);

const {
uppy
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

@@ -84,7 +91,21 @@ };

StatusBar.propTypes = {
uppy: uppyPropType,
uppy: uppyPropType.isRequired,
hideUploadButton: PropTypes.bool,
hideRetryButton: PropTypes.bool,
hidePauseResumeButton: PropTypes.bool,
hideCancelButton: PropTypes.bool,
showProgressDetails: PropTypes.bool,
hideAfterFinish: PropTypes.bool,
showProgressDetails: 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
};
StatusBar.defaultProps = {};
module.exports = StatusBar;
export default StatusBar;

13

lib/useUppy.js

@@ -1,9 +0,4 @@

const {
useEffect,
useRef
} = require('react');
const UppyCore = require('@uppy/core').Uppy;
module.exports = function useUppy(factory) {
import { useEffect, useRef } from 'react';
import { Uppy as UppyCore } from '@uppy/core';
export default function useUppy(factory) {
if (typeof factory !== 'function') {

@@ -31,2 +26,2 @@ throw new TypeError('useUppy: expected a function that returns a new Uppy instance');

return uppy.current;
};
}

45

lib/Wrapper.js

@@ -1,10 +0,6 @@

const React = require('react');
import { createElement as h, Component } from 'react';
import PropTypes from 'prop-types';
import { uppy as uppyPropType } from './propTypes.js';
const PropTypes = require('prop-types');
const uppyPropType = require('./propTypes').uppy;
const h = React.createElement;
class UppyWrapper extends React.Component {
class UppyWrapper extends Component {
constructor(props) {

@@ -20,3 +16,7 @@ super(props);

componentDidUpdate(prevProps) {
if (prevProps.uppy !== this.props.uppy) {
const {
uppy
} = this.props;
if (prevProps.uppy !== uppy) {
this.uninstallPlugin(prevProps);

@@ -32,13 +32,18 @@ this.installPlugin();

installPlugin() {
const plugin = this.props.uppy.getPlugin(this.props.plugin);
plugin.mount(this.container, plugin);
const {
plugin,
uppy
} = this.props;
const pluginObj = uppy.getPlugin(plugin);
pluginObj.mount(this.container, pluginObj);
}
uninstallPlugin(props) {
if (props === void 0) {
props = this.props;
}
const plugin = props.uppy.getPlugin(this.props.plugin);
plugin.unmount();
uninstallPlugin(_temp) {
let {
uppy
} = _temp === void 0 ? this.props : _temp;
const {
plugin
} = this.props;
uppy.getPlugin(plugin).unmount();
}

@@ -60,5 +65,5 @@

UppyWrapper.propTypes = {
uppy: uppyPropType,
uppy: uppyPropType.isRequired,
plugin: PropTypes.string.isRequired
};
module.exports = UppyWrapper;
export default UppyWrapper;

23

package.json
{
"name": "@uppy/react",
"description": "React component wrappers around Uppy's official UI plugins.",
"version": "2.2.1",
"version": "3.0.0-beta",
"license": "MIT",
"main": "index.js",
"module": "index.mjs",
"main": "lib/index.js",
"types": "types/index.d.ts",
"type": "module",
"keywords": [

@@ -25,8 +25,8 @@ "file uploader",

"dependencies": {
"@uppy/dashboard": "^2.3.0",
"@uppy/drag-drop": "^2.1.1",
"@uppy/file-input": "^2.1.1",
"@uppy/progress-bar": "^2.1.1",
"@uppy/status-bar": "^2.2.1",
"@uppy/utils": "^4.1.0",
"@uppy/dashboard": "^3.0.0-beta",
"@uppy/drag-drop": "^3.0.0-beta",
"@uppy/file-input": "^3.0.0-beta",
"@uppy/progress-bar": "^3.0.0-beta",
"@uppy/status-bar": "^3.0.0-beta",
"@uppy/utils": "^5.0.0-beta",
"prop-types": "^15.6.1"

@@ -39,5 +39,6 @@ },

"peerDependencies": {
"@uppy/core": "^2.3.0",
"@uppy/core": "^3.0.0-beta",
"react": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"stableVersion": "2.2.1"
}

17

src/Dashboard.js

@@ -1,9 +0,7 @@

const React = require('react')
const DashboardPlugin = require('@uppy/dashboard')
const basePropTypes = require('./propTypes').dashboard
const getHTMLProps = require('./getHTMLProps')
const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged')
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'
const h = React.createElement
/**

@@ -14,3 +12,3 @@ * React Component that renders a Dashboard for an Uppy instance. This component

class Dashboard extends React.Component {
class Dashboard extends Component {
componentDidMount () {

@@ -21,2 +19,3 @@ this.installPlugin()

componentDidUpdate (prevProps) {
// eslint-disable-next-line react/destructuring-assignment
if (prevProps.uppy !== this.props.uppy) {

@@ -74,2 +73,2 @@ this.uninstallPlugin(prevProps)

module.exports = Dashboard
export default Dashboard

181

src/DashboardModal.js

@@ -1,10 +0,8 @@

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')
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'
const h = React.createElement
/**

@@ -15,3 +13,3 @@ * React Component that renders a Dashboard for an Uppy instance in a Modal

class DashboardModal extends React.Component {
class DashboardModal extends Component {
componentDidMount () {

@@ -22,13 +20,14 @@ 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()

@@ -43,7 +42,78 @@ }

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

@@ -59,3 +129,3 @@

this.plugin = uppy.getPlugin(options.id)
if (this.props.open) {
if (open) {
this.plugin.openModal()

@@ -85,2 +155,3 @@ }

DashboardModal.propTypes = {
uppy: uppyPropType.isRequired,
target: typeof window !== 'undefined' ? PropTypes.instanceOf(window.HTMLElement) : PropTypes.any,

@@ -91,5 +162,77 @@ open: 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,
module.exports = DashboardModal
// extra
open: undefined,
target: undefined,
locale: null,
onRequestClose: undefined,
}
export default DashboardModal

45

src/DragDrop.js

@@ -1,9 +0,8 @@

const React = require('react')
const DragDropPlugin = require('@uppy/drag-drop')
const propTypes = require('./propTypes')
const getHTMLProps = require('./getHTMLProps')
const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged')
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'
const h = React.createElement
/**

@@ -14,3 +13,3 @@ * React component that renders an area in which files can be dropped to be

class DragDrop extends React.Component {
class DragDrop extends Component {
componentDidMount () {

@@ -21,2 +20,3 @@ this.installPlugin()

componentDidUpdate (prevProps) {
// eslint-disable-next-line react/destructuring-assignment
if (prevProps.uppy !== this.props.uppy) {

@@ -37,6 +37,17 @@ this.uninstallPlugin(prevProps)

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,

@@ -71,8 +82,18 @@ }

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

27

src/FileInput.js

@@ -1,8 +0,6 @@

const PropTypes = require('prop-types')
const React = require('react')
const FileInputPlugin = require('@uppy/file-input')
const propTypes = require('./propTypes')
import { createElement as h, Component } from 'react'
import PropTypes from 'prop-types'
import FileInputPlugin from '@uppy/file-input'
import * as propTypes from './propTypes.js'
const h = React.createElement
/**

@@ -13,3 +11,3 @@ * React component that renders an area in which files can be dropped to be

class FileInput extends React.Component {
class FileInput extends Component {
componentDidMount () {

@@ -20,2 +18,3 @@ this.installPlugin()

componentDidUpdate (prevProps) {
// eslint-disable-next-line react/destructuring-assignment
if (prevProps.uppy !== this.props.uppy) {

@@ -32,6 +31,8 @@ this.uninstallPlugin(prevProps)

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,

@@ -63,3 +64,3 @@ }

FileInput.propTypes = {
uppy: propTypes.uppy,
uppy: propTypes.uppy.isRequired,
locale: propTypes.locale,

@@ -69,5 +70,9 @@ pretty: PropTypes.bool,

}
// 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

2

src/getHTMLProps.js

@@ -264,2 +264,2 @@ // List taken from React.HTMLAttributes supported properties:

module.exports = getHTMLProps
export default getHTMLProps

2

src/nonHtmlPropsHaveChanged.js

@@ -6,3 +6,3 @@ 'use strict'

module.exports = function nonHtmlPropsHaveChanged (component, prevProps) {
export default function nonHtmlPropsHaveChanged (component, prevProps) {
return Object.keys(component.props)

@@ -9,0 +9,0 @@ // TODO: replace `validProps` with an exported `Symbol('htmlProps')`.

29

src/ProgressBar.js

@@ -1,10 +0,8 @@

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')
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'
const h = React.createElement
/**

@@ -14,3 +12,3 @@ * React component that renders a progress bar at the top of the page.

class ProgressBar extends React.Component {
class ProgressBar extends Component {
componentDidMount () {

@@ -21,2 +19,3 @@ this.installPlugin()

componentDidUpdate (prevProps) {
// eslint-disable-next-line react/destructuring-assignment
if (prevProps.uppy !== this.props.uppy) {

@@ -37,6 +36,7 @@ this.uninstallPlugin(prevProps)

installPlugin () {
const { uppy } = this.props
const { uppy, fixed, hideAfterFinish } = this.props
const options = {
id: 'react:ProgressBar',
...this.props,
fixed,
hideAfterFinish,
target: this.container,

@@ -71,9 +71,12 @@ }

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

8

src/propTypes.js

@@ -1,6 +0,6 @@

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)

@@ -54,3 +54,3 @@ // A list of plugins to mount inside this component.

module.exports = {
export {
uppy,

@@ -57,0 +57,0 @@ locale,

55

src/StatusBar.js

@@ -1,10 +0,8 @@

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')
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'
const h = React.createElement
/**

@@ -15,3 +13,3 @@ * React component that renders a status bar containing upload progress and speed,

class StatusBar extends React.Component {
class StatusBar extends Component {
componentDidMount () {

@@ -22,2 +20,3 @@ this.installPlugin()

componentDidUpdate (prevProps) {
// eslint-disable-next-line react/destructuring-assignment
if (prevProps.uppy !== this.props.uppy) {

@@ -38,6 +37,21 @@ this.uninstallPlugin(prevProps)

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,

@@ -72,9 +86,22 @@ }

StatusBar.propTypes = {
uppy: uppyPropType,
uppy: uppyPropType.isRequired,
hideUploadButton: PropTypes.bool,
hideRetryButton: PropTypes.bool,
hidePauseResumeButton: PropTypes.bool,
hideCancelButton: PropTypes.bool,
showProgressDetails: PropTypes.bool,
hideAfterFinish: PropTypes.bool,
showProgressDetails: 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

6

src/useUppy.js

@@ -1,5 +0,5 @@

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') {

@@ -6,0 +6,0 @@ throw new TypeError('useUppy: expected a function that returns a new Uppy instance')

34

src/Wrapper.js

@@ -1,8 +0,6 @@

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) {

@@ -19,3 +17,4 @@ super(props)

componentDidUpdate (prevProps) {
if (prevProps.uppy !== this.props.uppy) {
const { uppy } = this.props
if (prevProps.uppy !== uppy) {
this.uninstallPlugin(prevProps)

@@ -31,13 +30,14 @@ this.installPlugin()

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()
}

@@ -55,6 +55,6 @@

UppyWrapper.propTypes = {
uppy: uppyPropType,
uppy: uppyPropType.isRequired,
plugin: PropTypes.string.isRequired,
}
module.exports = UppyWrapper
export default UppyWrapper
index.js
index.mjs
lib/Dashboard.js.map

Sorry, the diff of this file is not supported yet

lib/DashboardModal.js.map

Sorry, the diff of this file is not supported yet

lib/DragDrop.js.map

Sorry, the diff of this file is not supported yet

lib/FileInput.js.map

Sorry, the diff of this file is not supported yet

lib/getHTMLProps.js.map

Sorry, the diff of this file is not supported yet

lib/nonHtmlPropsHaveChanged.js.map

Sorry, the diff of this file is not supported yet

lib/ProgressBar.js.map

Sorry, the diff of this file is not supported yet

lib/propTypes.js.map

Sorry, the diff of this file is not supported yet

lib/StatusBar.js.map

Sorry, the diff of this file is not supported yet

lib/useUppy.js.map

Sorry, the diff of this file is not supported yet

lib/Wrapper.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc