diff --git a/packages/@uppy/status-bar/src/StatusBarUI.jsx b/packages/@uppy/status-bar/src/StatusBarUI.jsx index a24924d492a..67f19b7789c 100644 --- a/packages/@uppy/status-bar/src/StatusBarUI.jsx +++ b/packages/@uppy/status-bar/src/StatusBarUI.jsx @@ -122,12 +122,11 @@ export default function StatusBar (props) { const width = progressValue ?? 100 - const showUploadBtn = !error - && newFiles - && !isUploadInProgress - && !isAllPaused - && allowNewUpload - && !hideUploadButton + const showUploadBtn = !hideUploadButton + && ( + (!error && newFiles && !isUploadInProgress && !isAllPaused && allowNewUpload) + || recoveredState + ) const showCancelBtn = !hideCancelButton && uploadState !== STATE_WAITING @@ -141,6 +140,14 @@ export default function StatusBar (props) { const showDoneBtn = doneButtonHandler && uploadState === STATE_COMPLETE + const hasActions = ( + showUploadBtn + || showCancelBtn + || showPauseResumeBtn + || showRetryBtn + || showDoneBtn + ) + const progressClassNames = classNames('uppy-StatusBar-progress', { 'is-indeterminate': getIsIndeterminate(), }) @@ -204,37 +211,39 @@ export default function StatusBar (props) { } })()} -
- {recoveredState || showUploadBtn ? ( - - ) : null} - - {showRetryBtn ? : null} - - {showPauseResumeBtn ? ( - - ) : null} - - {showCancelBtn ? : null} - - {showDoneBtn ? ( - - ) : null} -
+ {hasActions ? ( +
+ {showUploadBtn ? ( + + ) : null} + + {showRetryBtn ? : null} + + {showPauseResumeBtn ? ( + + ) : null} + + {showCancelBtn ? : null} + + {showDoneBtn ? ( + + ) : null} +
+ ) : null} ) }