From 35b9cd975d017d2c6066250e56edeb333d77f304 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Thu, 30 Apr 2020 15:44:03 -0700
Subject: [PATCH 1/4] new(DataTable): Add xLarge rowHeight option, fix types

---
 .../src/components/DataTable/constants.tsx     | 17 +++++++++--------
 .../core/src/components/DataTable/types.ts     | 18 ++++++++++--------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/core/src/components/DataTable/constants.tsx b/packages/core/src/components/DataTable/constants.tsx
index a3a479f41..8e7fb753c 100644
--- a/packages/core/src/components/DataTable/constants.tsx
+++ b/packages/core/src/components/DataTable/constants.tsx
@@ -1,19 +1,19 @@
-import { WidthProperties } from './types';
+import { WidthProperties, RowHeightOptions } from "./types";
 
 export const SELECTION_OPTIONS = {
-  ACTIVE: 'ACTIVE',
-  DISABLED: 'DISABLED',
-  INACTIVE: 'INACTIVE',
-  HAS_ACTIVE_CHILD: 'HAS_ACTIVE_CHILD',
+  ACTIVE: "ACTIVE",
+  DISABLED: "DISABLED",
+  INACTIVE: "INACTIVE",
+  HAS_ACTIVE_CHILD: "HAS_ACTIVE_CHILD",
 };
 
 export const STATUS_OPTIONS = {
-  ALERT: 'ALERT',
-  WARNING: 'WARNING',
+  ALERT: "ALERT",
+  WARNING: "WARNING",
 };
 
 type HeightMap = {
-  [key: string]: number;
+  [key in RowHeightOptions]: number;
 };
 
 export const HEIGHT_TO_PX: HeightMap = {
@@ -21,6 +21,7 @@ export const HEIGHT_TO_PX: HeightMap = {
   small: 48,
   regular: 56,
   large: 64,
+  xLarge: 80,
   jumbo: 108,
 };
 
diff --git a/packages/core/src/components/DataTable/types.ts b/packages/core/src/components/DataTable/types.ts
index e19702451..f9e471a7b 100644
--- a/packages/core/src/components/DataTable/types.ts
+++ b/packages/core/src/components/DataTable/types.ts
@@ -1,19 +1,19 @@
-import React from 'react';
-import { SortDirectionType, Table } from 'react-virtualized';
-import { WithStylesProps } from '../../composers/withStyles';
-import { DataTable } from './DataTable';
+import React from "react";
+import { SortDirectionType, Table } from "react-virtualized";
+import { WithStylesProps } from "../../composers/withStyles";
+import { DataTable } from "./DataTable";
 
 export type DataTableRef = (instance: DataTable) => void;
 export type TableRef = React.RefObject<Table>;
-export type RowHeightOptions = string;
+export type RowHeightOptions = "micro" | "small" | "regular" | "large" | "xLarge" | "jumbo";
 export type HeightOptions = RowHeightOptions | undefined;
-export type ColumnLabelCase = 'sentence' | 'title' | 'uppercase' | '';
+export type ColumnLabelCase = "sentence" | "title" | "uppercase" | "";
 
 export type DefaultDataTableProps = keyof DataTableProps;
 
 export type SortByValueAccessor<T extends GenericRow = GenericRow> = (
   row: T,
-  columnKey: string,
+  columnKey: string
 ) => unknown;
 
 export interface DataTableProps {
@@ -45,6 +45,8 @@ export interface DataTableProps {
   height?: number;
   /** References row fields to render as columns, infered from data if not specified. */
   keys?: string[];
+  /** If dynamicRowHeight is enabled, this sets the maximum value for measured row height. */
+  maximumDynamicRowHeight?: number;
   /** If dynamicRowHeight is enabled, this sets the minimum value for measured row height. */
   minimumDynamicRowHeight?: number;
   /**
@@ -208,7 +210,7 @@ export type RendererProps<T = RowData> = {
   /** Whether or not zebra mode is enabled. */
   zebra: boolean;
   /** Theme from Lunar. */
-  theme: WithStylesProps['theme'];
+  theme: WithStylesProps["theme"];
 };
 
 export type Renderer<T = RowData> = React.ComponentType<RendererProps<T>>;

From 00dd92ccade594f9242f57c48f1973c49353c1ef Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Thu, 30 Apr 2020 15:44:53 -0700
Subject: [PATCH 2/4] fix(DataTable): Add clearTimeout logic for forced
 updates, remove unneeded forceUpdate

---
 .../src/components/DataTable/DataTable.tsx    | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/core/src/components/DataTable/DataTable.tsx b/packages/core/src/components/DataTable/DataTable.tsx
index ff320b087..de6276e84 100644
--- a/packages/core/src/components/DataTable/DataTable.tsx
+++ b/packages/core/src/components/DataTable/DataTable.tsx
@@ -66,6 +66,8 @@ export class DataTable extends React.Component<DataTableProps & WithStylesProps,
     sortDirection: this.props.sortDirectionOverride!,
   };
 
+  timeoutId: number = 0;
+
   constructor(props: DataTableProps & WithStylesProps) {
     super(props);
     if (this.props.dataTableRef) {
@@ -114,10 +116,7 @@ export class DataTable extends React.Component<DataTableProps & WithStylesProps,
     const { dynamicRowHeight, data, filterData, width, height, sortByCacheKey } = this.props;
     const { sortBy, sortDirection } = this.state;
     const dimensionsChanged = width !== prevProps.width || height !== prevProps.height;
-    const sortChanged =
-      sortBy !== prevState.sortBy ||
-      sortDirection !== prevState.sortDirection ||
-      sortByCacheKey !== prevProps.sortByCacheKey;
+    const sortChanged = sortByCacheKey !== prevProps.sortByCacheKey;
     const sortedData: IndexedParentRow[] = this.getData(
       data!,
       sortBy,
@@ -134,20 +133,19 @@ export class DataTable extends React.Component<DataTableProps & WithStylesProps,
             x.metadata.originalIndex !== oldFilteredData[i].metadata.originalIndex,
         ));
 
-    if (dynamicRowHeight && (filteredDataChanged || dimensionsChanged || sortChanged)) {
-      // We need to make sure the cache is cleared before React tries to re-render.
-      window.setTimeout(() => {
-        this.cache.clearAll();
-        this.forceUpdate();
-      }, 0);
-    }
-
     if (this.props.data !== prevProps.data) {
       this.keys = getKeys(this.props.keys!, this.props.data!);
 
       this.setState({
         expandedRows: new Set(),
       });
+    } else if (dynamicRowHeight && (filteredDataChanged || dimensionsChanged || sortChanged)) {
+      // We need to make sure the cache is cleared before React tries to re-render.
+      if (this.timeoutId) window.clearTimeout(this.timeoutId);
+      this.timeoutId = window.setTimeout(() => {
+        this.cache.clearAll();
+        this.forceUpdate();
+      });
     }
   }
 
@@ -224,10 +222,11 @@ export class DataTable extends React.Component<DataTableProps & WithStylesProps,
 
     if (dynamicRowHeight) {
       // We need to make sure the cache is cleared before React tries to re-render.
-      window.setTimeout(() => {
+      if (this.timeoutId) window.clearTimeout(this.timeoutId);
+      this.timeoutId = window.setTimeout(() => {
         this.cache.clearAll();
         this.forceUpdate();
-      }, 0);
+      });
     }
   };
 

From 9e478ba311997b2a4223220a7f186ff1a32bc70d Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Thu, 30 Apr 2020 15:52:27 -0700
Subject: [PATCH 3/4] fix(DataTable): fix prettier

---
 .../core/src/components/DataTable/constants.tsx  | 14 +++++++-------
 packages/core/src/components/DataTable/types.ts  | 16 ++++++++--------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/components/DataTable/constants.tsx b/packages/core/src/components/DataTable/constants.tsx
index 8e7fb753c..2767610d1 100644
--- a/packages/core/src/components/DataTable/constants.tsx
+++ b/packages/core/src/components/DataTable/constants.tsx
@@ -1,15 +1,15 @@
-import { WidthProperties, RowHeightOptions } from "./types";
+import { WidthProperties, RowHeightOptions } from './types';
 
 export const SELECTION_OPTIONS = {
-  ACTIVE: "ACTIVE",
-  DISABLED: "DISABLED",
-  INACTIVE: "INACTIVE",
-  HAS_ACTIVE_CHILD: "HAS_ACTIVE_CHILD",
+  ACTIVE: 'ACTIVE',
+  DISABLED: 'DISABLED',
+  INACTIVE: 'INACTIVE',
+  HAS_ACTIVE_CHILD: 'HAS_ACTIVE_CHILD',
 };
 
 export const STATUS_OPTIONS = {
-  ALERT: "ALERT",
-  WARNING: "WARNING",
+  ALERT: 'ALERT',
+  WARNING: 'WARNING',
 };
 
 type HeightMap = {
diff --git a/packages/core/src/components/DataTable/types.ts b/packages/core/src/components/DataTable/types.ts
index f9e471a7b..edf8a736a 100644
--- a/packages/core/src/components/DataTable/types.ts
+++ b/packages/core/src/components/DataTable/types.ts
@@ -1,19 +1,19 @@
-import React from "react";
-import { SortDirectionType, Table } from "react-virtualized";
-import { WithStylesProps } from "../../composers/withStyles";
-import { DataTable } from "./DataTable";
+import React from 'react';
+import { SortDirectionType, Table } from 'react-virtualized';
+import { WithStylesProps } from '../../composers/withStyles';
+import { DataTable } from './DataTable';
 
 export type DataTableRef = (instance: DataTable) => void;
 export type TableRef = React.RefObject<Table>;
-export type RowHeightOptions = "micro" | "small" | "regular" | "large" | "xLarge" | "jumbo";
+export type RowHeightOptions = 'micro' | 'small' | 'regular' | 'large' | 'xLarge' | 'jumbo';
 export type HeightOptions = RowHeightOptions | undefined;
-export type ColumnLabelCase = "sentence" | "title" | "uppercase" | "";
+export type ColumnLabelCase = 'sentence' | 'title' | 'uppercase' | '';
 
 export type DefaultDataTableProps = keyof DataTableProps;
 
 export type SortByValueAccessor<T extends GenericRow = GenericRow> = (
   row: T,
-  columnKey: string
+  columnKey: string,
 ) => unknown;
 
 export interface DataTableProps {
@@ -210,7 +210,7 @@ export type RendererProps<T = RowData> = {
   /** Whether or not zebra mode is enabled. */
   zebra: boolean;
   /** Theme from Lunar. */
-  theme: WithStylesProps["theme"];
+  theme: WithStylesProps['theme'];
 };
 
 export type Renderer<T = RowData> = React.ComponentType<RendererProps<T>>;

From 1376e360d0d5f7b7333304dec7bfb44e7ea77fc9 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Thu, 30 Apr 2020 16:21:36 -0700
Subject: [PATCH 4/4] fix(DataTable): update types in tests

---
 packages/core/test/components/DataTable.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/test/components/DataTable.test.tsx b/packages/core/test/components/DataTable.test.tsx
index 89f6ad6d2..9fd1efe2f 100644
--- a/packages/core/test/components/DataTable.test.tsx
+++ b/packages/core/test/components/DataTable.test.tsx
@@ -384,14 +384,14 @@ describe('<DataTable /> does not break with weird props', () => {
     width: 500,
     tableHeaderLabel: 'My Table',
     zebra: true,
-    rowHeight: 'regular',
+    rowHeight: 'regular' as const,
     columnMetadata,
     columnToLabel: {
       name: 'CUSTOM NAME',
     },
     expandable: true,
-    columnHeaderHeight: 'micro',
-    tableHeaderHeight: 'large',
+    columnHeaderHeight: 'micro' as const,
+    tableHeaderHeight: 'large' as const,
     keys: ['name'],
     showRowDividers: true,
   };