@deephaven/grid 1.22.1 → 1.22.2-alpha-pivot-builder.0730ba6.0

package/dist/Grid.js

@@ -119,14 +119,12 @@ class Grid extends PureComponent {
     this.handleResize = this.handleResize.bind(this);
     this.handleWheel = this.handleWheel.bind(this);
     this.getSelectedRanges = this.getSelectedRanges.bind(this);
-    var {
-      isStuckToBottom,
-      isStuckToRight,
-      metricCalculator,
-      movedColumns,
-      movedRows,
-      renderer
-    } = props;
+    var isStuckToBottom = props.isStuckToBottom,
+      isStuckToRight = props.isStuckToRight,
+      metricCalculator = props.metricCalculator,
+      movedColumns = props.movedColumns,
+      movedRows = props.movedRows,
+      renderer = props.renderer;
     this.renderer = renderer || new GridRenderer();
     this.metricCalculator = metricCalculator || new GridMetricCalculator();
     this.canvas = null;
@@ -215,23 +213,19 @@ class Grid extends PureComponent {
 
     // apply on mount, so that it works with a static model
     // https://github.com/deephaven/web-client-ui/issues/581
-    var {
-      isStuckToBottom,
-      isStuckToRight
-    } = this.props;
-    var {
-      top,
-      left
-    } = this.getStickyScrollPosition(isStuckToBottom, isStuckToRight);
+    var _this$props = this.props,
+      isStuckToBottom = _this$props.isStuckToBottom,
+      isStuckToRight = _this$props.isStuckToRight;
+    var _this$getStickyScroll = this.getStickyScrollPosition(isStuckToBottom, isStuckToRight),
+      top = _this$getStickyScroll.top,
+      left = _this$getStickyScroll.left;
     this.setState({
       top,
       left
     });
   }
   componentDidUpdate(prevProps, prevState) {
-    var {
-      renderError
-    } = this.state;
+    var renderError = this.state.renderError;
 
     // Render errors mean we can't recover
     if (renderError != null) {
@@ -243,32 +237,28 @@ class Grid extends PureComponent {
     if ((changedProps.length === 0 || changedProps.length === 1 && changedProps[0] === 'children') && changedState.length === 0) {
       return;
     }
-    var {
-      isStickyBottom,
-      isStickyRight,
-      movedColumns,
-      movedRows,
-      onMovedColumnsChanged,
-      onMoveColumnComplete,
-      onMovedRowsChanged,
-      onMoveRowComplete
-    } = this.props;
-    var {
-      isStickyBottom: prevIsStickyBottom,
-      isStickyRight: prevIsStickyRight,
-      movedColumns: prevPropMovedColumns,
-      movedRows: prevPropMovedRows
-    } = prevProps;
-    var {
-      movedColumns: prevStateMovedColumns,
-      movedRows: prevStateMovedRows
-    } = prevState;
-    var {
-      draggingColumn,
-      draggingRow,
-      movedColumns: currentStateMovedColumns,
-      movedRows: currentStateMovedRows
-    } = this.state;
+    var _this$props2 = this.props,
+      isStickyBottom = _this$props2.isStickyBottom,
+      isStickyRight = _this$props2.isStickyRight,
+      movedColumns = _this$props2.movedColumns,
+      movedRows = _this$props2.movedRows,
+      onMovedColumnsChanged = _this$props2.onMovedColumnsChanged,
+      onMoveColumnComplete = _this$props2.onMoveColumnComplete,
+      onMovedRowsChanged = _this$props2.onMovedRowsChanged,
+      onMoveRowComplete = _this$props2.onMoveRowComplete,
+      renderer = _this$props2.renderer,
+      metricCalculator = _this$props2.metricCalculator;
+    var prevIsStickyBottom = prevProps.isStickyBottom,
+      prevIsStickyRight = prevProps.isStickyRight,
+      prevPropMovedColumns = prevProps.movedColumns,
+      prevPropMovedRows = prevProps.movedRows;
+    var prevStateMovedColumns = prevState.movedColumns,
+      prevStateMovedRows = prevState.movedRows;
+    var _this$state = this.state,
+      draggingColumn = _this$state.draggingColumn,
+      draggingRow = _this$state.draggingRow,
+      currentStateMovedColumns = _this$state.movedColumns,
+      currentStateMovedRows = _this$state.movedRows;
     var stateUpdates = {};
     if (prevPropMovedColumns !== movedColumns) {
       stateUpdates.movedColumns = movedColumns;
@@ -294,14 +284,23 @@ class Grid extends PureComponent {
     if (isStickyRight !== prevIsStickyRight) {
       stateUpdates.isStuckToRight = false;
     }
+
+    // Sync renderer/metricCalculator props to instance fields so callers can
+    // swap them at runtime (e.g. pivot model swap supplies a pivot renderer
+    // and metric calculator).
+    if (renderer !== prevProps.renderer) {
+      this.renderer = renderer !== null && renderer !== void 0 ? renderer : new GridRenderer();
+    }
+    if (metricCalculator !== prevProps.metricCalculator) {
+      this.metricCalculator = metricCalculator !== null && metricCalculator !== void 0 ? metricCalculator : new GridMetricCalculator();
+    }
     var updatedState = _objectSpread(_objectSpread({}, this.state), stateUpdates);
     this.updateMetrics(updatedState);
     this.requestUpdateCanvas();
     if (this.needToUpdateScroll()) {
-      var {
-        top,
-        left
-      } = this.getStickyScrollPosition(isStickyBottom, isStickyRight);
+      var _this$getStickyScroll2 = this.getStickyScrollPosition(isStickyBottom, isStickyRight),
+        top = _this$getStickyScroll2.top,
+        left = _this$getStickyScroll2.left;
       updatedState.top = top;
       updatedState.left = left;
     }
@@ -323,9 +322,7 @@ class Grid extends PureComponent {
     this.removeDocumentCursor();
   }
   getTheme() {
-    var {
-      theme
-    } = this.props;
+    var theme = this.props.theme;
     return Grid.getTheme(this.context, theme);
   }
   getGridPointFromEvent(event) {
@@ -342,27 +339,24 @@ class Grid extends PureComponent {
   getMetricState() {
     var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state;
     var theme = this.getTheme();
-    var {
-      model,
-      stateOverride
-    } = this.props;
+    var _this$props3 = this.props,
+      model = _this$props3.model,
+      stateOverride = _this$props3.stateOverride;
     if (!this.canvasContext || !this.canvas) {
       throw new Error('Canvas and context must be defined to get metrics');
     }
     var context = this.canvasContext;
     var width = this.canvas.clientWidth;
     var height = this.canvas.clientHeight;
-    var {
-      left,
-      top,
-      leftOffset,
-      topOffset,
-      movedColumns,
-      movedRows,
-      isDraggingHorizontalScrollBar,
-      isDraggingVerticalScrollBar,
-      draggingColumn
-    } = state;
+    var left = state.left,
+      top = state.top,
+      leftOffset = state.leftOffset,
+      topOffset = state.topOffset,
+      movedColumns = state.movedColumns,
+      movedRows = state.movedRows,
+      isDraggingHorizontalScrollBar = state.isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar = state.isDraggingVerticalScrollBar,
+      draggingColumn = state.draggingColumn;
     return _objectSpread({
       left,
       top,
@@ -381,15 +375,11 @@ class Grid extends PureComponent {
     }, stateOverride);
   }
   getKeyHandlers() {
-    var {
-      keyHandlers
-    } = this.props;
+    var keyHandlers = this.props.keyHandlers;
     return this.getCachedKeyHandlers(keyHandlers);
   }
   getMouseHandlers() {
-    var {
-      mouseHandlers
-    } = this.props;
+    var mouseHandlers = this.props.mouseHandlers;
     return this.getCachedMouseHandlers(mouseHandlers);
   }
 
@@ -429,9 +419,7 @@ class Grid extends PureComponent {
   toggleRowExpanded(row) {
     var expandDescendants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var modelRow = this.getModelRow(row);
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     // We only want to set expansion if the row is expandable
     // If it's not, still move the cursor to that position, as it may be outside of the current viewport and we don't know if it's expandable yet
     if (isExpandableGridModel(model) && model.isRowExpandable(modelRow)) {
@@ -451,16 +439,15 @@ class Grid extends PureComponent {
       left: this.state.left,
       top: this.state.top
     };
-    var {
-      bottomVisible,
-      rowCount,
-      top,
-      lastTop,
-      rightVisible,
-      columnCount,
-      left,
-      lastLeft
-    } = this.metrics;
+    var _this$metrics3 = this.metrics,
+      bottomVisible = _this$metrics3.bottomVisible,
+      rowCount = _this$metrics3.rowCount,
+      top = _this$metrics3.top,
+      lastTop = _this$metrics3.lastTop,
+      rightVisible = _this$metrics3.rightVisible,
+      columnCount = _this$metrics3.columnCount,
+      left = _this$metrics3.left,
+      lastLeft = _this$metrics3.lastLeft;
     var newTop = top;
     var newLeft = left;
     if (isStickyBottom && (bottomVisible < rowCount - 1 && bottomVisible > 0 || top > lastTop)) {
@@ -481,18 +468,13 @@ class Grid extends PureComponent {
    * @param gridRanges The new selected ranges to set
    */
   setSelectedRanges(gridRanges) {
-    var {
-      model
-    } = this.props;
-    var {
-      columnCount,
-      rowCount
-    } = model;
-    var {
-      cursorRow,
-      cursorColumn,
-      selectedRanges
-    } = this.state;
+    var model = this.props.model;
+    var columnCount = model.columnCount,
+      rowCount = model.rowCount;
+    var _this$state2 = this.state,
+      cursorRow = _this$state2.cursorRow,
+      cursorColumn = _this$state2.cursorColumn,
+      selectedRanges = _this$state2.selectedRanges;
     this.setState({
       selectedRanges: gridRanges,
       lastSelectedRanges: selectedRanges
@@ -502,10 +484,9 @@ class Grid extends PureComponent {
       var newCursorRow = cursorRow;
       var newCursorColumn = cursorColumn;
       if (!range.containsCell(cursorColumn, cursorRow)) {
-        ({
-          row: newCursorRow,
-          column: newCursorColumn
-        } = range.startCell());
+        var _range$startCell = range.startCell();
+        newCursorRow = _range$startCell.row;
+        newCursorColumn = _range$startCell.column;
       }
       this.setState({
         selectionStartColumn: range.startColumn,
@@ -518,12 +499,8 @@ class Grid extends PureComponent {
     }
   }
   initContext() {
-    var {
-      canvas
-    } = this;
-    var {
-      canvasOptions
-    } = this.props;
+    var canvas = this.canvas;
+    var canvasOptions = this.props.canvasOptions;
     if (!canvas) throw new Error('Canvas not set');
     this.canvasContext = canvas.getContext('2d', canvasOptions);
   }
@@ -551,27 +528,21 @@ class Grid extends PureComponent {
     this.updateCanvasScale();
     this.updateMetrics();
     this.updateRenderState();
-    var {
-      canvasContext,
-      metrics,
-      renderState
-    } = this;
+    var canvasContext = this.canvasContext,
+      metrics = this.metrics,
+      renderState = this.renderState;
     assertNotNull(canvasContext);
     assertNotNull(metrics);
     assertNotNull(renderState);
     this.renderer.configureContext(canvasContext, renderState);
-    var {
-      onViewChanged
-    } = this.props;
+    var onViewChanged = this.props.onViewChanged;
     onViewChanged(metrics);
     this.drawCanvas();
   }
   updateCanvasScale() {
-    var {
-      canvas,
-      canvasContext,
-      canvasWrapper
-    } = this;
+    var canvas = this.canvas,
+      canvasContext = this.canvasContext,
+      canvasWrapper = this.canvasWrapper;
     if (!canvas) throw new Error('canvas not set');
     if (!canvasContext) throw new Error('canvasContext not set');
     if (!canvasWrapper.current) throw new Error('canvasWrapper not set');
@@ -597,14 +568,12 @@ class Grid extends PureComponent {
   }
   updateScrollBounds() {
     if (!this.metrics) throw new Error('metrics not set');
-    var {
-      left,
-      top
-    } = this.state;
-    var {
-      lastLeft,
-      lastTop
-    } = this.metrics;
+    var _this$state3 = this.state,
+      left = _this$state3.left,
+      top = _this$state3.top;
+    var _this$metrics4 = this.metrics,
+      lastLeft = _this$metrics4.lastLeft,
+      lastTop = _this$metrics4.lastTop;
     if (left > lastLeft) {
       this.setState({
         left: lastLeft,
@@ -626,30 +595,24 @@ class Grid extends PureComponent {
     if (!this.metrics || !this.prevMetrics) {
       return false;
     }
-    var {
-      rowCount,
-      columnCount,
-      height,
-      width
-    } = this.metrics;
-    var {
-      rowCount: prevRowCount,
-      columnCount: prevColumnCount,
-      height: prevHeight,
-      width: prevWidth
-    } = this.prevMetrics;
+    var _this$metrics5 = this.metrics,
+      rowCount = _this$metrics5.rowCount,
+      columnCount = _this$metrics5.columnCount,
+      height = _this$metrics5.height,
+      width = _this$metrics5.width;
+    var _this$prevMetrics = this.prevMetrics,
+      prevRowCount = _this$prevMetrics.rowCount,
+      prevColumnCount = _this$prevMetrics.columnCount,
+      prevHeight = _this$prevMetrics.height,
+      prevWidth = _this$prevMetrics.width;
     if (prevRowCount !== rowCount || height !== prevHeight) {
-      var {
-        isStuckToBottom
-      } = this.state;
+      var isStuckToBottom = this.state.isStuckToBottom;
       if (isStuckToBottom) {
         return true;
       }
     }
     if (prevColumnCount !== columnCount || width !== prevWidth) {
-      var {
-        isStuckToRight
-      } = this.state;
+      var isStuckToRight = this.state.isStuckToRight;
       if (isStuckToRight) {
         return true;
       }
@@ -659,9 +622,7 @@ class Grid extends PureComponent {
   updateMetrics() {
     var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state;
     this.prevMetrics = this.metrics;
-    var {
-      metricCalculator
-    } = this;
+    var metricCalculator = this.metricCalculator;
     var metricState = this.getMetricState(state);
     this.metrics = metricCalculator.getMetrics(metricState);
     this.updateScrollBounds();
@@ -673,16 +634,10 @@ class Grid extends PureComponent {
    * @param prevState The previous grid state
    */
   checkSelectionChange(prevState) {
-    var {
-      selectedRanges: oldSelectedRanges
-    } = prevState;
-    var {
-      selectedRanges
-    } = this.state;
+    var oldSelectedRanges = prevState.selectedRanges;
+    var selectedRanges = this.state.selectedRanges;
     if (selectedRanges !== oldSelectedRanges) {
-      var {
-        onSelectionChanged
-      } = this.props;
+      var onSelectionChanged = this.props.onSelectionChanged;
       onSelectionChanged(selectedRanges);
     }
   }
@@ -692,16 +647,10 @@ class Grid extends PureComponent {
    * @returns True if the selection is valid, false if the selection was invalid and has been reset
    */
   validateSelection() {
-    var {
-      model
-    } = this.props;
-    var {
-      selectedRanges
-    } = this.state;
-    var {
-      columnCount,
-      rowCount
-    } = model;
+    var model = this.props.model;
+    var selectedRanges = this.state.selectedRanges;
+    var columnCount = model.columnCount,
+      rowCount = model.rowCount;
     for (var i = 0; i < selectedRanges.length; i += 1) {
       var range = selectedRanges[i];
       if (range.endColumn != null && range.endColumn >= columnCount || range.endRow != null && range.endRow >= rowCount) {
@@ -720,9 +669,7 @@ class Grid extends PureComponent {
    * Clears all selected ranges
    */
   clearSelectedRanges() {
-    var {
-      selectedRanges
-    } = this.state;
+    var selectedRanges = this.state.selectedRanges;
     this.setState({
       selectedRanges: EMPTY_ARRAY,
       lastSelectedRanges: selectedRanges
@@ -731,9 +678,7 @@ class Grid extends PureComponent {
 
   /** Clears all but the last selected range */
   trimSelectedRanges() {
-    var {
-      selectedRanges
-    } = this.state;
+    var selectedRanges = this.state.selectedRanges;
     if (selectedRanges.length > 0) {
       this.setState({
         selectedRanges: selectedRanges.slice(selectedRanges.length - 1)
@@ -743,9 +688,7 @@ class Grid extends PureComponent {
 
   /** Gets the selected ranges */
   getSelectedRanges() {
-    var {
-      selectedRanges
-    } = this.state;
+    var selectedRanges = this.state.selectedRanges;
     return selectedRanges;
   }
 
@@ -776,18 +719,12 @@ class Grid extends PureComponent {
     var extendSelection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var maximizePreviousRange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     this.setState(state => {
-      var {
-        selectedRanges,
-        selectionStartRow,
-        selectionStartColumn
-      } = state;
-      var {
-        theme
-      } = this.props;
-      var {
-        autoSelectRow,
-        autoSelectColumn
-      } = theme;
+      var selectedRanges = state.selectedRanges,
+        selectionStartRow = state.selectionStartRow,
+        selectionStartColumn = state.selectionStartColumn;
+      var theme = this.props.theme;
+      var autoSelectRow = theme.autoSelectRow,
+        autoSelectColumn = theme.autoSelectColumn;
       if (extendSelection && selectedRanges.length > 0) {
         var lastSelectedRange = selectedRanges[selectedRanges.length - 1];
         var left = null;
@@ -846,18 +783,12 @@ class Grid extends PureComponent {
    */
   commitSelection() {
     this.setState(state => {
-      var {
-        theme
-      } = this.props;
-      var {
-        autoSelectRow
-      } = theme;
-      var {
-        selectedRanges,
-        lastSelectedRanges,
-        cursorRow,
-        cursorColumn
-      } = state;
+      var theme = this.props.theme;
+      var autoSelectRow = theme.autoSelectRow;
+      var selectedRanges = state.selectedRanges,
+        lastSelectedRanges = state.lastSelectedRanges,
+        cursorRow = state.cursorRow,
+        cursorColumn = state.cursorColumn;
       if (selectedRanges.length === 1 && (autoSelectRow !== undefined && autoSelectRow ? GridRange.rowCount(selectedRanges) === 1 : GridRange.cellCount(selectedRanges) === 1) && GridRange.rangeArraysEqual(selectedRanges, lastSelectedRanges)) {
         // If it's the exact same single selection, then deselect.
         // For if we click on one cell multiple times.
@@ -890,19 +821,13 @@ class Grid extends PureComponent {
       var newCursorColumn = cursorColumn;
       var newCursorRow = cursorRow;
       if (!GridRange.containsCell(newSelectedRanges, cursorColumn, cursorRow)) {
-        var {
-          model
-        } = this.props;
-        var {
-          columnCount,
-          rowCount
-        } = model;
+        var model = this.props.model;
+        var columnCount = model.columnCount,
+          rowCount = model.rowCount;
         var nextCursor = GridRange.nextCell(GridRange.boundedRanges(selectedRanges, columnCount, rowCount));
         if (nextCursor != null) {
-          ({
-            column: newCursorColumn,
-            row: newCursorRow
-          } = nextCursor);
+          newCursorColumn = nextCursor.column;
+          newCursorRow = nextCursor.row;
         } else {
           newCursorColumn = null;
           newCursorRow = null;
@@ -929,13 +854,12 @@ class Grid extends PureComponent {
     if (!this.metrics || !this.prevMetrics) {
       return;
     }
-    var {
-      gridY,
-      height,
-      lastTop,
-      userRowHeights,
-      rowHeight
-    } = this.metrics;
+    var _this$metrics6 = this.metrics,
+      gridY = _this$metrics6.gridY,
+      height = _this$metrics6.height,
+      lastTop = _this$metrics6.lastTop,
+      userRowHeights = _this$metrics6.userRowHeights,
+      rowHeight = _this$metrics6.rowHeight;
     var tableHeight = height - gridY;
     var halfViewportHeight = Math.round(tableHeight / 2) + ((_userRowHeights$get = userRowHeights.get(focusedRow)) !== null && _userRowHeights$get !== void 0 ? _userRowHeights$get : rowHeight);
     var metricState = this.getMetricState();
@@ -945,9 +869,7 @@ class Grid extends PureComponent {
       selectedRanges: [new GridRange(null, focusedRow, null, focusedRow)],
       isStuckToBottom: false
     });
-    var {
-      cursorColumn
-    } = this.state;
+    var cursorColumn = this.state.cursorColumn;
     this.moveCursorToPosition(cursorColumn, focusedRow, false, false);
   }
 
@@ -955,14 +877,11 @@ class Grid extends PureComponent {
    * Set the selection to the entire grid
    */
   selectAll() {
-    var {
-      model,
-      theme
-    } = this.props;
-    var {
-      autoSelectRow,
-      autoSelectColumn
-    } = theme;
+    var _this$props4 = this.props,
+      model = _this$props4.model,
+      theme = _this$props4.theme;
+    var autoSelectRow = theme.autoSelectRow,
+      autoSelectColumn = theme.autoSelectColumn;
     var top = autoSelectColumn !== undefined && autoSelectColumn ? null : 0;
     var bottom = autoSelectColumn !== undefined && autoSelectColumn ? null : model.rowCount - 1;
     var left = autoSelectRow !== undefined && autoSelectRow ? null : 0;
@@ -977,28 +896,22 @@ class Grid extends PureComponent {
    * @param extendSelection True if the current selection should be extended, false to start a new selection
    */
   moveCursor(deltaColumn, deltaRow, extendSelection) {
-    var {
-      cursorRow,
-      cursorColumn,
-      selectionEndColumn,
-      selectionEndRow
-    } = this.state;
+    var _this$state4 = this.state,
+      cursorRow = _this$state4.cursorRow,
+      cursorColumn = _this$state4.cursorColumn,
+      selectionEndColumn = _this$state4.selectionEndColumn,
+      selectionEndRow = _this$state4.selectionEndRow;
     var column = extendSelection ? selectionEndColumn : cursorColumn;
     var row = extendSelection ? selectionEndRow : cursorRow;
     if (row === null || column === null) {
-      var {
-        left,
-        top
-      } = this.state;
+      var _this$state5 = this.state,
+        left = _this$state5.left,
+        top = _this$state5.top;
       this.moveCursorToPosition(left, top, extendSelection);
     } else {
-      var {
-        model
-      } = this.props;
-      var {
-        columnCount,
-        rowCount
-      } = model;
+      var model = this.props.model;
+      var columnCount = model.columnCount,
+        rowCount = model.rowCount;
       var _left = clamp(column + deltaColumn, 0, columnCount - 1);
       var _top = clamp(row + deltaRow, 0, rowCount - 1);
       this.moveCursorToPosition(_left, _top, extendSelection);
@@ -1011,18 +924,13 @@ class Grid extends PureComponent {
    */
   moveCursorInDirection() {
     var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : GridRange.SELECTION_DIRECTION.DOWN;
-    var {
-      model
-    } = this.props;
-    var {
-      columnCount,
-      rowCount
-    } = model;
-    var {
-      cursorRow,
-      cursorColumn,
-      selectedRanges
-    } = this.state;
+    var model = this.props.model;
+    var columnCount = model.columnCount,
+      rowCount = model.rowCount;
+    var _this$state6 = this.state,
+      cursorRow = _this$state6.cursorRow,
+      cursorColumn = _this$state6.cursorColumn,
+      selectedRanges = _this$state6.selectedRanges;
     var ranges = selectedRanges.length > 0 ? selectedRanges : [GridRange.makeCell(cursorColumn, cursorRow)];
     var nextCursor = null;
     if (ranges.length === 1 && GridRange.cellCount(ranges) === 1) {
@@ -1034,10 +942,9 @@ class Grid extends PureComponent {
       nextCursor = GridRange.nextCell(GridRange.boundedRanges(ranges, columnCount, rowCount), cursorColumn, cursorRow, direction);
     }
     if (nextCursor != null) {
-      var {
-        column,
-        row
-      } = nextCursor;
+      var _nextCursor = nextCursor,
+        column = _nextCursor.column,
+        row = _nextCursor.row;
       this.setState({
         cursorColumn: column,
         cursorRow: row
@@ -1084,22 +991,18 @@ class Grid extends PureComponent {
    */
   moveViewToCell(column, row) {
     if (!this.metrics) throw new Error('metrics not set');
-    var {
-      metricCalculator
-    } = this;
-    var {
-      bottomVisible,
-      rightVisible,
-      topVisible,
-      leftVisible
-    } = this.metrics;
+    var metricCalculator = this.metricCalculator;
+    var _this$metrics7 = this.metrics,
+      bottomVisible = _this$metrics7.bottomVisible,
+      rightVisible = _this$metrics7.rightVisible,
+      topVisible = _this$metrics7.topVisible,
+      leftVisible = _this$metrics7.leftVisible;
     var metricState = this.getMetricState(this.state);
-    var {
-      top,
-      left,
-      topOffset,
-      leftOffset
-    } = this.state;
+    var _this$state7 = this.state,
+      top = _this$state7.top,
+      left = _this$state7.left,
+      topOffset = _this$state7.topOffset,
+      leftOffset = _this$state7.leftOffset;
     if (row != null && !GridUtils.isFloatingRow(row, this.metrics)) {
       if (row < topVisible) {
         top = metricCalculator.getTopForTopVisible(metricState, row);
@@ -1135,20 +1038,16 @@ class Grid extends PureComponent {
   setViewState(viewState) {
     var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (!this.metrics) throw new Error('metrics not set');
-    var {
-      isStickyBottom,
-      isStickyRight
-    } = this.props;
-    var {
-      top,
-      left
-    } = viewState;
-    var {
-      lastTop,
-      lastLeft,
-      hasVerticalBar,
-      hasHorizontalBar
-    } = this.metrics;
+    var _this$props5 = this.props,
+      isStickyBottom = _this$props5.isStickyBottom,
+      isStickyRight = _this$props5.isStickyRight;
+    var top = viewState.top,
+      left = viewState.left;
+    var _this$metrics8 = this.metrics,
+      lastTop = _this$metrics8.lastTop,
+      lastLeft = _this$metrics8.lastLeft,
+      hasVerticalBar = _this$metrics8.hasVerticalBar,
+      hasHorizontalBar = _this$metrics8.hasHorizontalBar;
     if (top != null && hasVerticalBar) {
       this.setState({
         isStuckToBottom: isStickyBottom && top >= lastTop
@@ -1178,9 +1077,7 @@ class Grid extends PureComponent {
     var isQuickEdit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var selectionRange = arguments.length > 3 ? arguments[3] : undefined;
     var value = arguments.length > 4 ? arguments[4] : undefined;
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     if (!isEditableGridModel(model)) throw new Error('model is not editable');
     var modelColumn = this.getModelColumn(column);
     var modelRow = this.getModelRow(row);
@@ -1207,9 +1104,7 @@ class Grid extends PureComponent {
    * @returns True if the value is valid for the provided cell, false otherwise
    */
   isValidForCell(column, row, value) {
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     var modelColumn = this.getModelColumn(column);
     var modelRow = this.getModelRow(row);
     return isEditableGridModel(model) && model.isValidForCell(modelColumn, modelRow, value);
@@ -1224,14 +1119,11 @@ class Grid extends PureComponent {
   pasteValue(value) {
     var _this = this;
     return _asyncToGenerator(function* () {
-      var {
-        model
-      } = _this.props;
-      var {
-        movedColumns,
-        movedRows,
-        selectedRanges
-      } = _this.state;
+      var model = _this.props.model;
+      var _this$state8 = _this.state,
+        movedColumns = _this$state8.movedColumns,
+        movedRows = _this$state8.movedRows,
+        selectedRanges = _this$state8.selectedRanges;
       try {
         assertIsEditableGridModel(model);
         if (!model.isEditable || !selectedRanges.every(range => model.isEditableRange(range))) {
@@ -1258,10 +1150,8 @@ class Grid extends PureComponent {
         // Otherwise it's a table of data
         var tableHeight = value.length;
         var tableWidth = value[0].length;
-        var {
-          columnCount,
-          rowCount
-        } = model;
+        var columnCount = model.columnCount,
+          rowCount = model.rowCount;
         var ranges = selectedRanges;
         // If each cell is a single selection, we need to update the selection to map to the newly pasted data
         // Check for
@@ -1295,9 +1185,7 @@ class Grid extends PureComponent {
         });
         yield model.setValues(edits);
       } catch (e) {
-        var {
-          onError
-        } = _this.props;
+        var onError = _this.props.onError;
         onError(e instanceof Error ? e : new Error("".concat(e)));
       }
     })();
@@ -1311,10 +1199,9 @@ class Grid extends PureComponent {
    * @returns true If the value was valid and attempted to be set, false is it was not valid
    */
   setValueForCell(column, row, value) {
-    var {
-      model,
-      onError
-    } = this.props;
+    var _this$props6 = this.props,
+      model = _this$props6.model,
+      onError = _this$props6.onError;
     assertIsEditableGridModel(model);
     var modelColumn = this.getModelColumn(column);
     var modelRow = this.getModelRow(row);
@@ -1333,14 +1220,12 @@ class Grid extends PureComponent {
    * @param value The value to set on all the ranges
    */
   setValueForRanges(ranges, value) {
-    var {
-      model,
-      onError
-    } = this.props;
-    var {
-      movedColumns,
-      movedRows
-    } = this.state;
+    var _this$props7 = this.props,
+      model = _this$props7.model,
+      onError = _this$props7.onError;
+    var _this$state9 = this.state,
+      movedColumns = _this$state9.movedColumns,
+      movedRows = _this$state9.movedRows;
     var modelRanges = GridUtils.getModelRanges(ranges, movedColumns, movedRows);
     if (isEditableGridModel(model)) {
       model.setValueForRanges(modelRanges, value).catch(err => {
@@ -1356,9 +1241,7 @@ class Grid extends PureComponent {
    * @returns True if the cell is in the current selection, false otherwise
    */
   isSelected(row, column) {
-    var {
-      selectedRanges
-    } = this.state;
+    var selectedRanges = this.state.selectedRanges;
     for (var i = 0; i < selectedRanges.length; i += 1) {
       var _selectedRange$endRow, _selectedRange$endCol;
       var selectedRange = selectedRanges[i];
@@ -1417,11 +1300,9 @@ class Grid extends PureComponent {
   drawCanvas() {
     if (!this.canvas) throw new Error('canvas is not set');
     if (!this.canvasContext) throw new Error('context not set');
-    var {
-      renderer,
-      canvasContext: context,
-      renderState
-    } = this;
+    var renderer = this.renderer,
+      context = this.canvasContext,
+      renderState = this.renderState;
     context.save();
     renderer.drawCanvas(renderState);
     context.restore();
@@ -1494,9 +1375,7 @@ class Grid extends PureComponent {
       if (result !== false) {
         var _options$stopPropagat, _options$preventDefau;
         if (keyHandler.cursor != null) {
-          ({
-            cursor
-          } = keyHandler);
+          cursor = keyHandler.cursor;
         }
         var options = result;
         if ((_options$stopPropagat = options === null || options === void 0 ? void 0 : options.stopPropagation) !== null && _options$stopPropagat !== void 0 ? _options$stopPropagat : true) event.stopPropagation();
@@ -1534,9 +1413,7 @@ class Grid extends PureComponent {
       if (result !== false) {
         var _options$stopPropagat2, _options$preventDefau2;
         if (mouseHandler.cursor != null) {
-          ({
-            cursor
-          } = mouseHandler);
+          cursor = mouseHandler.cursor;
           if (addCursorToDocument) {
             this.addDocumentCursor(cursor);
           }
@@ -1553,10 +1430,8 @@ class Grid extends PureComponent {
       cursor
     });
     if (updateCoordinates) {
-      var {
-        x,
-        y
-      } = gridPoint;
+      var x = gridPoint.x,
+        y = gridPoint.y;
       this.setState({
         mouseX: x,
         mouseY: y
@@ -1594,9 +1469,7 @@ class Grid extends PureComponent {
   }
   handleMouseUp(event) {
     // Ignore non-left click while dragging to allow drag to continue
-    var {
-      isDragging
-    } = this.state;
+    var isDragging = this.state.isDragging;
     if (isDragging && event.button !== 0) {
       return;
     }
@@ -1633,9 +1506,8 @@ class Grid extends PureComponent {
   }
   forceUpdate(callback) {
     this.setState(_ref5 => {
-      var {
-        updateRevision = 0
-      } = _ref5;
+      var _ref5$updateRevision = _ref5.updateRevision,
+        updateRevision = _ref5$updateRevision === void 0 ? 0 : _ref5$updateRevision;
       return {
         updateRevision: (updateRevision + 1) % Number.MAX_SAFE_INTEGER
       };
@@ -1647,35 +1519,28 @@ class Grid extends PureComponent {
     if (event.defaultPrevented) {
       return;
     }
-    var {
-      metricCalculator,
-      metrics
-    } = this;
+    var metricCalculator = this.metricCalculator,
+      metrics = this.metrics;
     var metricState = this.getMetricState();
     if (!metrics) throw new Error('metrics not set');
-    var {
-      lastTop,
-      lastLeft,
-      columnCount,
-      rowCount,
-      scrollableContentWidth,
-      scrollableViewportWidth,
-      scrollableContentHeight,
-      scrollableViewportHeight,
-      hasHorizontalBar,
-      hasVerticalBar
-    } = metrics;
-    var {
-      top,
-      left,
-      topOffset,
-      leftOffset
-    } = metrics;
+    var lastTop = metrics.lastTop,
+      lastLeft = metrics.lastLeft,
+      columnCount = metrics.columnCount,
+      rowCount = metrics.rowCount,
+      scrollableContentWidth = metrics.scrollableContentWidth,
+      scrollableViewportWidth = metrics.scrollableViewportWidth,
+      scrollableContentHeight = metrics.scrollableContentHeight,
+      scrollableViewportHeight = metrics.scrollableViewportHeight,
+      hasHorizontalBar = metrics.hasHorizontalBar,
+      hasVerticalBar = metrics.hasVerticalBar;
+    var top = metrics.top,
+      left = metrics.left,
+      topOffset = metrics.topOffset,
+      leftOffset = metrics.leftOffset;
     var theme = this.getTheme();
-    var {
-      deltaX,
-      deltaY
-    } = GridUtils.getScrollDelta(event, metrics.barWidth, metrics.barHeight, metrics.rowHeight, metrics.rowHeight);
+    var _GridUtils$getScrollD = GridUtils.getScrollDelta(event, metrics.barWidth, metrics.barHeight, metrics.rowHeight, metrics.rowHeight),
+      deltaX = _GridUtils$getScrollD.deltaX,
+      deltaY = _GridUtils$getScrollD.deltaY;
 
     // iterate through each column to determine column width and figure out how far to scroll
     // get column width of next column to scroll to, and subract it from the remaining distance to travel
@@ -1820,9 +1685,7 @@ class Grid extends PureComponent {
    */
   handleEditCellChange(value) {
     this.setState(_ref6 => {
-      var {
-        editingCell
-      } = _ref6;
+      var editingCell = _ref6.editingCell;
       try {
         assertIsDefined(editingCell);
         return {
@@ -1832,9 +1695,7 @@ class Grid extends PureComponent {
         };
       } catch (e) {
         // This case should _never_ happen, since the editingCell shouldn't be null if this method is called
-        var {
-          onError
-        } = this.props;
+        var onError = this.props.onError;
         onError(e instanceof Error ? e : new Error("".concat(e)));
         return null;
       }
@@ -1847,19 +1708,17 @@ class Grid extends PureComponent {
    * @param options Options for committing
    */
   handleEditCellCommit(value) {
-    var {
-      direction = SELECTION_DIRECTION.DOWN,
-      fillRange = false
-    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var {
-      editingCell,
-      selectedRanges
-    } = this.state;
+    var _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref7$direction = _ref7.direction,
+      direction = _ref7$direction === void 0 ? SELECTION_DIRECTION.DOWN : _ref7$direction,
+      _ref7$fillRange = _ref7.fillRange,
+      fillRange = _ref7$fillRange === void 0 ? false : _ref7$fillRange;
+    var _this$state0 = this.state,
+      editingCell = _this$state0.editingCell,
+      selectedRanges = _this$state0.selectedRanges;
     if (!editingCell) throw new Error('editingCell not set');
-    var {
-      column,
-      row
-    } = editingCell;
+    var column = editingCell.column,
+      row = editingCell.row;
     if (!this.isValidForCell(column, row, value)) {
       // Don't allow an invalid value to be commited, the editing cell should show an error
       if (direction === null) {
@@ -1884,39 +1743,26 @@ class Grid extends PureComponent {
     this.focus();
   }
   renderInputField() {
-    var {
-      model
-    } = this.props;
-    var {
-      editingCell
-    } = this.state;
-    var {
-      metrics
-    } = this;
+    var model = this.props.model;
+    var editingCell = this.state.editingCell;
+    var metrics = this.metrics;
     if (editingCell == null || metrics == null || !isEditableGridModel(model)) {
       return null;
     }
-    var {
-      selectionRange,
-      value,
-      isQuickEdit
-    } = editingCell;
-    var {
-      column,
-      row
-    } = editingCell;
-    var {
-      scrollX,
-      gridX,
-      gridY,
-      allColumnXs,
-      allRowYs,
-      allColumnWidths,
-      allRowHeights
-    } = metrics;
-    var {
-      activeCellSelectionBorderWidth
-    } = this.getTheme();
+    var selectionRange = editingCell.selectionRange,
+      value = editingCell.value,
+      isQuickEdit = editingCell.isQuickEdit;
+    var column = editingCell.column,
+      row = editingCell.row;
+    var scrollX = metrics.scrollX,
+      gridX = metrics.gridX,
+      gridY = metrics.gridY,
+      allColumnXs = metrics.allColumnXs,
+      allRowYs = metrics.allRowYs,
+      allColumnWidths = metrics.allColumnWidths,
+      allRowHeights = metrics.allRowHeights;
+    var _this$getTheme = this.getTheme(),
+      activeCellSelectionBorderWidth = _this$getTheme.activeCellSelectionBorderWidth;
     var x = allColumnXs.get(column);
     var y = allRowYs.get(row);
     var w = allColumnWidths.get(column);
@@ -1971,29 +1817,25 @@ class Grid extends PureComponent {
   updateRenderState() {
     if (!this.canvas) throw new Error('canvas is not set');
     if (!this.canvasContext) throw new Error('context not set');
-    var {
-      cursorColumn,
-      cursorRow,
-      draggingColumn,
-      draggingColumnSeparator,
-      draggingRow,
-      draggingRowOffset,
-      draggingRowSeparator,
-      editingCell,
-      isDraggingHorizontalScrollBar,
-      isDraggingVerticalScrollBar,
-      isDragging,
-      mouseX,
-      mouseY,
-      selectedRanges
-    } = this.state;
-    var {
-      model,
-      stateOverride
-    } = this.props;
-    var {
-      metrics
-    } = this;
+    var _this$state1 = this.state,
+      cursorColumn = _this$state1.cursorColumn,
+      cursorRow = _this$state1.cursorRow,
+      draggingColumn = _this$state1.draggingColumn,
+      draggingColumnSeparator = _this$state1.draggingColumnSeparator,
+      draggingRow = _this$state1.draggingRow,
+      draggingRowOffset = _this$state1.draggingRowOffset,
+      draggingRowSeparator = _this$state1.draggingRowSeparator,
+      editingCell = _this$state1.editingCell,
+      isDraggingHorizontalScrollBar = _this$state1.isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar = _this$state1.isDraggingVerticalScrollBar,
+      isDragging = _this$state1.isDragging,
+      mouseX = _this$state1.mouseX,
+      mouseY = _this$state1.mouseY,
+      selectedRanges = _this$state1.selectedRanges;
+    var _this$props8 = this.props,
+      model = _this$props8.model,
+      stateOverride = _this$props8.stateOverride;
+    var metrics = this.metrics;
     var context = this.canvasContext;
     var theme = this.getTheme();
     var width = this.canvas.clientWidth;
@@ -2024,12 +1866,8 @@ class Grid extends PureComponent {
     return this.renderState;
   }
   render() {
-    var {
-      children
-    } = this.props;
-    var {
-      cursor
-    } = this.state;
+    var children = this.props.children;
+    var cursor = this.state.cursor;
     return /*#__PURE__*/_jsxs("div", {
       className: "grid-wrapper",
       ref: this.canvasWrapper,