@uppy/provider-views: Fix range selection not resetting and computing correctly (#4415)

* Fix range selection not resetting and computing correctly

* Remove comment about deselecting previous selections

* Add range selection to Unsplash — just pass the recordShiftKeyPress prop

---------

Co-authored-by: Artur Paikin <artur@arturpaikin.com>

packages/@uppy/provider-views/src/Item/components/GridLi.jsx

@@ -33,6 +33,7 @@ function GridListItem (props) {
         className={checkBoxClassName}
         onChange={toggleCheckbox}
         onKeyDown={recordShiftKeyPress}
+        onMouseDown={recordShiftKeyPress}
         name="listitem"
         id={id}
         checked={isChecked}

packages/@uppy/provider-views/src/Item/components/ListLi.jsx

@@ -36,6 +36,7 @@ function ListItem (props) {
           className={`uppy-u-reset uppy-ProviderBrowserItem-checkbox ${isChecked ? 'uppy-ProviderBrowserItem-checkbox--is-checked' : ''}`}
           onChange={toggleCheckbox}
           onKeyDown={recordShiftKeyPress}
+          onMouseDown={recordShiftKeyPress}
           // for the <label/>
           name="listitem"
           id={id}

packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx

@@ -124,6 +124,7 @@ export default class ProviderView extends View {
       this.username = res.username || this.username
       this.#updateFilesAndFolders(res, files, folders)
       this.plugin.setPluginState({ directories: updatedDirectories, filterInput: '' })
+      this.lastCheckbox = undefined
     } catch (err) {
       this.handleError(err)
     } finally {

packages/@uppy/provider-views/src/SearchProviderView/SearchProviderView.jsx

@@ -138,12 +138,13 @@ export default class SearchProviderView extends View {
 
     const targetViewOptions = { ...this.opts, ...viewOptions }
     const { files, folders, filterInput, loading, currentSelection } = this.plugin.getPluginState()
-    const { isChecked, toggleCheckbox, filterItems } = this
+    const { isChecked, toggleCheckbox, filterItems, recordShiftKeyPress } = this
     const hasInput = filterInput !== ''
 
     const browserProps = {
       isChecked,
       toggleCheckbox,
+      recordShiftKeyPress,
       currentSelection,
       files: hasInput ? filterItems(files) : files,
       folders: hasInput ? filterItems(folders) : folders,

packages/@uppy/provider-views/src/View.js

@@ -123,31 +123,32 @@ export default class View {
     const { folders, files } = this.plugin.getPluginState()
     const items = this.filterItems(folders.concat(files))
     // Shift-clicking selects a single consecutive list of items
-    // starting at the previous click and deselects everything else.
+    // starting at the previous click.
     if (this.lastCheckbox && this.isShiftKeyPressed) {
+      const { currentSelection } = this.plugin.getPluginState()
       const prevIndex = items.indexOf(this.lastCheckbox)
       const currentIndex = items.indexOf(file)
-      const currentSelection = (prevIndex < currentIndex)
+      const newSelection = (prevIndex < currentIndex)
         ? items.slice(prevIndex, currentIndex + 1)
         : items.slice(currentIndex, prevIndex + 1)
-      const reducedCurrentSelection = []
+      const reducedNewSelection = []
 
       // Check restrictions on each file in currentSelection,
       // reduce it to only contain files that pass restrictions
-      for (const item of currentSelection) {
+      for (const item of newSelection) {
         const { uppy } = this.plugin
         const restrictionError = uppy.validateRestrictions(
           remoteFileObjToLocal(item),
-          [...uppy.getFiles(), ...reducedCurrentSelection],
+          [...uppy.getFiles(), ...reducedNewSelection],
         )
 
         if (!restrictionError) {
-          reducedCurrentSelection.push(item)
+          reducedNewSelection.push(item)
         } else {
           uppy.info({ message: restrictionError.message }, 'error', uppy.opts.infoTimeout)
         }
       }
-      this.plugin.setPluginState({ currentSelection: reducedCurrentSelection })
+      this.plugin.setPluginState({ currentSelection: [...new Set([...currentSelection, ...reducedNewSelection])] })
       return
     }