feat: multiselect values

packages/grid/src/Grid.test.tsx

@@ -199,6 +199,34 @@ function mouseClick(
   mouseUp(column, row, component, extraMouseArgs, clientX, clientY);
 }
 
+function mouseRightClick(
+  column: VisibleIndex,
+  row: VisibleIndex,
+  component: Grid,
+  extraMouseArgs?: MouseEventInit,
+  clientX?: number,
+  clientY?: number
+) {
+  mouseEvent(
+    column,
+    row,
+    component.handleContextMenu,
+    'mousedown',
+    extraMouseArgs,
+    clientX,
+    clientY
+  );
+  mouseEvent(
+    column,
+    row,
+    component.handleContextMenu,
+    'mouseup',
+    extraMouseArgs,
+    clientX,
+    clientY
+  );
+}
+
 function mouseDoubleClick(
   column: VisibleIndex,
   row: VisibleIndex,
@@ -334,6 +362,34 @@ it('ctrl clicking a selected cell should deselect it', () => {
   expect(component.state.selectedRanges.length).toBe(0);
 });
 
+it('right click outside the range changes the selected ranges', () => {
+  const component = makeGridComponent();
+
+  mouseClick(3, 5, component);
+  mouseClick(3, 6, component, { ctrlKey: true });
+  expect(component.state.cursorColumn).toBe(3);
+  expect(component.state.cursorRow).toBe(6);
+  expect(component.state.selectedRanges[0]).toEqual(new GridRange(3, 5, 3, 6));
+
+  mouseRightClick(5, 7, component);
+  expect(component.state.cursorColumn).toBe(5);
+  expect(component.state.cursorRow).toBe(7);
+  expect(component.state.selectedRanges[0]).toEqual(new GridRange(5, 7, 5, 7));
+});
+
+it('right click inside the range keeps the selected ranges', () => {
+  const component = makeGridComponent();
+
+  mouseClick(3, 5, component);
+  mouseClick(3, 6, component, { ctrlKey: true });
+  expect(component.state.selectedRanges.length).toBe(1);
+  expect(component.state.selectedRanges[0]).toEqual(new GridRange(3, 5, 3, 6));
+
+  mouseRightClick(3, 5, component);
+  expect(component.state.selectedRanges.length).toBe(1);
+  expect(component.state.selectedRanges[0]).toEqual(new GridRange(3, 5, 3, 6));
+});
+
 it('handles mouse drag down to update selection', () => {
   const component = makeGridComponent();
   mouseDown(3, 5, component);

packages/grid/src/Grid.tsx

@@ -355,6 +355,7 @@ class Grid extends PureComponent<GridProps, GridState> {
     this.handleMouseUp = this.handleMouseUp.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.handleWheel = this.handleWheel.bind(this);
+    this.getSelectedRanges = this.getSelectedRanges.bind(this);
 
     const {
       isStuckToBottom,
@@ -976,6 +977,12 @@ class Grid extends PureComponent<GridProps, GridState> {
     }
   }
 
+  /** Gets the selected ranges */
+  getSelectedRanges(): readonly GridRange[] {
+    const { selectedRanges } = this.state;
+    return selectedRanges;
+  }
+
   /**
    * Begin a selection operation at the provided location
    * @param column Column where the selection is beginning

packages/grid/src/mouse-handlers/GridSelectionMouseHandler.ts

@@ -1,7 +1,7 @@
 import { EventHandlerResult } from '../EventHandlerResult';
 import Grid from '../Grid';
-import { BoxCoordinates } from '../GridMetrics';
 import GridMouseHandler, { GridMouseEvent } from '../GridMouseHandler';
+import GridRange from '../GridRange';
 import GridUtils, { GridPoint } from '../GridUtils';
 
 const DEFAULT_INTERVAL_MS = 100;
@@ -16,8 +16,6 @@ class GridSelectionMouseHandler extends GridMouseHandler {
 
   private lastTriggerTime?: number;
 
-  private dragBounds?: BoxCoordinates;
-
   onDown(
     gridPoint: GridPoint,
     grid: Grid,
@@ -68,7 +66,6 @@ class GridSelectionMouseHandler extends GridMouseHandler {
 
     this.startPoint = gridPoint;
     this.hasExtendedFloating = false;
-    this.dragBounds = GridUtils.getScrollDragBounds(metrics, row, column);
 
     return true;
   }
@@ -210,14 +207,37 @@ class GridSelectionMouseHandler extends GridMouseHandler {
   onUp(gridPoint: GridPoint, grid: Grid): EventHandlerResult {
     if (this.startPoint !== undefined) {
       this.startPoint = undefined;
-      this.dragBounds = undefined;
       this.stopTimer();
       grid.commitSelection();
     }
 
     return false;
   }
 
+  onContextMenu(
+    gridPoint: GridPoint,
+    grid: Grid,
+    event: GridMouseEvent
+  ): EventHandlerResult {
+    // check if the selected is already in the selected range
+    const selectedRanges = grid.getSelectedRanges();
+    const isInRange = GridRange.containsCell(
+      selectedRanges,
+      gridPoint.column,
+      gridPoint.row
+    );
+
+    // only change the selected range if the selected cell is not in the selected range
+    if (!isInRange && gridPoint.row !== null) {
+      this.startPoint = undefined;
+      this.stopTimer();
+      grid.clearSelectedRanges();
+      grid.moveCursorToPosition(gridPoint.column, gridPoint.row);
+    }
+
+    return false;
+  }
+
   moveSelection(
     grid: Grid,
     gridPoint: GridPoint,

packages/iris-grid/src/mousehandlers/IrisGridContextMenuHandler.scss

@@ -11,6 +11,11 @@ $padding-x: 2rem;
   overflow: hidden;
 }
 
+.iris-grid-filter-menu-subtitle {
+  color: $text-muted;
+  font-size: small;
+}
+
 .advanced-filter-button-container {
   transition: $transition opacity;
 }