@uppy/react - npm Package Compare versions

Comparing version 3.2.2 to 3.3.0

CHANGELOG.md

 # @uppy/react
 
+## 3.3.0
+
+Released: 2024-03-27
+Included in: Uppy v3.24.0
+
+- @uppy/react: refactor to TS (Antoine du Hamel / #5012)
+
 ## 3.2.1
@@ -4,0 +11,0 @@

lib/Dashboard.js

 import { createElement as h, Component } from 'react';
+import PropTypes from 'prop-types';
 import DashboardPlugin from '@uppy/dashboard';
-import { dashboard as basePropTypes } from './propTypes.js';
-import getHTMLProps from './getHTMLProps.js';
-import nonHtmlPropsHaveChanged from './nonHtmlPropsHaveChanged.js';
-
+import { locale, uppy as uppyPropType, plugins, metaFields, cssSize } from "./propTypes.js";
+import getHTMLProps from "./getHTMLProps.js";
+import nonHtmlPropsHaveChanged from "./nonHtmlPropsHaveChanged.js";
 /**
@@ -22,7 +22,10 @@ * React Component that renders a Dashboard for an Uppy instance. This component
     } else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
-      const options = {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const {
+        uppy,
+        ...options
+      } = {
         ...this.props,
         target: this.container
       };
-      delete options.uppy;
       this.plugin.setOptions(options);
@@ -36,10 +39,10 @@ }
     const {
-      uppy
-    } = this.props;
-    const options = {
+      uppy,
+      ...options
+    } = {
       id: 'react:Dashboard',
+      inline: true,
       ...this.props,
       target: this.container
     };
-    delete options.uppy;
     uppy.use(DashboardPlugin, options);
@@ -67,6 +70,21 @@ this.plugin = uppy.getPlugin(options.id);
 }
-Dashboard.propTypes = basePropTypes;
-Dashboard.defaultProps = {
-  inline: true
+Dashboard.propsTypes = {
+  uppy: uppyPropType,
+  disableInformer: PropTypes.bool,
+  disableStatusBar: PropTypes.bool,
+  disableThumbnailGenerator: PropTypes.bool,
+  height: cssSize,
+  hideProgressAfterFinish: PropTypes.bool,
+  hideUploadButton: PropTypes.bool,
+  locale,
+  metaFields,
+  note: PropTypes.string,
+  plugins,
+  proudlyDisplayPoweredByUppy: PropTypes.bool,
+  showProgressDetails: PropTypes.bool,
+  width: cssSize,
+  // pass-through to ThumbnailGenerator
+  thumbnailType: PropTypes.string,
+  thumbnailWidth: PropTypes.number
 };
 export default Dashboard;

lib/DashboardModal.js

 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';
-
+import { cssSize, locale, metaFields, plugins, uppy as uppyPropType } from "./propTypes.js";
+import getHTMLProps from "./getHTMLProps.js";
+import nonHtmlPropsHaveChanged from "./nonHtmlPropsHaveChanged.js";
 /**
@@ -27,7 +26,11 @@ * React Component that renders a Dashboard for an Uppy instance in a Modal
     } else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
-      const options = {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-shadow
+      const {
+        uppy,
+        ...options
+      } = {
         ...this.props,
+        inline: false,
         onRequestCloseModal: onRequestClose
       };
-      delete options.uppy;
       this.plugin.setOptions(options);
@@ -46,85 +49,16 @@ }
     const {
-      id = 'react:DashboardModal',
-      uppy,
-      target,
+      target = this.container,
       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
+      uppy,
+      ...rest
     } = this.props;
     const options = {
-      id,
+      ...rest,
+      id: 'react:DashboardModal',
+      inline: false,
       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,
+      open,
       onRequestCloseModal: onRequestClose
     };
-    if (!options.target) {
-      options.target = this.container;
-    }
-    delete options.uppy;
     uppy.use(DashboardPlugin, options);
@@ -162,3 +96,2 @@ this.plugin = uppy.getPlugin(options.id);
   disablePageScrollWhenModalOpen: PropTypes.bool,
-  inline: PropTypes.bool,
   plugins,
@@ -200,3 +133,2 @@ width: cssSize,
   plugins: [],
-  inline: false,
   width: 750,
@@ -203,0 +135,0 @@ height: 550,

lib/DragDrop.js

 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';
-
+import * as propTypes from "./propTypes.js";
+import getHTMLProps from "./getHTMLProps.js";
+import nonHtmlPropsHaveChanged from "./nonHtmlPropsHaveChanged.js";
 /**
@@ -23,7 +22,10 @@ * React component that renders an area in which files can be dropped to be
     } else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
-      const options = {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const {
+        uppy,
+        ...options
+      } = {
         ...this.props,
         target: this.container
       };
-      delete options.uppy;
       this.plugin.setOptions(options);
@@ -53,3 +55,2 @@ }
     };
-    delete options.uppy;
     uppy.use(DragDropPlugin, options);
@@ -56,0 +57,0 @@ this.plugin = uppy.getPlugin(options.id);

lib/FileInput.js

 import { createElement as h, Component } from 'react';
 import PropTypes from 'prop-types';
 import FileInputPlugin from '@uppy/file-input';
-import * as propTypes from './propTypes.js';
-
+import * as propTypes from "./propTypes.js";
 /**
@@ -39,3 +38,2 @@ * React component that renders an area in which files can be dropped to be
     };
-    delete options.uppy;
     uppy.use(FileInputPlugin, options);
@@ -42,0 +40,0 @@ this.plugin = uppy.getPlugin(options.id);

lib/index.js

@@ -1,7 +0,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';
+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";

lib/ProgressBar.js

 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';
-
+import { uppy as uppyPropType } from "./propTypes.js";
+import getHTMLProps from "./getHTMLProps.js";
+import nonHtmlPropsHaveChanged from "./nonHtmlPropsHaveChanged.js";
 /**
@@ -22,7 +21,10 @@ * React component that renders a progress bar at the top of the page.
     } else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
-      const options = {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const {
+        uppy,
+        ...options
+      } = {
         ...this.props,
         target: this.container
       };
-      delete options.uppy;
       this.plugin.setOptions(options);
@@ -46,3 +48,2 @@ }
     };
-    delete options.uppy;
     uppy.use(ProgressBarPlugin, options);
@@ -49,0 +50,0 @@ this.plugin = uppy.getPlugin(options.id);

lib/propTypes.js

@@ -27,23 +27,2 @@ import PropTypes from 'prop-types';
 const cssSize = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-
-// Common props for dashboardy components (Dashboard and DashboardModal).
-const dashboard = {
-  uppy,
-  inline: PropTypes.bool,
-  plugins,
-  width: cssSize,
-  height: cssSize,
-  showProgressDetails: PropTypes.bool,
-  hideUploadButton: PropTypes.bool,
-  hideProgressAfterFinish: PropTypes.bool,
-  note: PropTypes.string,
-  metaFields,
-  proudlyDisplayPoweredByUppy: PropTypes.bool,
-  disableStatusBar: PropTypes.bool,
-  disableInformer: PropTypes.bool,
-  disableThumbnailGenerator: PropTypes.bool,
-  // pass-through to ThumbnailGenerator
-  thumbnailWidth: PropTypes.number,
-  locale
-};
-export { uppy, locale, dashboard, plugins, metaFields, cssSize };
+export { uppy, locale, plugins, metaFields, cssSize };

lib/StatusBar.js

 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';
-
+import { uppy as uppyPropType } from "./propTypes.js";
+import getHTMLProps from "./getHTMLProps.js";
+import nonHtmlPropsHaveChanged from "./nonHtmlPropsHaveChanged.js";
 /**
@@ -23,7 +22,10 @@ * React component that renders a status bar containing upload progress and speed,
     } else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
-      const options = {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const {
+        uppy,
+        ...options
+      } = {
         ...this.props,
         target: this.container
       };
-      delete options.uppy;
       this.plugin.setOptions(options);
@@ -57,3 +59,2 @@ }
     };
-    delete options.uppy;
     uppy.use(StatusBarPlugin, options);
@@ -60,0 +61,0 @@ this.plugin = uppy.getPlugin(options.id);

lib/useUppy.js

 import { useEffect, useRef } from 'react';
 import { Uppy as UppyCore } from '@uppy/core';
-
 /**
@@ -5,0 +4,0 @@ * @deprecated Initialize Uppy outside of the component.

lib/Wrapper.js

 import { createElement as h, Component } from 'react';
 import PropTypes from 'prop-types';
-import { uppy as uppyPropType } from './propTypes.js';
+import { uppy as uppyPropType } from "./propTypes.js";
 class UppyWrapper extends Component {
-  constructor(props) {
-    super(props);
-    this.refContainer = this.refContainer.bind(this);
+  constructor() {
+    super(...arguments);
+    this.refContainer = container => {
+      this.container = container;
+    };
   }
@@ -41,5 +43,2 @@ componentDidMount() {
   }
-  refContainer(container) {
-    this.container = container;
-  }
   render() {
@@ -46,0 +45,0 @@ return h('div', {

package.json

 {
   "name": "@uppy/react",
   "description": "React component wrappers around Uppy's official UI plugins.",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "license": "MIT",
@@ -25,3 +25,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "@uppy/utils": "^5.7.3",
+    "@uppy/utils": "^5.7.5",
     "prop-types": "^15.6.1"
@@ -34,8 +34,8 @@ },
   "peerDependencies": {
-    "@uppy/core": "^3.9.2",
-    "@uppy/dashboard": "^3.7.4",
-    "@uppy/drag-drop": "^3.0.3",
-    "@uppy/file-input": "^3.0.4",
-    "@uppy/progress-bar": "^3.0.4",
-    "@uppy/status-bar": "^3.2.8",
+    "@uppy/core": "^3.10.0",
+    "@uppy/dashboard": "^3.8.0",
+    "@uppy/drag-drop": "^3.1.0",
+    "@uppy/file-input": "^3.1.0",
+    "@uppy/progress-bar": "^3.1.1",
+    "@uppy/status-bar": "^3.3.1",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
@@ -42,0 +42,0 @@ },

types/index.d.ts

@@ -1,7 +0,7 @@
-export { default as Dashboard } from '../src/Dashboard'
-export { default as DashboardModal } from '../src/DashboardModal'
-export { default as DragDrop } from '../src/DragDrop'
-export { default as ProgressBar } from '../src/ProgressBar'
-export { default as StatusBar } from '../src/StatusBar'
-export { default as FileInput } from '../src/FileInput'
-export { default as useUppy } from '../src/useUppy'
+export { default as Dashboard } from './Dashboard'
+export { default as DashboardModal } from './DashboardModal'
+export { default as DragDrop } from './DragDrop'
+export { default as ProgressBar } from './ProgressBar'
+export { default as StatusBar } from './StatusBar'
+export { default as FileInput } from './FileInput'
+export { default as useUppy } from './useUppy'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

118779

decreased by-1.89%

Number of package files

50

decreased by-24.24%

Lines of code

1879

decreased by-2.39%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• Updated@uppy/utils@^5.7.5