Browse Source

Add option to hide ProgressBar after upload finish

Artur Boryś 7 years ago
parent
commit
3d3fd13f16
2 changed files with 9 additions and 3 deletions
  1. 4 3
      src/plugins/ProgressBar.js
  2. 5 0
      src/scss/_progressbar.scss

+ 4 - 3
src/plugins/ProgressBar.js

@@ -16,7 +16,8 @@ module.exports = class ProgressBar extends Plugin {
     const defaultOptions = {
       target: 'body',
       replaceTargetContent: false,
-      fixed: false
+      fixed: false,
+      hideAfterFinish: true
     }
 
     // merge default options with the ones set by user
@@ -27,8 +28,8 @@ module.exports = class ProgressBar extends Plugin {
 
   render (state) {
     const progress = state.totalProgress || 0
-
-    return <div class="uppy uppy-ProgressBar" style={{ position: this.opts.fixed ? 'fixed' : 'initial' }}>
+    const isHidden = progress === 100 && this.opts.hideAfterFinish
+    return <div class="uppy uppy-ProgressBar" style={{ position: this.opts.fixed ? 'fixed' : 'initial' }} aria-hidden={isHidden}>
       <div class="uppy-ProgressBar-inner" style={{ width: progress + '%' }} />
       <div class="uppy-ProgressBar-percentage">{progress}</div>
     </div>

+ 5 - 0
src/scss/_progressbar.scss

@@ -10,6 +10,11 @@
   width: 100%;
   height: 3px;
   z-index: 10000;
+  transition: height .2s;
+}
+
+.uppy-ProgressBar[aria-hidden=true] {
+  height: 0;
 }
 
 .uppy-ProgressBar-inner {