From d40ad5d028e75862aa618f35d5be45bbb63e4674 Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Wed, 25 Nov 2020 18:09:19 +0000
Subject: [PATCH] =?UTF-8?q?Status=20Bar=20and=20Dashboard:=20add=20?=
 =?UTF-8?q?=E2=80=9Cdone=E2=80=9D=20after=20upload=20is=20complete=20(#265?=
 =?UTF-8?q?3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add Done button

* move doneButtonHandler to options in Dashboard

* update docs

* revert for speed
---
 packages/@uppy/dashboard/src/index.js      |  7 +++++-
 packages/@uppy/status-bar/src/StatusBar.js | 17 ++++++++++++++
 packages/@uppy/status-bar/src/index.js     |  5 ++++-
 packages/@uppy/status-bar/src/style.scss   | 15 +++++++++++++
 website/src/docs/dashboard.md              | 17 ++++++++++++++
 website/src/docs/statusbar.md              | 26 +++++++++++++++-------
 6 files changed, 77 insertions(+), 10 deletions(-)

diff --git a/packages/@uppy/dashboard/src/index.js b/packages/@uppy/dashboard/src/index.js
index d92e0969b..c6d86d1d3 100644
--- a/packages/@uppy/dashboard/src/index.js
+++ b/packages/@uppy/dashboard/src/index.js
@@ -125,6 +125,10 @@ module.exports = class Dashboard extends Plugin {
       hideRetryButton: false,
       hidePauseResumeButton: false,
       hideProgressAfterFinish: false,
+      doneButtonHandler: () => {
+        this.uppy.reset()
+        this.requestCloseModal()
+      },
       note: null,
       closeModalOnClickOutside: false,
       closeAfterFinish: false,
@@ -993,7 +997,8 @@ module.exports = class Dashboard extends Plugin {
         hideCancelButton: this.opts.hideCancelButton,
         showProgressDetails: this.opts.showProgressDetails,
         hideAfterFinish: this.opts.hideProgressAfterFinish,
-        locale: this.opts.locale
+        locale: this.opts.locale,
+        doneButtonHandler: this.opts.doneButtonHandler
       })
     }
 
diff --git a/packages/@uppy/status-bar/src/StatusBar.js b/packages/@uppy/status-bar/src/StatusBar.js
index 90b042e77..4bd9e53e9 100644
--- a/packages/@uppy/status-bar/src/StatusBar.js
+++ b/packages/@uppy/status-bar/src/StatusBar.js
@@ -109,6 +109,8 @@ module.exports = (props) => {
 
   const showRetryBtn = error && !hideRetryButton
 
+  const showDoneBtn = props.doneButtonHandler && uploadState === statusBarStates.STATE_COMPLETE
+
   const progressClassNames = `uppy-StatusBar-progress
                            ${progressMode ? 'is-' + progressMode : ''}`
 
@@ -134,6 +136,7 @@ module.exports = (props) => {
         {showRetryBtn ? <RetryBtn {...props} /> : null}
         {showPauseResumeBtn ? <PauseResumeButton {...props} /> : null}
         {showCancelBtn ? <CancelBtn {...props} /> : null}
+        {showDoneBtn ? <DoneBtn {...props} /> : null}
       </div>
     </div>
   )
@@ -232,6 +235,20 @@ const PauseResumeButton = (props) => {
   )
 }
 
+const DoneBtn = (props) => {
+  const { i18n } = props
+  return (
+    <button
+      type="button"
+      class="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--done"
+      onClick={props.doneButtonHandler}
+      data-uppy-super-focusable
+    >
+      {i18n('done')}
+    </button>
+  )
+}
+
 const LoadingSpinner = () => {
   return (
     <svg class="uppy-StatusBar-spinner" aria-hidden="true" focusable="false" width="14" height="14">
diff --git a/packages/@uppy/status-bar/src/index.js b/packages/@uppy/status-bar/src/index.js
index a2f661baa..6021fe201 100644
--- a/packages/@uppy/status-bar/src/index.js
+++ b/packages/@uppy/status-bar/src/index.js
@@ -30,6 +30,7 @@ module.exports = class StatusBar extends Plugin {
         cancel: 'Cancel',
         pause: 'Pause',
         resume: 'Resume',
+        done: 'Done',
         filesUploadedOfTotal: {
           0: '%{complete} of %{smart_count} file uploaded',
           1: '%{complete} of %{smart_count} files uploaded'
@@ -59,7 +60,8 @@ module.exports = class StatusBar extends Plugin {
       hidePauseResumeButton: false,
       hideCancelButton: false,
       showProgressDetails: false,
-      hideAfterFinish: true
+      hideAfterFinish: true,
+      doneButtonHandler: null
     }
 
     this.opts = { ...defaultOptions, ...opts }
@@ -226,6 +228,7 @@ module.exports = class StatusBar extends Plugin {
       retryAll: this.uppy.retryAll,
       cancelAll: this.uppy.cancelAll,
       startUpload: this.startUpload,
+      doneButtonHandler: this.opts.doneButtonHandler,
       resumableUploads,
       supportsUploadProgress,
       showProgressDetails: this.opts.showProgressDetails,
diff --git a/packages/@uppy/status-bar/src/style.scss b/packages/@uppy/status-bar/src/style.scss
index fa484d19c..ef21052c7 100644
--- a/packages/@uppy/status-bar/src/style.scss
+++ b/packages/@uppy/status-bar/src/style.scss
@@ -312,6 +312,21 @@
     }
   }
 
+  .uppy-StatusBar-actionBtn--done {
+    @include highlight-focus;
+    line-height: 1;
+    border-radius: 3px;
+    padding: 7px 8px;
+
+    [data-uppy-theme="dark"] & {
+      color: $highlight--dark;
+    }
+  }
+
+  .uppy-size--md .uppy-StatusBar-actionBtn--done {
+    font-size: 14px;
+  }
+
 .uppy-StatusBar-details {
   line-height: 12px;
   width: 13px;
diff --git a/website/src/docs/dashboard.md b/website/src/docs/dashboard.md
index eab2977af..7fd1234eb 100644
--- a/website/src/docs/dashboard.md
+++ b/website/src/docs/dashboard.md
@@ -80,6 +80,10 @@ uppy.use(Dashboard, {
   hidePauseResumeButton: false,
   hideCancelButton: false,
   hideProgressAfterFinish: false,
+  doneButtonHandler: () => {
+    this.uppy.reset()
+    this.requestCloseModal()
+  },
   note: null,
   closeModalOnClickOutside: false,
   closeAfterFinish: false,
@@ -184,6 +188,19 @@ Use this if you are providing a custom retry button somewhere, and using the `up
 
 Hide Status Bar after the upload has finished.
 
+### `doneButtonHandler`
+
+This option is passed to the StatusBar, and will render a “Done” button in place of pause/resume/cancel buttons, once the upload/encoding is done. The behaviour of this “Done” button is defined by the handler function — can be used to close file picker modals or clear the upload state. This is what the Dashboard sets by default:
+
+```js
+doneButtonHandler: () => {
+  this.uppy.reset()
+  this.requestCloseModal()
+}
+```
+
+Set to `null` to disable the “Done” button.
+
 ### `showSelectedFiles: true`
 
 Show the list (grid) of selected files with preview and file name. In case you are showing selected files in your own app’s UI and want the Uppy Dashboard to just be a picker, the list can be hidden with this option.
diff --git a/website/src/docs/statusbar.md b/website/src/docs/statusbar.md
index 7a7259ebd..1dbaa2b70 100644
--- a/website/src/docs/statusbar.md
+++ b/website/src/docs/statusbar.md
@@ -65,6 +65,7 @@ uppy.use(StatusBar, {
   hideRetryButton: false,
   hidePauseResumeButton: false,
   hideCancelButton: false,
+  doneButtonHandler: null,
   locale: {}
 })
 ```
@@ -104,6 +105,17 @@ Hide pause/resume buttons (for resumable uploads, via [tus](http://tus.io), for
 
 Hide the cancel button. Use this if you are providing a custom retry button somewhere, and using the `uppy.cancelAll()` API.
 
+### `doneButtonHandler`
+
+If passed a function, Status Bar will render a “Done” button in place of pause/resume/cancel buttons, once the upload/encoding is done. The behaviour of this “Done” button is defined by the handler function — can be used to close file picker modals or clear the upload state. This is what the Dashboard plugin, which uses Status Bar internally, sets:
+
+```js
+doneButtonHandler: () => {
+  this.uppy.reset()
+  this.requestCloseModal()
+}
+```
+
 ### `locale: {}`
 
 Localize text that is shown to the user.
@@ -124,14 +136,12 @@ strings: {
   retry: 'Retry',
   // Used as the label for the button that cancels an upload.
   cancel: 'Cancel',
-  // Used as the screen reader label for the button that retries an upload.
-  retryUpload: 'Retry upload',
-  // Used as the screen reader label for the button that pauses an upload.
-  pauseUpload: 'Pause upload',
-  // Used as the screen reader label for the button that resumes a paused upload.
-  resumeUpload: 'Resume upload',
-  // Used as the screen reader label for the button that cancels an upload.
-  cancelUpload: 'Cancel upload',
+  // Used as the label for the button that pauses an upload.
+  pause: 'Pause',
+  // Used as the label for the button that resumes an upload.
+  resume: 'Resume',
+  // Used as the label for the button that resets the upload state after an upload
+  done: 'Done',
   // When `showProgressDetails` is set, shows the number of files that have been fully uploaded so far.
   filesUploadedOfTotal: {
     0: '%{complete} of %{smart_count} file uploaded',