@uppy/dashboard: propagate setOptions to StatusBar

packages/@uppy/dashboard/src/Dashboard.tsx

@@ -1297,6 +1297,60 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
     }
   }
 
+  #getStatusBarOpts() {
+    return {
+      hideUploadButton: this.opts.hideUploadButton,
+      hideRetryButton: this.opts.hideRetryButton,
+      hidePauseResumeButton: this.opts.hidePauseResumeButton,
+      hideCancelButton: this.opts.hideCancelButton,
+      showProgressDetails: this.opts.showProgressDetails,
+      hideAfterFinish: this.opts.hideProgressAfterFinish,
+      locale: this.opts.locale,
+      doneButtonHandler: this.opts.doneButtonHandler,
+    }
+  }
+
+  #getThumbnailGeneratorOpts() {
+    return {
+      thumbnailWidth: this.opts.thumbnailWidth,
+      thumbnailHeight: this.opts.thumbnailHeight,
+      thumbnailType: this.opts.thumbnailType,
+      waitForThumbnailsBeforeUpload: this.opts.waitForThumbnailsBeforeUpload,
+      // If we don't block on thumbnails, we can lazily generate them
+      lazy: !this.opts.waitForThumbnailsBeforeUpload,
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  #getInformerOpts() {
+    return {
+      // currently no options
+    }
+  }
+
+  setOptions(opts: Partial<DashboardOptions<M, B>>) {
+    super.setOptions(opts)
+    this.uppy
+      .getPlugin(this.#getStatusBarId())
+      ?.setOptions(this.#getStatusBarOpts())
+
+    this.uppy
+      .getPlugin(this.#getThumbnailGeneratorId())
+      ?.setOptions(this.#getThumbnailGeneratorOpts())
+  }
+
+  #getStatusBarId() {
+    return `${this.id}:StatusBar`
+  }
+
+  #getThumbnailGeneratorId() {
+    return `${this.id}:ThumbnailGenerator`
+  }
+
+  #getInformerId() {
+    return `${this.id}:Informer`
+  }
+
   install = (): void => {
     // Set default state for Dashboard
     this.setPluginState({
@@ -1339,35 +1393,24 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
 
     if (!this.opts.disableStatusBar) {
       this.uppy.use(StatusBar, {
-        id: `${this.id}:StatusBar`,
+        id: this.#getStatusBarId(),
         target: this,
-        hideUploadButton: this.opts.hideUploadButton,
-        hideRetryButton: this.opts.hideRetryButton,
-        hidePauseResumeButton: this.opts.hidePauseResumeButton,
-        hideCancelButton: this.opts.hideCancelButton,
-        showProgressDetails: this.opts.showProgressDetails,
-        hideAfterFinish: this.opts.hideProgressAfterFinish,
-        locale: this.opts.locale,
-        doneButtonHandler: this.opts.doneButtonHandler,
+        ...this.#getStatusBarOpts(),
       })
     }
 
     if (!this.opts.disableInformer) {
       this.uppy.use(Informer, {
-        id: `${this.id}:Informer`,
+        id: this.#getInformerId(),
         target: this,
+        ...this.#getInformerOpts(),
       })
     }
 
     if (!this.opts.disableThumbnailGenerator) {
       this.uppy.use(ThumbnailGenerator, {
-        id: `${this.id}:ThumbnailGenerator`,
-        thumbnailWidth: this.opts.thumbnailWidth,
-        thumbnailHeight: this.opts.thumbnailHeight,
-        thumbnailType: this.opts.thumbnailType,
-        waitForThumbnailsBeforeUpload: this.opts.waitForThumbnailsBeforeUpload,
-        // If we don't block on thumbnails, we can lazily generate them
-        lazy: !this.opts.waitForThumbnailsBeforeUpload,
+        id: this.#getThumbnailGeneratorId(),
+        ...this.#getThumbnailGeneratorOpts(),
       })
     }
 

packages/@uppy/react/src/nonHtmlPropsHaveChanged.ts

@@ -1,7 +1,12 @@
+import getHTMLProps from './getHTMLProps'
+
 export default function nonHtmlPropsHaveChanged<
   T extends Record<string, unknown>,
 >(props: T, prevProps: T): boolean {
+  // todo instead rewrite the components that use nonHtmlPropsHaveChanged
+  // to hooks, so we can use useEffect on specific props instead of this hack
+  const htmlProps = getHTMLProps(props)
   return Object.keys(props).some(
-    (key) => !Object.hasOwn(props, key) && props[key] !== prevProps[key],
+    (key) => !Object.hasOwn(htmlProps, key) && props[key] !== prevProps[key],
   )
 }

private/dev/Dashboard.js

@@ -1,7 +1,6 @@
 // The @uppy/ dependencies are resolved from source
 /* eslint-disable import/no-extraneous-dependencies */
 import Uppy, { debugLogger } from '@uppy/core'
-import Dashboard from '@uppy/dashboard'
 import RemoteSources from '@uppy/remote-sources'
 import Webcam from '@uppy/webcam'
 import ScreenCapture from '@uppy/screen-capture'
@@ -11,7 +10,6 @@ import AwsS3 from '@uppy/aws-s3'
 import AwsS3Multipart from '@uppy/aws-s3-multipart'
 import XHRUpload from '@uppy/xhr-upload'
 import Transloadit from '@uppy/transloadit'
-import Form from '@uppy/form'
 import ImageEditor from '@uppy/image-editor'
 import DropTarget from '@uppy/drop-target'
 import Audio from '@uppy/audio'
@@ -77,10 +75,7 @@ function getCompanionKeysParams (name) {
 
 // Rest is implementation! Obviously edit as necessary...
 
-export default () => {
-  const restrictions = undefined
-  // const restrictions = { requiredMetaFields: ['caption'], maxNumberOfFiles: 3 }
-
+export default ({ restrictions } = {}) => {
   const uppyDashboard = new Uppy({
     logger: debugLogger,
     meta: {
@@ -90,44 +85,29 @@ export default () => {
     allowMultipleUploadBatches: false,
     restrictions,
   })
-    .use(Dashboard, {
-      trigger: '#pick-files',
-      // inline: true,
-      target: '.foo',
-      metaFields: [
-        { id: 'license', name: 'License', placeholder: 'specify license' },
-        { id: 'caption', name: 'Caption', placeholder: 'add caption' },
-      ],
-      showProgressDetails: true,
-      proudlyDisplayPoweredByUppy: true,
-      note: `${JSON.stringify(restrictions)}`,
-    })
-    .use(GoogleDrive, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts, ...getCompanionKeysParams('GOOGLE_DRIVE') })
-    // .use(Instagram, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
-    // .use(Dropbox, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
-    // .use(Box, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
-    // .use(Facebook, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
-    // .use(OneDrive, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
-    // .use(Zoom, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
-    // .use(Url, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
-    // .use(Unsplash, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
+    .use(GoogleDrive, { companionUrl: COMPANION_URL, companionAllowedHosts, ...getCompanionKeysParams('GOOGLE_DRIVE') })
+    // .use(Instagram, { companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Dropbox, { companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Box, { companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Facebook, { companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(OneDrive, { companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Zoom, { companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Url, { companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Unsplash, { companionUrl: COMPANION_URL, companionAllowedHosts })
     .use(RemoteSources, {
       companionUrl: COMPANION_URL,
       sources: ['GooglePhotos', 'Box', 'Dropbox', 'Facebook', 'Instagram', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
       companionAllowedHosts,
     })
     .use(Webcam, {
-      target: Dashboard,
       showVideoSourceDropdown: true,
       showRecordingLength: true,
     })
     .use(Audio, {
-      target: Dashboard,
       showRecordingLength: true,
     })
-    .use(ScreenCapture, { target: Dashboard })
-    .use(Form, { target: '#upload-form' })
-    .use(ImageEditor, { target: Dashboard })
+    .use(ScreenCapture)
+    .use(ImageEditor)
     .use(DropTarget, {
       target: document.body,
     })
@@ -185,8 +165,6 @@ export default () => {
     uppyDashboard.use(GoldenRetriever, { serviceWorker: true })
   }
 
-  window.uppy = uppyDashboard
-
   uppyDashboard.on('complete', (result) => {
     if (result.failed.length === 0) {
       console.log('Upload successful 😀')
@@ -200,6 +178,5 @@ export default () => {
     }
   })
 
-  const modalTrigger = document.querySelector('#pick-files')
-  if (modalTrigger) modalTrigger.click()
+  return uppyDashboard
 }

private/dev/React.jsx

@@ -0,0 +1,36 @@
+/* eslint-disable react/react-in-jsx-scope, import/no-extraneous-dependencies */
+// eslint-disable-next-line no-unused-vars
+import { createElement as h, useState, useCallback } from 'react';
+// eslint-disable-next-line import/no-unresolved
+import { createRoot } from 'react-dom/client';
+
+import '@uppy/core/dist/style.css';
+import '@uppy/dashboard/dist/style.css';
+
+import { Dashboard } from '@uppy/react';
+
+import DashboardUppy from './Dashboard.js'
+
+
+function App() {
+  const [uppy] = useState(() => DashboardUppy());
+
+  const [i, setI] = useState(0);
+
+  // https://github.com/transloadit/uppy/issues/5248
+  const handleDoneButtonClick = useCallback(() => {
+    setI(i + 1);
+    console.log('Done button clicked', i);
+  }, [i]);
+
+  return (
+    <div>
+      <h1>React Uppy</h1>
+      <Dashboard uppy={uppy} doneButtonHandler={handleDoneButtonClick} />
+    </div>
+  );
+}
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

private/dev/index.html

@@ -42,6 +42,9 @@
     <main class="foo">
       <h1>Dashboard is here</h1>
 
+      <p><a href="/react.html">React dashboard</a></p>
+      <p><a href="/dragdrop.html">DragDrop</a></p>
+
       <!-- some inputs in a form to check focus management in Dashboard -->
       <form id="upload-form" action="/">
         <button type="button" id="pick-files">Pick Files</button><br />

private/dev/index.js

@@ -1,12 +1,43 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Form from '@uppy/form'
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Dashboard from '@uppy/dashboard'
+
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'uppy/src/style.scss'
 
 import DragDrop from './DragDrop.js'
-import Dashboard from './Dashboard.js'
+import DashboardUppy from './Dashboard.js'
+
 
 switch (window.location.pathname.toLowerCase()) {
   case '/':
-  case '/dashboard.html': Dashboard(); break
+  case '/dashboard.html': {
+    const restrictions = undefined
+    // const restrictions = { requiredMetaFields: ['caption'], maxNumberOfFiles: 3 }
+
+    const uppy = DashboardUppy({ restrictions })
+      .use(Dashboard, {
+        trigger: '#pick-files',
+        // inline: true,
+        target: '.foo',
+        metaFields: [
+          { id: 'license', name: 'License', placeholder: 'specify license' },
+          { id: 'caption', name: 'Caption', placeholder: 'add caption' },
+        ],
+        showProgressDetails: true,
+        proudlyDisplayPoweredByUppy: true,
+        note: `${JSON.stringify(restrictions)}`,
+      })
+      .use(Form, { target: '#upload-form' })
+
+    window.uppy = uppy
+
+    const modalTrigger = document.querySelector('#pick-files')
+    if (modalTrigger) modalTrigger.click()
+  }
+  break
   case '/dragdrop.html': DragDrop(); break
   default: throw new Error('404')
 }

private/dev/package.json

@@ -13,6 +13,8 @@
     "autoprefixer": "^10.2.6",
     "postcss-dir-pseudo-class": "^6.0.0",
     "postcss-logical": "^5.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "vite": "^5.0.0"
   },
   "private": true,

private/dev/react.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React</title>
+    <link rel="icon" type="image/png" href="https://uppy.io/img/logo.svg" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/React.jsx"></script>
+  </body>
+</html>

yarn.lock

@@ -8091,6 +8091,8 @@ __metadata:
     autoprefixer: "npm:^10.2.6"
     postcss-dir-pseudo-class: "npm:^6.0.0"
     postcss-logical: "npm:^5.0.0"
+    react: "npm:^18.3.1"
+    react-dom: "npm:^18.3.1"
     vite: "npm:^5.0.0"
   languageName: unknown
   linkType: soft
@@ -24859,7 +24861,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.0.0, react-dom@npm:^18.1.0, react-dom@npm:^18.2.0":
+"react-dom@npm:^18.0.0, react-dom@npm:^18.1.0, react-dom@npm:^18.2.0, react-dom@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -25019,7 +25021,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.0.0, react@npm:^18.1.0, react@npm:^18.2.0":
+"react@npm:^18.0.0, react@npm:^18.1.0, react@npm:^18.2.0, react@npm:^18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies: