Add onKeyPress event handler to capture e.shiftKey, unavailable in on…

…Change (#3768)
transloadit · May 23, 2022 · ae9745d · ae9745d
1 parent f10745e
commit ae9745d
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 3 deletions.
diff --git a/packages/@uppy/provider-views/src/Browser.jsx b/packages/@uppy/provider-views/src/Browser.jsx
@@ -21,6 +21,7 @@ function Browser (props) {
     showBreadcrumbs,
     isChecked,
     toggleCheckbox,
+    recordShiftKeyPress,
     handleScroll,
     showTitles,
     i18n,
@@ -91,6 +92,7 @@ function Browser (props) {
                   getItemIcon: () => folder.icon,
                   isChecked: isChecked(folder),
                   toggleCheckbox: (event) => toggleCheckbox(event, folder),
+                  recordShiftKeyPress,
                   type: 'folder',
                   isDisabled: isChecked(folder)?.loading,
                   isCheckboxDisabled: folder.id === VIRTUAL_SHARED_DIR,
@@ -111,6 +113,7 @@ function Browser (props) {
                   getItemIcon: () => file.icon,
                   isChecked: isChecked(file),
                   toggleCheckbox: (event) => toggleCheckbox(event, file),
+                  recordShiftKeyPress,
                   columns,
                   showTitles,
                   viewType,

diff --git a/packages/@uppy/provider-views/src/Item/components/GridLi.jsx b/packages/@uppy/provider-views/src/Item/components/GridLi.jsx
@@ -10,6 +10,7 @@ function GridListItem (props) {
     itemIconEl,
     showTitles,
     toggleCheckbox,
+    recordShiftKeyPress,
     id,
     children,
   } = props
@@ -25,6 +26,7 @@ function GridListItem (props) {
           isChecked ? 'uppy-ProviderBrowserItem-checkbox--is-checked' : ''
         } uppy-ProviderBrowserItem-checkbox--grid`}
         onChange={toggleCheckbox}
+        onKeyDown={recordShiftKeyPress}
         name="listitem"
         id={id}
         checked={isChecked}

diff --git a/packages/@uppy/provider-views/src/Item/components/ListLi.jsx b/packages/@uppy/provider-views/src/Item/components/ListLi.jsx
@@ -15,6 +15,7 @@ function ListItem (props) {
     isCheckboxDisabled,
     isChecked,
     toggleCheckbox,
+    recordShiftKeyPress,
     type,
     id,
     itemIconEl,
@@ -34,6 +35,7 @@ function ListItem (props) {
           type="checkbox"
           className={`uppy-u-reset uppy-ProviderBrowserItem-checkbox ${isChecked ? 'uppy-ProviderBrowserItem-checkbox--is-checked' : ''}`}
           onChange={toggleCheckbox}
+          onKeyDown={recordShiftKeyPress}
           // for the <label/>
           name="listitem"
           id={id}

diff --git a/packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx b/packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx
@@ -332,7 +332,7 @@ export default class ProviderView extends View {
 
     const targetViewOptions = { ...this.opts, ...viewOptions }
     const { files, folders, filterInput, loading, currentSelection } = this.plugin.getPluginState()
-    const { isChecked, toggleCheckbox, filterItems } = this.sharedHandler
+    const { isChecked, toggleCheckbox, recordShiftKeyPress, filterItems } = this.sharedHandler
     const hasInput = filterInput !== ''
     const headerProps = {
       showBreadcrumbs: targetViewOptions.showBreadcrumbs,
@@ -348,6 +348,7 @@ export default class ProviderView extends View {
     const browserProps = {
       isChecked,
       toggleCheckbox,
+      recordShiftKeyPress,
       currentSelection,
       files: hasInput ? filterItems(files) : files,
       folders: hasInput ? filterItems(folders) : folders,

diff --git a/packages/@uppy/provider-views/src/SharedHandler.js b/packages/@uppy/provider-views/src/SharedHandler.js
@@ -5,6 +5,7 @@ export default class SharedHandler {
     this.plugin = plugin
     this.filterItems = this.filterItems.bind(this)
     this.toggleCheckbox = this.toggleCheckbox.bind(this)
+    this.recordShiftKeyPress = this.recordShiftKeyPress.bind(this)
     this.isChecked = this.isChecked.bind(this)
     this.loaderWrapper = this.loaderWrapper.bind(this)
   }
@@ -19,6 +20,10 @@ export default class SharedHandler {
     })
   }
 
+  recordShiftKeyPress (e) {
+    this.isShiftKeyPressed = e.shiftKey
+  }
+
   /**
    * Toggles file/folder checkbox to on/off state while updating files list.
    *
@@ -32,10 +37,9 @@ export default class SharedHandler {
     e.currentTarget.focus()
     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.
-    if (this.lastCheckbox && e.shiftKey) {
+    if (this.lastCheckbox && this.isShiftKeyPressed) {
       const prevIndex = items.indexOf(this.lastCheckbox)
       const currentIndex = items.indexOf(file)
       const currentSelection = (prevIndex < currentIndex)