浏览代码

Add option to hide ProgressBar after upload finish

Artur Boryś 7 年之前
父节点
当前提交
3d3fd13f16
共有 2 个文件被更改,包括 9 次插入3 次删除
  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 = {
     const defaultOptions = {
       target: 'body',
       target: 'body',
       replaceTargetContent: false,
       replaceTargetContent: false,
-      fixed: false
+      fixed: false,
+      hideAfterFinish: true
     }
     }
 
 
     // merge default options with the ones set by user
     // merge default options with the ones set by user
@@ -27,8 +28,8 @@ module.exports = class ProgressBar extends Plugin {
 
 
   render (state) {
   render (state) {
     const progress = state.totalProgress || 0
     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-inner" style={{ width: progress + '%' }} />
       <div class="uppy-ProgressBar-percentage">{progress}</div>
       <div class="uppy-ProgressBar-percentage">{progress}</div>
     </div>
     </div>

+ 5 - 0
src/scss/_progressbar.scss

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