diff --git a/packages/@uppy/dashboard/src/Dashboard.tsx b/packages/@uppy/dashboard/src/Dashboard.tsx index c6be7d0707..f8bb4e0d8a 100644 --- a/packages/@uppy/dashboard/src/Dashboard.tsx +++ b/packages/@uppy/dashboard/src/Dashboard.tsx @@ -1290,6 +1290,76 @@ export default class Dashboard 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>) { + 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 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(), }) } diff --git a/packages/@uppy/react/src/nonHtmlPropsHaveChanged.ts b/packages/@uppy/react/src/nonHtmlPropsHaveChanged.ts index 179c1625b8..86e12cf885 100644 --- a/packages/@uppy/react/src/nonHtmlPropsHaveChanged.ts +++ b/packages/@uppy/react/src/nonHtmlPropsHaveChanged.ts @@ -1,7 +1,12 @@ +import getHTMLProps from './getHTMLProps.ts' + export default function nonHtmlPropsHaveChanged< T extends Record, >(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], ) }