From 841871e9af59447941415b9756eb2b527adee31e Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Tue, 1 Mar 2022 15:49:39 +0000
Subject: [PATCH 1/2] [v4] [table] fix lifecycle bugs scrolling + resizing

---
 packages/table/src/table2.tsx | 54 ++++++-----------------------------
 1 file changed, 9 insertions(+), 45 deletions(-)

diff --git a/packages/table/src/table2.tsx b/packages/table/src/table2.tsx
index a9ed99a541..b6ddbb2c45 100644
--- a/packages/table/src/table2.tsx
+++ b/packages/table/src/table2.tsx
@@ -108,7 +108,9 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
         }
 
         const newChildrenArray = React.Children.toArray(children) as Array<React.ReactElement<ColumnProps>>;
-        const didChildrenChange = newChildrenArray !== state.childrenArray;
+        const didChildrenChange = !newChildrenArray.every(
+            (child, index) => child.key === state.childrenArray[index].key,
+        );
         const numCols = newChildrenArray.length;
 
         let newColumnWidths = columnWidths;
@@ -537,41 +539,15 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
         this.didCompletelyMount = false;
     }
 
-    public getSnapshotBeforeUpdate() {
-        const { viewportRect } = this.state;
-
-        if (viewportRect === undefined) {
-            return {};
-        }
-
-        const grid = this.validateGrid();
-        const tableBottom = grid.getCumulativeHeightAt(grid.numRows - 1);
-        const tableRight = grid.getCumulativeWidthAt(grid.numCols - 1);
-
-        const nextScrollTop =
-            tableBottom < viewportRect.top + viewportRect.height
-                ? // scroll the last row into view
-                  Math.max(0, tableBottom - viewportRect.height)
-                : undefined;
-
-        const nextScrollLeft =
-            tableRight < viewportRect.left + viewportRect.width
-                ? // scroll the last column into view
-                  Math.max(0, tableRight - viewportRect.width)
-                : undefined;
-
-        // these will only be defined if they differ from viewportRect
-        return { nextScrollLeft, nextScrollTop };
-    }
-
-    public componentDidUpdate(prevProps: TableProps, prevState: TableState, snapshot: TableSnapshot) {
-        super.componentDidUpdate(prevProps, prevState, snapshot);
+    public componentDidUpdate(prevProps: TableProps, prevState: TableState) {
+        super.componentDidUpdate(prevProps, prevState);
         this.hotkeysImpl.setState(this.state);
         this.hotkeysImpl.setProps(this.props);
 
-        const didChildrenChange =
-            (React.Children.toArray(this.props.children) as Array<React.ReactElement<ColumnProps>>) !==
-            this.state.childrenArray;
+        const newChildrenArray = React.Children.toArray(this.props.children) as Array<React.ReactElement<ColumnProps>>;
+        const didChildrenChange = !newChildrenArray.every(
+            (child, index) => child.key === this.state.childrenArray[index].key,
+        );
 
         const shouldInvalidateGrid =
             didChildrenChange ||
@@ -589,18 +565,6 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
             this.updateLocator();
         }
 
-        // When true, we'll need to imperatively synchronize quadrant views after
-        // the update. This check lets us avoid expensively diff'ing columnWidths
-        // and rowHeights in <TableQuadrantStack> on each update.
-        const didUpdateColumnOrRowSizes =
-            !CoreUtils.arraysEqual(this.state.columnWidths, prevState.columnWidths) ||
-            !CoreUtils.arraysEqual(this.state.rowHeights, prevState.rowHeights);
-
-        if (didUpdateColumnOrRowSizes) {
-            this.quadrantStackInstance?.synchronizeQuadrantViews();
-            this.syncViewportPosition(snapshot);
-        }
-
         const shouldInvalidateHotkeys =
             this.props.getCellClipboardData !== prevProps.getCellClipboardData ||
             this.props.enableFocusedCell !== prevProps.enableFocusedCell ||

From 97a7dd40469692690ce2f039b2f5e9b265c96744 Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Tue, 1 Mar 2022 16:01:42 +0000
Subject: [PATCH 2/2] clean up a bit

---
 packages/table/src/table2.tsx     | 12 +++++-------
 packages/table/src/table2Utils.ts | 16 +++++++++++++++-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/table/src/table2.tsx b/packages/table/src/table2.tsx
index b6ddbb2c45..6a08a9d1e9 100644
--- a/packages/table/src/table2.tsx
+++ b/packages/table/src/table2.tsx
@@ -52,7 +52,7 @@ import {
     resizeRowsByApproximateHeight,
     resizeRowsByTallestCell,
 } from "./resizeRows";
-import { getHotkeysFromProps, isSelectionModeEnabled } from "./table2Utils";
+import { compareChildren, getHotkeysFromProps, isSelectionModeEnabled } from "./table2Utils";
 import { TableBody } from "./tableBody";
 import { TableHotkeys } from "./tableHotkeys";
 import type { TableProps, TablePropsDefaults, TablePropsWithDefaults } from "./tableProps";
@@ -108,9 +108,7 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
         }
 
         const newChildrenArray = React.Children.toArray(children) as Array<React.ReactElement<ColumnProps>>;
-        const didChildrenChange = !newChildrenArray.every(
-            (child, index) => child.key === state.childrenArray[index].key,
-        );
+        const didChildrenChange = !compareChildren(newChildrenArray, state.childrenArray);
         const numCols = newChildrenArray.length;
 
         let newColumnWidths = columnWidths;
@@ -544,9 +542,9 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
         this.hotkeysImpl.setState(this.state);
         this.hotkeysImpl.setProps(this.props);
 
-        const newChildrenArray = React.Children.toArray(this.props.children) as Array<React.ReactElement<ColumnProps>>;
-        const didChildrenChange = !newChildrenArray.every(
-            (child, index) => child.key === this.state.childrenArray[index].key,
+        const didChildrenChange = !compareChildren(
+            React.Children.toArray(this.props.children) as Array<React.ReactElement<ColumnProps>>,
+            this.state.childrenArray,
         );
 
         const shouldInvalidateGrid =
diff --git a/packages/table/src/table2Utils.ts b/packages/table/src/table2Utils.ts
index 629d991c0b..a54cbb9381 100644
--- a/packages/table/src/table2Utils.ts
+++ b/packages/table/src/table2Utils.ts
@@ -17,9 +17,10 @@ import * as React from "react";
 
 import { HotkeyConfig } from "@blueprintjs/core";
 
+import type { ColumnProps } from "./column";
 import { RegionCardinality } from "./regions";
 import type { TableHotkeys } from "./tableHotkeys";
-import { TablePropsWithDefaults } from "./tableProps";
+import type { TablePropsWithDefaults } from "./tableProps";
 
 export function isSelectionModeEnabled(
     props: TablePropsWithDefaults,
@@ -142,3 +143,16 @@ export function getHotkeysFromProps(props: TablePropsWithDefaults, hotkeysImpl:
 
     return hotkeys;
 }
+
+/**
+ * @returns true if new and old children arrays are the same
+ */
+export function compareChildren(
+    newChildren: Array<React.ReactElement<ColumnProps>>,
+    oldChildren: Array<React.ReactElement<ColumnProps>>,
+): boolean {
+    return (
+        newChildren.length === oldChildren.length &&
+        newChildren.every((child, index) => child.key === oldChildren[index].key)
+    );
+}