feat: Implement range selection in list view and grid view ✨

Author: lethemanh

react/Table/Readme.md

@@ -103,7 +103,31 @@ const initialVariants = [{ grouped: false }]
 
 const makeGroups = () => ({ groupLabels: ['C', 'D', 'Others'], groupCounts: [1,1,12] })
 
-;
+/**
+ * @param direction: ArrowUp / ArrowRight: -1, ArrowDown / ArrowLeft: 1
+ * @param items: Array (optional)
+ */
+const handleShiftArrow = (direction, items = []) => {
+  const allItems = items.length === 0 ? itemsListRef.current : items
+
+  let newFocusedIndex = focusedIndex
+
+  if (direction === -1) {
+    newFocusedIndex = Math.max(0, focusedIndex - 1)
+  } else if (direction === 1) {
+    newFocusedIndex = Math.min(allItems.length - 1, focusedIndex + 1)
+  }
+
+  setFocusedIndex(newFocusedIndex)
+  setIsKeyboardNavigating(true)
+
+  const anchorIndex =
+    lastSelectedIndex !== null ? lastSelectedIndex : focusedIndex
+  if (lastSelectedIndex === null) {
+    setLastSelectedIndex(focusedIndex)
+  }
+  selectExactRange(allItems, anchorIndex, newFocusedIndex)
+}
 
 <Variants initialVariants={initialVariants} screenshotAllVariants>
   {variant => (
@@ -123,6 +147,7 @@ const makeGroups = () => ({ groupLabels: ['C', 'D', 'Others'], groupCounts: [1,1
             onLongPress: (row, column) => { console.info(`long press on cell. Row ${row['id']}, Column ${column['id']}`) },
           },
         }}
+        handleShiftArrow={handleShiftArrow}
       />
     </div>
   )}

react/Table/Virtualized/RowContent.jsx

@@ -30,7 +30,7 @@ const RowContent = ({
             'aria-labelledby': `enhanced-table-checkbox-${index}`
           }}
           size="small"
-          onChange={() => onSelectClick(row)}
+          onClick={event => onSelectClick(event, row, index)}
         />
       </TableCell>
       {columns.map(column => (

react/Table/Virtualized/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { useState, forwardRef } from 'react'
+import React, { useEffect, useState, useRef, forwardRef } from 'react'
 import { TableVirtuoso, GroupedTableVirtuoso } from 'react-virtuoso'
 
 import FixedHeaderContent from './FixedHeaderContent'
@@ -23,6 +23,7 @@ const VirtualizedTable = forwardRef(
       componentsProps,
       context,
       components,
+      handleShiftArrow,
       ...props
     },
     ref
@@ -41,6 +42,31 @@ const VirtualizedTable = forwardRef(
       selectedItems
     }
 
+    const dataRef = useRef(data)
+
+    useEffect(() => {
+      dataRef.current = data
+    }, [data])
+
+    useEffect(() => {
+      if (!ref?.current) return
+      const table = ref.current
+
+      const handleKeyDown = event => {
+        if (
+          event.shiftKey &&
+          (event.key === 'ArrowUp' || event.key === 'ArrowDown')
+        ) {
+          event.preventDefault()
+          const direction = event.key === 'ArrowUp' ? -1 : 1
+          handleShiftArrow(direction, dataRef.current)
+        }
+      }
+
+      table.addEventListener('keydown', handleKeyDown)
+      return () => table.removeEventListener('keydown', handleKeyDown)
+    }, [handleShiftArrow, ref])
+
     const handleSort = property => {
       const isAsc = orderBy === property && order === 'asc'
       setOrder(isAsc ? 'desc' : 'asc')