diff --git a/package-lock.json b/package-lock.json index d7e785cc7..fb0f0d0b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14652,6 +14652,11 @@ "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz", "integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=" }, + "is-shallow-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-shallow-equal/-/is-shallow-equal-1.0.1.tgz", + "integrity": "sha512-lq5RvK+85Hs5J3p4oA4256M1FEffzmI533ikeDHvJd42nouRRx5wBzt36JuviiGe5dIPyHON/d0/Up+PBo6XkQ==" + }, "is-ssh": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/is-ssh/-/is-ssh-1.3.1.tgz", @@ -18771,6 +18776,11 @@ } } }, + "memoize-one": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz", + "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==" + }, "memorystream": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", diff --git a/packages/@uppy/dashboard/package.json b/packages/@uppy/dashboard/package.json index aa3522529..3118bbadf 100644 --- a/packages/@uppy/dashboard/package.json +++ b/packages/@uppy/dashboard/package.json @@ -29,8 +29,10 @@ "@uppy/utils": "1.1.0", "classnames": "^2.2.6", "cuid": "^2.1.1", + "is-shallow-equal": "^1.0.1", "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1", + "memoize-one": "^5.0.4", "preact": "8.2.9", "preact-css-transition-group": "^1.3.0", "prettier-bytes": "^1.0.4", diff --git a/packages/@uppy/dashboard/src/components/FileItem/index.js b/packages/@uppy/dashboard/src/components/FileItem/index.js index 71d984f40..05456337a 100644 --- a/packages/@uppy/dashboard/src/components/FileItem/index.js +++ b/packages/@uppy/dashboard/src/components/FileItem/index.js @@ -1,12 +1,12 @@ const { h } = require('preact') const classNames = require('classnames') - +const pure = require('../../utils/pure') const FilePreviewAndLink = require('./FilePreviewAndLink') const FileProgress = require('./FileProgress') const FileInfo = require('./FileInfo') const Buttons = require('./Buttons') -module.exports = function FileItem (props) { +module.exports = pure(function FileItem (props) { const file = props.file const isProcessing = file.progress.preprocess || file.progress.postprocess @@ -72,4 +72,4 @@ module.exports = function FileItem (props) { ) -} +}) diff --git a/packages/@uppy/dashboard/src/components/FileList.js b/packages/@uppy/dashboard/src/components/FileList.js index 85324b2f0..ac16ed6f7 100644 --- a/packages/@uppy/dashboard/src/components/FileList.js +++ b/packages/@uppy/dashboard/src/components/FileList.js @@ -9,6 +9,32 @@ module.exports = (props) => { { 'uppy-Dashboard-files--noFiles': noFiles } ) + const fileProps = { + // FIXME This is confusing, it's actually the Dashboard's plugin ID + id: props.id, + error: props.error, + // TODO move this to context + i18n: props.i18n, + log: props.log, + info: props.info, + // features + acquirers: props.acquirers, + resumableUploads: props.resumableUploads, + individualCancellation: props.individualCancellation, + // visual options + hideRetryButton: props.hideRetryButton, + hidePauseResumeCancelButtons: props.hidePauseResumeCancelButtons, + showLinkToFileUploadResult: props.showLinkToFileUploadResult, + isWide: props.isWide, + metaFields: props.metaFields, + // callbacks + retryUpload: props.retryUpload, + pauseUpload: props.pauseUpload, + cancelUpload: props.cancelUpload, + toggleFileCard: props.toggleFileCard, + removeFile: props.removeFile + } + return (