@uppy/dashboard: propagate setOptions to StatusBar (#5260)

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

@@ -1290,6 +1290,76 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
     }
   }
 
+  #getStatusBarOpts() {
+    const {
+      hideUploadButton,
+      hideRetryButton,
+      hidePauseResumeButton,
+      hideCancelButton,
+      showProgressDetails,
+      hideProgressAfterFinish,
+      locale: l,
+      doneButtonHandler,
+    } = this.opts
+    return {
+      hideUploadButton,
+      hideRetryButton,
+      hidePauseResumeButton,
+      hideCancelButton,
+      showProgressDetails,
+      hideAfterFinish: hideProgressAfterFinish,
+      locale: l,
+      doneButtonHandler,
+    }
+  }
+
+  #getThumbnailGeneratorOpts() {
+    const {
+      thumbnailWidth,
+      thumbnailHeight,
+      thumbnailType,
+      waitForThumbnailsBeforeUpload,
+    } = this.opts
+    return {
+      thumbnailWidth,
+      thumbnailHeight,
+      thumbnailType,
+      waitForThumbnailsBeforeUpload,
+      // If we don't block on thumbnails, we can lazily generate them
+      lazy: !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({
@@ -1332,35 +1402,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.ts'
+
 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],
   )
 }