#638 Select multiple cells by dragging

Author: Polleps

browser/data-browser/src/components/TableEditor/Cell.tsx

@@ -45,6 +45,7 @@ export function Cell({
   const ref = useRef<HTMLDivElement>(null);
 
   const {
+    mouseDown,
     selectedRow,
     selectedColumn,
     multiSelectCornerRow,
@@ -57,15 +58,29 @@ export function Cell({
     setCursorMode,
     registerEventListener,
     disabledKeyboardInteractions,
+    setMouseDown,
   } = useTableEditorContext();
 
   const isActive = rowIndex === selectedRow && columnIndex === selectedColumn;
   const isActiveCorner =
     rowIndex === multiSelectCornerRow &&
     columnIndex === multiSelectCornerColumn;
 
-  const handleClick = useCallback(
+  const handleMouseUp = useCallback(() => {
+    setMouseDown(false);
+  }, []);
+
+  const handleMouseEnter = useCallback(() => {
+    if (mouseDown) {
+      setMultiSelectCorner(rowIndex, columnIndex);
+      setCursorMode(CursorMode.MultiSelect);
+    }
+  }, [mouseDown, rowIndex, columnIndex]);
+
+  const handleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
+      setMouseDown(true);
+
       // When Shift is pressed, enter multi-select mode
       if (e.shiftKey) {
         e.stopPropagation();
@@ -90,6 +105,8 @@ export function Cell({
 
       if (isActive && columnIndex !== 0) {
         // Enter edit mode when clicking on a higlighted cell, except when it's the index column.
+        setMultiSelectCorner(undefined, undefined);
+
         return setCursorMode(CursorMode.Edit);
       }
 
@@ -155,10 +172,12 @@ export function Cell({
       disabled={disabled}
       role={role ?? 'gridcell'}
       className={className}
-      onClick={handleClick}
       allowUserSelect={cursorMode === CursorMode.Edit}
       align={align}
       tabIndex={isActive ? 0 : -1}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseEnter={handleMouseEnter}
     >
       {children}
     </CellWrapper>

browser/data-browser/src/components/TableEditor/TableEditorContext.tsx

@@ -28,6 +28,8 @@ function emptySetState<T>(_: T | ((__: T) => T)): undefined {
 }
 
 export interface TableEditorContext {
+  mouseDown: boolean;
+  setMouseDown: React.Dispatch<React.SetStateAction<boolean>>;
   tableRef: React.MutableRefObject<HTMLDivElement | null>;
   disabledKeyboardInteractions: Set<KeyboardInteraction>;
   setDisabledKeyboardInteractions: React.Dispatch<
@@ -62,6 +64,8 @@ export interface TableEditorContext {
 }
 
 const initial = {
+  mouseDown: false,
+  setMouseDown: emptySetState,
   tableRef: { current: null },
   disabledKeyboardInteractions: new Set<KeyboardInteraction>(),
   setDisabledKeyboardInteractions: emptySetState,
@@ -92,6 +96,7 @@ const TableEditorContext = React.createContext<TableEditorContext>(initial);
 export function TableEditorContextProvider({
   children,
 }: React.PropsWithChildren<unknown>): JSX.Element {
+  const [mouseDown, setMouseDown] = useState(false);
   const tableRef = useRef<HTMLDivElement | null>(null);
   const listRef = useRef<FixedSizeList>(null);
   const [eventManager] = useState(
@@ -159,6 +164,8 @@ export function TableEditorContextProvider({
 
   const context = useMemo(
     () => ({
+      mouseDown,
+      setMouseDown,
       tableRef,
       disabledKeyboardInteractions,
       setDisabledKeyboardInteractions,
@@ -195,6 +202,7 @@ export function TableEditorContextProvider({
       isDragging,
       cursorMode,
       emitInteractionsFired,
+      mouseDown,
     ],
   );