From 4b7a2cc67e9c5af691f8e2fe3f5b2d0523939feb Mon Sep 17 00:00:00 2001 From: Murderlon Date: Tue, 7 Sep 2021 14:54:50 +0200 Subject: [PATCH 01/12] Allow hoisted functions in `.eslintrc` --- .eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 950799469f..27f2f42a47 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -85,7 +85,7 @@ module.exports = { 'no-param-reassign': ['warn'], 'no-redeclare': ['warn'], 'no-shadow': ['warn'], - 'no-use-before-define': ['warn'], + 'no-use-before-define': ['warn', { 'functions': false }], 'radix': ['warn'], 'react/button-has-type': 'error', 'react/destructuring-assignment': ['warn'], From c3eafa51175076f52b72c080ee63f62ce68c9c8f Mon Sep 17 00:00:00 2001 From: Murderlon Date: Tue, 7 Sep 2021 14:55:47 +0200 Subject: [PATCH 02/12] Abstract UI components into `Components.js` --- packages/@uppy/status-bar/src/Components.js | 389 ++++++++++++++++++++ packages/@uppy/status-bar/src/StatusBar.js | 308 +--------------- packages/@uppy/status-bar/src/index.js | 2 +- 3 files changed, 403 insertions(+), 296 deletions(-) create mode 100644 packages/@uppy/status-bar/src/Components.js diff --git a/packages/@uppy/status-bar/src/Components.js b/packages/@uppy/status-bar/src/Components.js new file mode 100644 index 0000000000..42cfbc5121 --- /dev/null +++ b/packages/@uppy/status-bar/src/Components.js @@ -0,0 +1,389 @@ +const classNames = require('classnames') +const throttle = require('lodash.throttle') +const prettierBytes = require('@transloadit/prettier-bytes') +const prettyETA = require('@uppy/utils/lib/prettyETA') +const { h } = require('preact') + +const statusBarStates = require('./StatusBarStates') + +const renderDot = () => ' \u00B7 ' + +module.exports = { + UploadBtn, + RetryBtn, + CancelBtn, + PauseResumeButton, + DoneBtn, + LoadingSpinner, + ProgressDetails, + ProgressBarProcessing, + ProgressBarError, + ProgressBarUploading, + ProgressBarComplete, +} + +function UploadBtn (props) { + const uploadBtnClassNames = classNames( + 'uppy-u-reset', + 'uppy-c-btn', + 'uppy-StatusBar-actionBtn', + 'uppy-StatusBar-actionBtn--upload', + { + 'uppy-c-btn-primary': props.uploadState === statusBarStates.STATE_WAITING, + }, + { 'uppy-StatusBar-actionBtn--disabled': props.isSomeGhost } + ) + + const uploadBtnText + = props.newFiles && props.isUploadStarted && !props.recoveredState + ? props.i18n('uploadXNewFiles', { smart_count: props.newFiles }) + : props.i18n('uploadXFiles', { smart_count: props.newFiles }) + + return ( + + ) +} + +function RetryBtn (props) { + return ( + + ) +} + +function CancelBtn (props) { + return ( + + ) +} + +function PauseResumeButton (props) { + const { isAllPaused, i18n } = props + const title = isAllPaused ? i18n('resume') : i18n('pause') + + function togglePauseResume () { + if (props.isAllComplete) return null + + if (!props.resumableUploads) { + return props.uppy.cancelAll() + } + + if (props.isAllPaused) { + return props.uppy.resumeAll() + } + + return props.uppy.pauseAll() + } + + return ( + + ) +} + +function DoneBtn (props) { + const { i18n } = props + return ( + + ) +} + +function LoadingSpinner () { + return ( + + ) +} + +function ProgressBarProcessing (props) { + const value = Math.round(props.value * 100) + + return ( +
+ + {props.mode === 'determinate' ? `${value}% \u00B7 ` : ''} + {props.message} +
+ ) +} + +function ProgressDetails (props) { + const ifShowFilesUploadedOfTotal = props.numUploads > 1 + + return ( +
+ {ifShowFilesUploadedOfTotal + && props.i18n('filesUploadedOfTotal', { + complete: props.complete, + smart_count: props.numUploads, + })} + + {/* When should we render this dot? + 1. .-additionalInfo is shown (happens only on desktops) + 2. AND 'filesUploadedOfTotal' was shown + */} + {ifShowFilesUploadedOfTotal && renderDot()} + + {props.i18n('dataUploadedOfTotal', { + complete: prettierBytes(props.totalUploadedSize), + total: prettierBytes(props.totalSize), + })} + + {renderDot()} + + {props.i18n('xTimeLeft', { + time: prettyETA(props.totalETA), + })} + +
+ ) +} + +function UnknownProgressDetails (props) { + return ( +
+ {props.i18n('filesUploadedOfTotal', { + complete: props.complete, + smart_count: props.numUploads, + })} +
+ ) +} + +function UploadNewlyAddedFiles (props) { + const uploadBtnClassNames = classNames( + 'uppy-u-reset', + 'uppy-c-btn', + 'uppy-StatusBar-actionBtn', + 'uppy-StatusBar-actionBtn--uploadNewlyAdded' + ) + + return ( +
+
+ {props.i18n('xMoreFilesAdded', { smart_count: props.newFiles })} +
+ +
+ ) +} + +const ThrottledProgressDetails = throttle(ProgressDetails, 500, { + leading: true, + trailing: true, +}) + +function ProgressBarUploading (props) { + if (!props.isUploadStarted || props.isAllComplete) { + return null + } + + const title = props.isAllPaused + ? props.i18n('paused') + : props.i18n('uploading') + const showUploadNewlyAddedFiles = props.newFiles && props.isUploadStarted + + return ( +
+ {!props.isAllPaused ? : null} +
+
+ {props.supportsUploadProgress + ? `${title}: ${props.totalProgress}%` + : title} +
+ {/* eslint-disable-next-line no-nested-ternary */} + {!props.isAllPaused + && !showUploadNewlyAddedFiles + && props.showProgressDetails ? ( + props.supportsUploadProgress ? ( + + ) : ( + + ) + ) : null} + {showUploadNewlyAddedFiles ? ( + + ) : null} +
+
+ ) +} + +function ProgressBarComplete ({ i18n }) { + return ( +
+
+
+ + {i18n('complete')} +
+
+
+ ) +} + +function ProgressBarError ({ error, i18n }) { + function displayErrorAlert () { + const errorMessage = `${i18n('uploadFailed')} \n\n ${error}` + // eslint-disable-next-line no-alert + alert(errorMessage) // TODO: move to custom alert implementation + } + + return ( +
+
+
+ + {i18n('uploadFailed')} +
+
+ +
+ ) +} diff --git a/packages/@uppy/status-bar/src/StatusBar.js b/packages/@uppy/status-bar/src/StatusBar.js index d87ae6d3d5..78a4daa0ec 100644 --- a/packages/@uppy/status-bar/src/StatusBar.js +++ b/packages/@uppy/status-bar/src/StatusBar.js @@ -1,10 +1,19 @@ -const throttle = require('lodash.throttle') -const classNames = require('classnames') -const prettierBytes = require('@transloadit/prettier-bytes') -const prettyETA = require('@uppy/utils/lib/prettyETA') const { h } = require('preact') +const classNames = require('classnames') const statusBarStates = require('./StatusBarStates') +const { + UploadBtn, + RetryBtn, + CancelBtn, + PauseResumeButton, + DoneBtn, + ProgressBarProcessing, + ProgressBarError, + ProgressBarUploading, + ProgressBarComplete, +} = require('./Components') + function calculateProcessingProgress (files) { // Collect pre or postprocessing progress states. const progresses = [] @@ -35,20 +44,6 @@ function calculateProcessingProgress (files) { } } -function togglePauseResume (props) { - if (props.isAllComplete) return - - if (!props.resumableUploads) { - return props.uppy.cancelAll() - } - - if (props.isAllPaused) { - return props.uppy.resumeAll() - } - - return props.uppy.pauseAll() -} - module.exports = (props) => { props = props || {} @@ -151,280 +146,3 @@ module.exports = (props) => { ) } - -const UploadBtn = (props) => { - const uploadBtnClassNames = classNames( - 'uppy-u-reset', - 'uppy-c-btn', - 'uppy-StatusBar-actionBtn', - 'uppy-StatusBar-actionBtn--upload', - { 'uppy-c-btn-primary': props.uploadState === statusBarStates.STATE_WAITING }, - { 'uppy-StatusBar-actionBtn--disabled': props.isSomeGhost } - ) - - const uploadBtnText = props.newFiles && props.isUploadStarted && !props.recoveredState - ? props.i18n('uploadXNewFiles', { smart_count: props.newFiles }) - : props.i18n('uploadXFiles', { smart_count: props.newFiles }) - - return ( - - ) -} - -const RetryBtn = (props) => { - return ( - - ) -} - -const CancelBtn = (props) => { - return ( - - ) -} - -const PauseResumeButton = (props) => { - const { isAllPaused, i18n } = props - const title = isAllPaused ? i18n('resume') : i18n('pause') - - return ( - - ) -} - -const DoneBtn = (props) => { - const { i18n } = props - return ( - - ) -} - -const LoadingSpinner = () => { - return ( - - ) -} - -const ProgressBarProcessing = (props) => { - const value = Math.round(props.value * 100) - - return ( -
- - {props.mode === 'determinate' ? `${value}% \u00B7 ` : ''} - {props.message} -
- ) -} - -const renderDot = () => ' \u00B7 ' - -const ProgressDetails = (props) => { - const ifShowFilesUploadedOfTotal = props.numUploads > 1 - - return ( -
- { - ifShowFilesUploadedOfTotal - && props.i18n('filesUploadedOfTotal', { - complete: props.complete, - smart_count: props.numUploads, - }) - } - - {/* When should we render this dot? - 1. .-additionalInfo is shown (happens only on desktops) - 2. AND 'filesUploadedOfTotal' was shown - */} - {ifShowFilesUploadedOfTotal && renderDot()} - - { - props.i18n('dataUploadedOfTotal', { - complete: prettierBytes(props.totalUploadedSize), - total: prettierBytes(props.totalSize), - }) - } - - {renderDot()} - - { - props.i18n('xTimeLeft', { - time: prettyETA(props.totalETA), - }) - } - -
- ) -} - -const UnknownProgressDetails = (props) => { - return ( -
- {props.i18n('filesUploadedOfTotal', { complete: props.complete, smart_count: props.numUploads })} -
- ) -} - -const UploadNewlyAddedFiles = (props) => { - const uploadBtnClassNames = classNames( - 'uppy-u-reset', - 'uppy-c-btn', - 'uppy-StatusBar-actionBtn', - 'uppy-StatusBar-actionBtn--uploadNewlyAdded' - ) - - return ( -
-
- {props.i18n('xMoreFilesAdded', { smart_count: props.newFiles })} -
- -
- ) -} - -const ThrottledProgressDetails = throttle(ProgressDetails, 500, { leading: true, trailing: true }) - -const ProgressBarUploading = (props) => { - if (!props.isUploadStarted || props.isAllComplete) { - return null - } - - const title = props.isAllPaused ? props.i18n('paused') : props.i18n('uploading') - const showUploadNewlyAddedFiles = props.newFiles && props.isUploadStarted - - return ( -
- {!props.isAllPaused ? : null} -
-
- {props.supportsUploadProgress ? `${title}: ${props.totalProgress}%` : title} -
- {/* eslint-disable-next-line no-nested-ternary */} - {!props.isAllPaused && !showUploadNewlyAddedFiles && props.showProgressDetails - ? (props.supportsUploadProgress ? : ) - : null} - {showUploadNewlyAddedFiles ? : null} -
-
- ) -} - -const ProgressBarComplete = ({ i18n }) => { - return ( -
-
-
- - {i18n('complete')} -
-
-
- ) -} - -const ProgressBarError = ({ error, i18n }) => { - function displayErrorAlert () { - const errorMessage = `${i18n('uploadFailed')} \n\n ${error}` - // eslint-disable-next-line no-alert - alert(errorMessage) // TODO: move to custom alert implementation - } - - return ( -
-
-
- - {i18n('uploadFailed')} -
-
- -
- ) -} diff --git a/packages/@uppy/status-bar/src/index.js b/packages/@uppy/status-bar/src/index.js index a52b47a66e..cf1460d372 100644 --- a/packages/@uppy/status-bar/src/index.js +++ b/packages/@uppy/status-bar/src/index.js @@ -188,7 +188,7 @@ module.exports = class StatusBar extends UIPlugin { totalProgress, totalSize, totalUploadedSize, - isAllComplete, + isAllComplete: false, isAllPaused, isAllErrored, isUploadStarted, From d1efec354a4b626916de416d937b222ea59c7e18 Mon Sep 17 00:00:00 2001 From: Murderlon Date: Tue, 7 Sep 2021 15:27:42 +0200 Subject: [PATCH 03/12] Resolve all eslint warnings in `Components.js` --- packages/@uppy/status-bar/src/Components.js | 178 +++++++++++++------- 1 file changed, 114 insertions(+), 64 deletions(-) diff --git a/packages/@uppy/status-bar/src/Components.js b/packages/@uppy/status-bar/src/Components.js index 42cfbc5121..14953e3f26 100644 --- a/packages/@uppy/status-bar/src/Components.js +++ b/packages/@uppy/status-bar/src/Components.js @@ -23,29 +23,39 @@ module.exports = { } function UploadBtn (props) { + const { + newFiles, + isUploadStarted, + recoveredState, + i18n, + uploadState, + isSomeGhost, + startUpload, + } = props + const uploadBtnClassNames = classNames( 'uppy-u-reset', 'uppy-c-btn', 'uppy-StatusBar-actionBtn', 'uppy-StatusBar-actionBtn--upload', { - 'uppy-c-btn-primary': props.uploadState === statusBarStates.STATE_WAITING, + 'uppy-c-btn-primary': uploadState === statusBarStates.STATE_WAITING, }, - { 'uppy-StatusBar-actionBtn--disabled': props.isSomeGhost } + { 'uppy-StatusBar-actionBtn--disabled': isSomeGhost } ) const uploadBtnText - = props.newFiles && props.isUploadStarted && !props.recoveredState - ? props.i18n('uploadXNewFiles', { smart_count: props.newFiles }) - : props.i18n('uploadXFiles', { smart_count: props.newFiles }) + = newFiles && isUploadStarted && !recoveredState + ? i18n('uploadXNewFiles', { smart_count: newFiles }) + : i18n('uploadXFiles', { smart_count: newFiles }) return ( ) } function CancelBtn (props) { + const { i18n, uppy } = props + return ( ) @@ -284,36 +309,61 @@ const ThrottledProgressDetails = throttle(ProgressDetails, 500, { }) function ProgressBarUploading (props) { - if (!props.isUploadStarted || props.isAllComplete) { + const { + i18n, + supportsUploadProgress, + totalProgress, + showProgressDetails, + isUploadStarted, + isAllComplete, + isAllPaused, + newFiles, + numUploads, + complete, + totalUploadedSize, + totalSize, + totalETA, + startUpload, + } = props + const showUploadNewlyAddedFiles = newFiles && isUploadStarted + + if (!isUploadStarted || isAllComplete) { return null } - const title = props.isAllPaused - ? props.i18n('paused') - : props.i18n('uploading') - const showUploadNewlyAddedFiles = props.newFiles && props.isUploadStarted + const title = isAllPaused ? i18n('paused') : i18n('uploading') + + function renderProgressDetails () { + if (!isAllPaused && !showUploadNewlyAddedFiles && showProgressDetails) { + if (supportsUploadProgress) { + return ( + + ) + } + return + } + return null + } return (
- {!props.isAllPaused ? : null} + {!isAllPaused ? : null}
- {props.supportsUploadProgress - ? `${title}: ${props.totalProgress}%` - : title} + {supportsUploadProgress ? `${title}: ${totalProgress}%` : title}
- {/* eslint-disable-next-line no-nested-ternary */} - {!props.isAllPaused - && !showUploadNewlyAddedFiles - && props.showProgressDetails ? ( - props.supportsUploadProgress ? ( - - ) : ( - - ) - ) : null} + + {renderProgressDetails()} + {showUploadNewlyAddedFiles ? ( - + ) : null}
From 299a784992e5644a86e2741e280d718fa70ee5ce Mon Sep 17 00:00:00 2001 From: Murderlon Date: Tue, 7 Sep 2021 15:47:52 +0200 Subject: [PATCH 04/12] Abstract `calculateProcessingProgress` and resolve all eslint warnings in `StatusBar.js` --- packages/@uppy/status-bar/src/StatusBar.js | 128 ++++++++++-------- .../src/calculateProcessingProgress.js | 30 ++++ 2 files changed, 103 insertions(+), 55 deletions(-) create mode 100644 packages/@uppy/status-bar/src/calculateProcessingProgress.js diff --git a/packages/@uppy/status-bar/src/StatusBar.js b/packages/@uppy/status-bar/src/StatusBar.js index 78a4daa0ec..a53e6f33dc 100644 --- a/packages/@uppy/status-bar/src/StatusBar.js +++ b/packages/@uppy/status-bar/src/StatusBar.js @@ -1,6 +1,7 @@ const { h } = require('preact') const classNames = require('classnames') const statusBarStates = require('./StatusBarStates') +const calculateProcessingProgress = require('./calculateProcessingProgress') const { UploadBtn, @@ -14,39 +15,9 @@ const { ProgressBarComplete, } = require('./Components') -function calculateProcessingProgress (files) { - // Collect pre or postprocessing progress states. - const progresses = [] - Object.keys(files).forEach((fileID) => { - const { progress } = files[fileID] - if (progress.preprocess) { - progresses.push(progress.preprocess) - } - if (progress.postprocess) { - progresses.push(progress.postprocess) - } - }) - - // In the future we should probably do this differently. For now we'll take the - // mode and message from the first file… - const { mode, message } = progresses[0] - const value = progresses.filter(isDeterminate).reduce((total, progress, index, all) => { - return total + progress.value / all.length - }, 0) - function isDeterminate (progress) { - return progress.mode === 'determinate' - } - - return { - mode, - message, - value, - } -} - -module.exports = (props) => { - props = props || {} +module.exports = StatusBar +function StatusBar (props) { const { newFiles, allowNewUpload, @@ -59,16 +30,30 @@ module.exports = (props) => { hideCancelButton, hideRetryButton, recoveredState, + uploadState, + totalProgress, + files, + supportsUploadProgress, + hideAfterFinish, + isSomeGhost, + isTargetDOMEl, + doneButtonHandler, + isUploadStarted, + i18n, + startUpload, + uppy, + isAllComplete, } = props - const { uploadState } = props - - let progressValue = props.totalProgress + let progressValue = totalProgress let progressMode let progressBarContent - if (uploadState === statusBarStates.STATE_PREPROCESSING || uploadState === statusBarStates.STATE_POSTPROCESSING) { - const progress = calculateProcessingProgress(props.files) + if ( + uploadState === statusBarStates.STATE_PREPROCESSING + || uploadState === statusBarStates.STATE_POSTPROCESSING + ) { + const progress = calculateProcessingProgress(files) progressMode = progress.mode if (progressMode === 'determinate') { progressValue = progress.value * 100 @@ -78,7 +63,7 @@ module.exports = (props) => { } else if (uploadState === statusBarStates.STATE_COMPLETE) { progressBarContent = ProgressBarComplete(props) } else if (uploadState === statusBarStates.STATE_UPLOADING) { - if (!props.supportsUploadProgress) { + if (!supportsUploadProgress) { progressMode = 'indeterminate' progressValue = null } @@ -90,37 +75,46 @@ module.exports = (props) => { } const width = typeof progressValue === 'number' ? progressValue : 100 - let isHidden = (uploadState === statusBarStates.STATE_WAITING && props.hideUploadButton) - || (uploadState === statusBarStates.STATE_WAITING && !props.newFiles > 0) - || (uploadState === statusBarStates.STATE_COMPLETE && props.hideAfterFinish) - - let showUploadBtn = !error && newFiles - && !isUploadInProgress && !isAllPaused - && allowNewUpload && !hideUploadButton + let isHidden + = (uploadState === statusBarStates.STATE_WAITING && hideUploadButton) + || (uploadState === statusBarStates.STATE_WAITING && !newFiles > 0) + || (uploadState === statusBarStates.STATE_COMPLETE && hideAfterFinish) + + let showUploadBtn + = !error + && newFiles + && !isUploadInProgress + && !isAllPaused + && allowNewUpload + && !hideUploadButton if (recoveredState) { isHidden = false showUploadBtn = true } - const showCancelBtn = !hideCancelButton + const showCancelBtn + = !hideCancelButton && uploadState !== statusBarStates.STATE_WAITING && uploadState !== statusBarStates.STATE_COMPLETE - const showPauseResumeBtn = resumableUploads && !hidePauseResumeButton + const showPauseResumeBtn + = resumableUploads + && !hidePauseResumeButton && uploadState === statusBarStates.STATE_UPLOADING const showRetryBtn = error && !hideRetryButton - const showDoneBtn = props.doneButtonHandler && uploadState === statusBarStates.STATE_COMPLETE + const showDoneBtn + = doneButtonHandler && uploadState === statusBarStates.STATE_COMPLETE const progressClassNames = `uppy-StatusBar-progress ${progressMode ? `is-${progressMode}` : ''}` const statusBarClassNames = classNames( - { 'uppy-Root': props.isTargetDOMEl }, + { 'uppy-Root': isTargetDOMEl }, 'uppy-StatusBar', `is-${uploadState}`, - { 'has-ghosts': props.isSomeGhost } + { 'has-ghosts': isSomeGhost } ) return ( @@ -135,13 +129,37 @@ module.exports = (props) => { aria-valuemax="100" aria-valuenow={progressValue} /> + {progressBarContent} +
- {showUploadBtn ? : null} - {showRetryBtn ? : null} - {showPauseResumeBtn ? : null} - {showCancelBtn ? : null} - {showDoneBtn ? : null} + {showUploadBtn ? ( + + ) : null} + + {showRetryBtn ? : null} + + {showPauseResumeBtn ? ( + + ) : null} + + {showCancelBtn ? : null} + + {showDoneBtn ? : null}
) diff --git a/packages/@uppy/status-bar/src/calculateProcessingProgress.js b/packages/@uppy/status-bar/src/calculateProcessingProgress.js new file mode 100644 index 0000000000..28a323d737 --- /dev/null +++ b/packages/@uppy/status-bar/src/calculateProcessingProgress.js @@ -0,0 +1,30 @@ +module.expost = function calculateProcessingProgress (files) { + // Collect pre or postprocessing progress states. + const progresses = [] + + Object.keys(files).forEach((fileID) => { + const { progress } = files[fileID] + if (progress.preprocess) { + progresses.push(progress.preprocess) + } + if (progress.postprocess) { + progresses.push(progress.postprocess) + } + }) + + // In the future we should probably do this differently. For now we'll take the + // mode and message from the first file… + const { mode, message } = progresses[0] + const value = progresses.filter(isDeterminate).reduce((total, progress, index, all) => { + return total + progress.value / all.length + }, 0) + function isDeterminate (progress) { + return progress.mode === 'determinate' + } + + return { + mode, + message, + value, + } +} From c65a15f39e8743442320aa08d1e0172749d896c3 Mon Sep 17 00:00:00 2001 From: Murderlon Date: Tue, 7 Sep 2021 16:35:39 +0200 Subject: [PATCH 05/12] Render progress bar with a switch statement --- packages/@uppy/status-bar/src/Components.js | 8 +- packages/@uppy/status-bar/src/StatusBar.js | 82 +++++++++++++++------ 2 files changed, 67 insertions(+), 23 deletions(-) diff --git a/packages/@uppy/status-bar/src/Components.js b/packages/@uppy/status-bar/src/Components.js index 14953e3f26..10b6bdbe94 100644 --- a/packages/@uppy/status-bar/src/Components.js +++ b/packages/@uppy/status-bar/src/Components.js @@ -370,7 +370,9 @@ function ProgressBarUploading (props) { ) } -function ProgressBarComplete ({ i18n }) { +function ProgressBarComplete (props) { + const { i18n } = props + return (
0) - || (uploadState === statusBarStates.STATE_COMPLETE && hideAfterFinish) + = (uploadState === STATE_WAITING && hideUploadButton) + || (uploadState === STATE_WAITING && !newFiles > 0) + || (uploadState === STATE_COMPLETE && hideAfterFinish) let showUploadBtn = !error @@ -95,17 +102,17 @@ function StatusBar (props) { const showCancelBtn = !hideCancelButton - && uploadState !== statusBarStates.STATE_WAITING - && uploadState !== statusBarStates.STATE_COMPLETE + && uploadState !== STATE_WAITING + && uploadState !== STATE_COMPLETE const showPauseResumeBtn = resumableUploads && !hidePauseResumeButton - && uploadState === statusBarStates.STATE_UPLOADING + && uploadState === STATE_UPLOADING const showRetryBtn = error && !hideRetryButton const showDoneBtn - = doneButtonHandler && uploadState === statusBarStates.STATE_COMPLETE + = doneButtonHandler && uploadState === STATE_COMPLETE const progressClassNames = `uppy-StatusBar-progress ${progressMode ? `is-${progressMode}` : ''}` @@ -130,7 +137,38 @@ function StatusBar (props) { aria-valuenow={progressValue} /> - {progressBarContent} + {(() => { + switch (uploadState) { + case STATE_PREPROCESSING: + case STATE_POSTPROCESSING: + return + case STATE_COMPLETE: + return + case STATE_ERROR: + return + case STATE_UPLOADING: + return ( + + ) + default: + return null + } + })()}
{showUploadBtn ? ( @@ -159,7 +197,9 @@ function StatusBar (props) { {showCancelBtn ? : null} - {showDoneBtn ? : null} + {showDoneBtn ? ( + + ) : null}
) From 866c0e324fc56d163b9b09779cec4ec97d161d78 Mon Sep 17 00:00:00 2001 From: Murderlon Date: Tue, 7 Sep 2021 17:23:39 +0200 Subject: [PATCH 06/12] Create `getProgressValue`, `getIsIndeterminate`, `getIsHidden` --- packages/@uppy/status-bar/src/StatusBar.js | 114 +++++++++++++++------ 1 file changed, 80 insertions(+), 34 deletions(-) diff --git a/packages/@uppy/status-bar/src/StatusBar.js b/packages/@uppy/status-bar/src/StatusBar.js index c1bf8a1166..55c7df91e3 100644 --- a/packages/@uppy/status-bar/src/StatusBar.js +++ b/packages/@uppy/status-bar/src/StatusBar.js @@ -60,34 +60,80 @@ function StatusBar (props) { totalUploadedSize, } = props - let progressValue = totalProgress - let progressMode - - if ( - uploadState === STATE_PREPROCESSING - || uploadState === STATE_POSTPROCESSING - ) { - const progress = calculateProcessingProgress(files) - progressMode = progress.mode - if (progressMode === 'determinate') { - progressValue = progress.value * 100 + function getProgressValue () { + switch (uploadState) { + case STATE_POSTPROCESSING: + case STATE_PREPROCESSING: { + const progress = calculateProcessingProgress(files) + + if (progress.mode === 'determinate') { + return progress.value * 100 + } + return totalProgress + } + case STATE_ERROR: { + return null + } + case STATE_UPLOADING: { + if (!supportsUploadProgress) { + return null + } + return totalProgress + } + default: + return totalProgress } - } else if (uploadState === STATE_UPLOADING) { - if (!supportsUploadProgress) { - progressMode = 'indeterminate' - progressValue = null + } + + function getIsIndeterminate () { + switch (uploadState) { + case STATE_POSTPROCESSING: + case STATE_PREPROCESSING: { + const { mode } = calculateProcessingProgress(files) + return mode === 'indeterminate' + } + case STATE_UPLOADING: { + if (!supportsUploadProgress) { + return true + } + return false + } + default: + return false } - } else if (uploadState === STATE_ERROR) { - progressValue = undefined } - const width = typeof progressValue === 'number' ? progressValue : 100 - let isHidden - = (uploadState === STATE_WAITING && hideUploadButton) - || (uploadState === STATE_WAITING && !newFiles > 0) - || (uploadState === STATE_COMPLETE && hideAfterFinish) + function getIsHidden () { + if (recoveredState) { + return false + } - let showUploadBtn + switch (uploadState) { + case STATE_WAITING: + if (hideUploadButton) { + return true + } + if (!newFiles > 0) { + return true + } + return false + case STATE_COMPLETE: + if (hideAfterFinish) { + return true + } + return false + default: + return false + } + } + + const progressValue = getProgressValue() + + const isHidden = getIsHidden() + + const width = progressValue || 100 + + const showUploadBtn = !error && newFiles && !isUploadInProgress @@ -95,15 +141,11 @@ function StatusBar (props) { && allowNewUpload && !hideUploadButton - if (recoveredState) { - isHidden = false - showUploadBtn = true - } - const showCancelBtn = !hideCancelButton && uploadState !== STATE_WAITING && uploadState !== STATE_COMPLETE + const showPauseResumeBtn = resumableUploads && !hidePauseResumeButton @@ -111,11 +153,11 @@ function StatusBar (props) { const showRetryBtn = error && !hideRetryButton - const showDoneBtn - = doneButtonHandler && uploadState === STATE_COMPLETE + const showDoneBtn = doneButtonHandler && uploadState === STATE_COMPLETE - const progressClassNames = `uppy-StatusBar-progress - ${progressMode ? `is-${progressMode}` : ''}` + const progressClassNames = classNames('uppy-StatusBar-progress', { + 'is-indeterminate': getIsIndeterminate(), + }) const statusBarClassNames = classNames( { 'uppy-Root': isTargetDOMEl }, @@ -141,7 +183,11 @@ function StatusBar (props) { switch (uploadState) { case STATE_PREPROCESSING: case STATE_POSTPROCESSING: - return + return ( + + ) case STATE_COMPLETE: return case STATE_ERROR: @@ -171,7 +217,7 @@ function StatusBar (props) { })()}
- {showUploadBtn ? ( + {(recoveredState || showUploadBtn) ? ( Date: Tue, 7 Sep 2021 17:33:10 +0200 Subject: [PATCH 07/12] Resolve eslint warnings in `index.js` --- packages/@uppy/status-bar/src/index.js | 144 +++++++++++++------------ 1 file changed, 78 insertions(+), 66 deletions(-) diff --git a/packages/@uppy/status-bar/src/index.js b/packages/@uppy/status-bar/src/index.js index cf1460d372..30ca006ec5 100644 --- a/packages/@uppy/status-bar/src/index.js +++ b/packages/@uppy/status-bar/src/index.js @@ -10,7 +10,8 @@ const StatusBarUI = require('./StatusBar') * progress percentage and time remaining. */ module.exports = class StatusBar extends UIPlugin { - static VERSION = require('../package.json').version + // eslint-disable-next-line global-require + static VERSION = require('../package.json').version; constructor (uppy, opts) { super(uppy, opts) @@ -72,74 +73,18 @@ module.exports = class StatusBar extends UIPlugin { this.install = this.install.bind(this) } - getTotalSpeed (files) { - let totalSpeed = 0 - files.forEach((file) => { - totalSpeed += getSpeed(file.progress) - }) - return totalSpeed - } - - getTotalETA (files) { - const totalSpeed = this.getTotalSpeed(files) - if (totalSpeed === 0) { - return 0 - } - - const totalBytesRemaining = files.reduce((total, file) => { - return total + getBytesRemaining(file.progress) - }, 0) - - return Math.round(totalBytesRemaining / totalSpeed * 10) / 10 - } - startUpload = () => { const { recoveredState } = this.uppy.getState() + if (recoveredState) { this.uppy.emit('restore-confirmed') - return + return undefined } + return this.uppy.upload().catch(() => { // Error logged in Core }) - } - - getUploadingState (isAllErrored, isAllComplete, recoveredState, files) { - if (isAllErrored) { - return statusBarStates.STATE_ERROR - } - - if (isAllComplete) { - return statusBarStates.STATE_COMPLETE - } - - if (recoveredState) { - return statusBarStates.STATE_WAITING - } - - let state = statusBarStates.STATE_WAITING - const fileIDs = Object.keys(files) - for (let i = 0; i < fileIDs.length; i++) { - const { progress } = files[fileIDs[i]] - // If ANY files are being uploaded right now, show the uploading state. - if (progress.uploadStarted && !progress.uploadComplete) { - return statusBarStates.STATE_UPLOADING - } - // If files are being preprocessed AND postprocessed at this time, we show the - // preprocess state. If any files are being uploaded we show uploading. - if (progress.preprocess && state !== statusBarStates.STATE_UPLOADING) { - state = statusBarStates.STATE_PREPROCESSING - } - // If NO files are being preprocessed or uploaded right now, but some files are - // being postprocessed, show the postprocess state. - if (progress.postprocess - && state !== statusBarStates.STATE_UPLOADING - && state !== statusBarStates.STATE_PREPROCESSING) { - state = statusBarStates.STATE_POSTPROCESSING - } - } - return state - } + }; render (state) { const { @@ -168,8 +113,10 @@ module.exports = class StatusBar extends UIPlugin { // If some state was recovered, we want to show Upload button/counter // for all the files, because in this case it’s not an Upload button, // but “Confirm Restore Button” - const newFilesOrRecovered = recoveredState ? Object.values(files) : newFiles - const totalETA = this.getTotalETA(inProgressNotPausedFiles) + const newFilesOrRecovered = recoveredState + ? Object.values(files) + : newFiles + const totalETA = getTotalETA(inProgressNotPausedFiles) const resumableUploads = !!capabilities.resumableUploads const supportsUploadProgress = capabilities.uploadProgress !== false @@ -177,13 +124,18 @@ module.exports = class StatusBar extends UIPlugin { let totalUploadedSize = 0 startedFiles.forEach((file) => { - totalSize += (file.progress.bytesTotal || 0) - totalUploadedSize += (file.progress.bytesUploaded || 0) + totalSize += file.progress.bytesTotal || 0 + totalUploadedSize += file.progress.bytesUploaded || 0 }) return StatusBarUI({ error, - uploadState: this.getUploadingState(isAllErrored, isAllComplete, recoveredState, state.files || {}), + uploadState: getUploadingState( + isAllErrored, + isAllComplete, + recoveredState, + state.files || {} + ), allowNewUpload, totalProgress, totalSize, @@ -236,3 +188,63 @@ module.exports = class StatusBar extends UIPlugin { this.unmount() } } + +function getTotalSpeed (files) { + let totalSpeed = 0 + files.forEach((file) => { + totalSpeed += getSpeed(file.progress) + }) + return totalSpeed +} + +function getTotalETA (files) { + const totalSpeed = getTotalSpeed(files) + if (totalSpeed === 0) { + return 0 + } + + const totalBytesRemaining = files.reduce((total, file) => { + return total + getBytesRemaining(file.progress) + }, 0) + + return Math.round((totalBytesRemaining / totalSpeed) * 10) / 10 +} + +function getUploadingState (isAllErrored, isAllComplete, recoveredState, files) { + if (isAllErrored) { + return statusBarStates.STATE_ERROR + } + + if (isAllComplete) { + return statusBarStates.STATE_COMPLETE + } + + if (recoveredState) { + return statusBarStates.STATE_WAITING + } + + let state = statusBarStates.STATE_WAITING + const fileIDs = Object.keys(files) + for (let i = 0; i < fileIDs.length; i++) { + const { progress } = files[fileIDs[i]] + // If ANY files are being uploaded right now, show the uploading state. + if (progress.uploadStarted && !progress.uploadComplete) { + return statusBarStates.STATE_UPLOADING + } + // If files are being preprocessed AND postprocessed at this time, we show the + // preprocess state. If any files are being uploaded we show uploading. + if (progress.preprocess && state !== statusBarStates.STATE_UPLOADING) { + state = statusBarStates.STATE_PREPROCESSING + } + // If NO files are being preprocessed or uploaded right now, but some files are + // being postprocessed, show the postprocess state. + if ( + progress.postprocess + && state !== statusBarStates.STATE_UPLOADING + && state !== statusBarStates.STATE_PREPROCESSING + ) { + state = statusBarStates.STATE_POSTPROCESSING + } + } + return state +} From 4ef070f580bee4e71cb3a39b11f1732b3354b5a0 Mon Sep 17 00:00:00 2001 From: Murderlon Date: Tue, 7 Sep 2021 17:46:36 +0200 Subject: [PATCH 08/12] Show all details on mobile when `showProgressDetails` is `true` --- packages/@uppy/dashboard/src/style.scss | 5 ----- packages/@uppy/status-bar/src/style.scss | 6 +----- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/@uppy/dashboard/src/style.scss b/packages/@uppy/dashboard/src/style.scss index c2d62b197a..c6466a36e8 100644 --- a/packages/@uppy/dashboard/src/style.scss +++ b/packages/@uppy/dashboard/src/style.scss @@ -705,11 +705,6 @@ height: 100%; } -// Do not show progress details in the StatusBar if we do not have space. -.uppy-Dashboard:not(.uppy-size--md) .uppy-StatusBar-additionalInfo { - display: none; -} - .uppy-Dashboard-filesContainer { @include clearfix; diff --git a/packages/@uppy/status-bar/src/style.scss b/packages/@uppy/status-bar/src/style.scss index ece3152fb2..eea2c756e8 100644 --- a/packages/@uppy/status-bar/src/style.scss +++ b/packages/@uppy/status-bar/src/style.scss @@ -6,7 +6,7 @@ position: relative; z-index: $zIndex-2; display: flex; - height: 40px; + height: 46px; color: $white; font-weight: 400; font-size: 12px; @@ -14,10 +14,6 @@ background-color: $white; transition: height 0.2s; - .uppy-size--md & { - height: 46px; - } - [data-uppy-theme="dark"] & { background-color: $gray-900; } From 5569446e7b85360d21bbacc1d75fa053c1a4918b Mon Sep 17 00:00:00 2001 From: Murderlon Date: Tue, 7 Sep 2021 17:57:51 +0200 Subject: [PATCH 09/12] Remove item from `BACKLOG.md` --- BACKLOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/BACKLOG.md b/BACKLOG.md index e73cf9a67c..7387eba168 100644 --- a/BACKLOG.md +++ b/BACKLOG.md @@ -50,7 +50,6 @@ PRs are welcome! Please do open an issue to discuss first if it's a big feature, - [ ] Display data like image resolution on file cards. should be done by thumbnail generator maybe #783 - [ ] Possibility to edit/delete more than one file at once. example: add copyrigh info to 1000 files #118, #97 - [ ] Possibility to work on already uploaded / in progress files. We'll just provide the `fileId` to the `file-edit-complete` event so that folks can more easily roll out custom code for this themselves #112, #113, #2063 -- [ ] Show upload speed too if `showProgressDetails: true`. Maybe have separate options for which things are displayed, or at least have css-classes that can be hidden with `display: none` #766 - [ ] Focus jumps weirdly if you remove a file https://github.com/transloadit/uppy/pull/2161#issuecomment-613565486 - [ ] A mini UI that features drop & progress (may involve a `mini: true` options for dashboard, may involve drop+progress or new plugin) (@arturi) - [ ] Add a Load More button so you don't have to TAB endlessly to get to the upload button (https://github.com/transloadit/uppy/issues/1419) From de823a65871eeb17719b6c65b48c55a700a767f2 Mon Sep 17 00:00:00 2001 From: Merlijn Vos Date: Wed, 15 Sep 2021 11:07:13 +0200 Subject: [PATCH 10/12] Apply suggestions from code review Co-authored-by: Antoine du Hamel --- packages/@uppy/status-bar/src/Components.js | 25 +++----------- packages/@uppy/status-bar/src/StatusBar.js | 15 ++------ .../src/calculateProcessingProgress.js | 34 +++++++------------ 3 files changed, 21 insertions(+), 53 deletions(-) diff --git a/packages/@uppy/status-bar/src/Components.js b/packages/@uppy/status-bar/src/Components.js index 10b6bdbe94..1d1cb9b036 100644 --- a/packages/@uppy/status-bar/src/Components.js +++ b/packages/@uppy/status-bar/src/Components.js @@ -6,7 +6,8 @@ const { h } = require('preact') const statusBarStates = require('./StatusBarStates') -const renderDot = () => ' \u00B7 ' +const DOT = `\u00B7` +const renderDot = () => ` ${DOT} ` module.exports = { UploadBtn, @@ -148,22 +149,7 @@ function PauseResumeButton (props) { onClick={togglePauseResume} data-uppy-super-focusable > - {isAllPaused ? ( - - ) : ( - - )} + ) } diff --git a/packages/@uppy/status-bar/src/StatusBar.js b/packages/@uppy/status-bar/src/StatusBar.js index 55c7df91e3..8f8a4d3844 100644 --- a/packages/@uppy/status-bar/src/StatusBar.js +++ b/packages/@uppy/status-bar/src/StatusBar.js @@ -110,18 +110,9 @@ function StatusBar (props) { switch (uploadState) { case STATE_WAITING: - if (hideUploadButton) { - return true - } - if (!newFiles > 0) { - return true - } - return false + return hideUploadButton || newFiles > 0 case STATE_COMPLETE: - if (hideAfterFinish) { - return true - } - return false + return hideAfterFinish default: return false } @@ -131,7 +122,7 @@ function StatusBar (props) { const isHidden = getIsHidden() - const width = progressValue || 100 + const width = progressValue ?? 100 const showUploadBtn = !error diff --git a/packages/@uppy/status-bar/src/calculateProcessingProgress.js b/packages/@uppy/status-bar/src/calculateProcessingProgress.js index 28a323d737..b0ae1bc035 100644 --- a/packages/@uppy/status-bar/src/calculateProcessingProgress.js +++ b/packages/@uppy/status-bar/src/calculateProcessingProgress.js @@ -1,27 +1,19 @@ module.expost = function calculateProcessingProgress (files) { - // Collect pre or postprocessing progress states. - const progresses = [] - - Object.keys(files).forEach((fileID) => { - const { progress } = files[fileID] - if (progress.preprocess) { - progresses.push(progress.preprocess) + let values = [] + let mode, message + for (const { progress } of Object.values(files)) { + const { preprocess, postprocess } = progress + // In the future we should probably do this differently. For now we'll take the + // mode and message from the first file… + if (message == null && (preprocess || postprocess)) { + ({ mode, message } = preprocess || postprocess) } - if (progress.postprocess) { - progresses.push(progress.postprocess) - } - }) - - // In the future we should probably do this differently. For now we'll take the - // mode and message from the first file… - const { mode, message } = progresses[0] - const value = progresses.filter(isDeterminate).reduce((total, progress, index, all) => { - return total + progress.value / all.length - }, 0) - function isDeterminate (progress) { - return progress.mode === 'determinate' + if (preprocess?.mode === "determinate") values.push(preprocess.value) + if (postprocess?.mode === "determinate") values.push(postprocess.value) } - + const value = progresses.reduce((total, progress) => { + return total + progress.value / values.length + }, 0) return { mode, message, From e3e5620e67c51a76fce682624b0736e63dc07348 Mon Sep 17 00:00:00 2001 From: Murderlon Date: Wed, 15 Sep 2021 11:30:47 +0200 Subject: [PATCH 11/12] Revert "Apply suggestions from code review" This reverts commit de823a65871eeb17719b6c65b48c55a700a767f2. --- packages/@uppy/status-bar/src/Components.js | 25 +++++++++++--- packages/@uppy/status-bar/src/StatusBar.js | 15 ++++++-- .../src/calculateProcessingProgress.js | 34 ++++++++++++------- 3 files changed, 53 insertions(+), 21 deletions(-) diff --git a/packages/@uppy/status-bar/src/Components.js b/packages/@uppy/status-bar/src/Components.js index 1d1cb9b036..10b6bdbe94 100644 --- a/packages/@uppy/status-bar/src/Components.js +++ b/packages/@uppy/status-bar/src/Components.js @@ -6,8 +6,7 @@ const { h } = require('preact') const statusBarStates = require('./StatusBarStates') -const DOT = `\u00B7` -const renderDot = () => ` ${DOT} ` +const renderDot = () => ' \u00B7 ' module.exports = { UploadBtn, @@ -149,7 +148,8 @@ function PauseResumeButton (props) { onClick={togglePauseResume} data-uppy-super-focusable > - + + ) : ( + + )} ) } diff --git a/packages/@uppy/status-bar/src/StatusBar.js b/packages/@uppy/status-bar/src/StatusBar.js index 8f8a4d3844..55c7df91e3 100644 --- a/packages/@uppy/status-bar/src/StatusBar.js +++ b/packages/@uppy/status-bar/src/StatusBar.js @@ -110,9 +110,18 @@ function StatusBar (props) { switch (uploadState) { case STATE_WAITING: - return hideUploadButton || newFiles > 0 + if (hideUploadButton) { + return true + } + if (!newFiles > 0) { + return true + } + return false case STATE_COMPLETE: - return hideAfterFinish + if (hideAfterFinish) { + return true + } + return false default: return false } @@ -122,7 +131,7 @@ function StatusBar (props) { const isHidden = getIsHidden() - const width = progressValue ?? 100 + const width = progressValue || 100 const showUploadBtn = !error diff --git a/packages/@uppy/status-bar/src/calculateProcessingProgress.js b/packages/@uppy/status-bar/src/calculateProcessingProgress.js index b0ae1bc035..28a323d737 100644 --- a/packages/@uppy/status-bar/src/calculateProcessingProgress.js +++ b/packages/@uppy/status-bar/src/calculateProcessingProgress.js @@ -1,19 +1,27 @@ module.expost = function calculateProcessingProgress (files) { - let values = [] - let mode, message - for (const { progress } of Object.values(files)) { - const { preprocess, postprocess } = progress - // In the future we should probably do this differently. For now we'll take the - // mode and message from the first file… - if (message == null && (preprocess || postprocess)) { - ({ mode, message } = preprocess || postprocess) + // Collect pre or postprocessing progress states. + const progresses = [] + + Object.keys(files).forEach((fileID) => { + const { progress } = files[fileID] + if (progress.preprocess) { + progresses.push(progress.preprocess) } - if (preprocess?.mode === "determinate") values.push(preprocess.value) - if (postprocess?.mode === "determinate") values.push(postprocess.value) - } - const value = progresses.reduce((total, progress) => { - return total + progress.value / values.length + if (progress.postprocess) { + progresses.push(progress.postprocess) + } + }) + + // In the future we should probably do this differently. For now we'll take the + // mode and message from the first file… + const { mode, message } = progresses[0] + const value = progresses.filter(isDeterminate).reduce((total, progress, index, all) => { + return total + progress.value / all.length }, 0) + function isDeterminate (progress) { + return progress.mode === 'determinate' + } + return { mode, message, From 340748d78ac6c3283722c4a666782f72169ac819 Mon Sep 17 00:00:00 2001 From: Murderlon Date: Wed, 15 Sep 2021 11:41:17 +0200 Subject: [PATCH 12/12] Manually apply code suggestions --- packages/@uppy/status-bar/src/Components.js | 97 ++++++++++--------- packages/@uppy/status-bar/src/StatusBar.js | 15 +-- .../src/calculateProcessingProgress.js | 34 +++---- 3 files changed, 68 insertions(+), 78 deletions(-) diff --git a/packages/@uppy/status-bar/src/Components.js b/packages/@uppy/status-bar/src/Components.js index 10b6bdbe94..24b8902be5 100644 --- a/packages/@uppy/status-bar/src/Components.js +++ b/packages/@uppy/status-bar/src/Components.js @@ -6,21 +6,8 @@ const { h } = require('preact') const statusBarStates = require('./StatusBarStates') -const renderDot = () => ' \u00B7 ' - -module.exports = { - UploadBtn, - RetryBtn, - CancelBtn, - PauseResumeButton, - DoneBtn, - LoadingSpinner, - ProgressDetails, - ProgressBarProcessing, - ProgressBarError, - ProgressBarUploading, - ProgressBarComplete, -} +const DOT = `\u00B7` +const renderDot = () => ` ${DOT} ` function UploadBtn (props) { const { @@ -148,35 +135,26 @@ function PauseResumeButton (props) { onClick={togglePauseResume} data-uppy-super-focusable > - {isAllPaused ? ( - - ) : ( - - )} + ) } @@ -216,11 +194,12 @@ function LoadingSpinner () { function ProgressBarProcessing (props) { const { value, mode, message } = props const roundedValue = Math.round(value * 100) + const dot = `\u00B7` return (
- {mode === 'determinate' ? `${roundedValue}% \u00B7 ` : ''} + {mode === 'determinate' ? `${roundedValue}% ${dot} ` : ''} {message}
) @@ -347,7 +326,13 @@ function ProgressBarUploading (props) { /> ) } - return + return ( + + ) } return null } @@ -363,7 +348,11 @@ function ProgressBarUploading (props) { {renderProgressDetails()} {showUploadNewlyAddedFiles ? ( - + ) : null}
@@ -441,3 +430,17 @@ function ProgressBarError (props) { ) } + +module.exports = { + UploadBtn, + RetryBtn, + CancelBtn, + PauseResumeButton, + DoneBtn, + LoadingSpinner, + ProgressDetails, + ProgressBarProcessing, + ProgressBarError, + ProgressBarUploading, + ProgressBarComplete, +} diff --git a/packages/@uppy/status-bar/src/StatusBar.js b/packages/@uppy/status-bar/src/StatusBar.js index 55c7df91e3..bbd412d4bc 100644 --- a/packages/@uppy/status-bar/src/StatusBar.js +++ b/packages/@uppy/status-bar/src/StatusBar.js @@ -110,18 +110,9 @@ function StatusBar (props) { switch (uploadState) { case STATE_WAITING: - if (hideUploadButton) { - return true - } - if (!newFiles > 0) { - return true - } - return false + return hideUploadButton || newFiles === 0 case STATE_COMPLETE: - if (hideAfterFinish) { - return true - } - return false + return hideAfterFinish default: return false } @@ -131,7 +122,7 @@ function StatusBar (props) { const isHidden = getIsHidden() - const width = progressValue || 100 + const width = progressValue ?? 100 const showUploadBtn = !error diff --git a/packages/@uppy/status-bar/src/calculateProcessingProgress.js b/packages/@uppy/status-bar/src/calculateProcessingProgress.js index 28a323d737..2864022fbf 100644 --- a/packages/@uppy/status-bar/src/calculateProcessingProgress.js +++ b/packages/@uppy/status-bar/src/calculateProcessingProgress.js @@ -1,26 +1,22 @@ -module.expost = function calculateProcessingProgress (files) { - // Collect pre or postprocessing progress states. - const progresses = [] +module.export = function calculateProcessingProgress (files) { + const values = [] + let mode + let message - Object.keys(files).forEach((fileID) => { - const { progress } = files[fileID] - if (progress.preprocess) { - progresses.push(progress.preprocess) + for (const { progress } of Object.values(files)) { + const { preprocess, postprocess } = progress + // In the future we should probably do this differently. For now we'll take the + // mode and message from the first file… + if (message == null && (preprocess || postprocess)) { + ({ mode, message } = preprocess || postprocess) } - if (progress.postprocess) { - progresses.push(progress.postprocess) - } - }) + if (preprocess?.mode === 'determinate') values.push(preprocess.value) + if (postprocess?.mode === 'determinate') values.push(postprocess.value) + } - // In the future we should probably do this differently. For now we'll take the - // mode and message from the first file… - const { mode, message } = progresses[0] - const value = progresses.filter(isDeterminate).reduce((total, progress, index, all) => { - return total + progress.value / all.length + const value = values.reduce((total, progressValue) => { + return total + progressValue / values.length }, 0) - function isDeterminate (progress) { - return progress.mode === 'determinate' - } return { mode,