new(DataTable): Add xLarge row size. Fix forceUpdate logic (#367)

Author: williaster

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);
+      });
     }
   };
 

packages/core/src/components/DataTable/constants.tsx

@@ -1,4 +1,4 @@
-import { WidthProperties } from './types';
+import { WidthProperties, RowHeightOptions } from './types';
 
 export const SELECTION_OPTIONS = {
   ACTIVE: 'ACTIVE',
@@ -13,14 +13,15 @@ export const STATUS_OPTIONS = {
 };
 
 type HeightMap = {
-  [key: string]: number;
+  [key in RowHeightOptions]: number;
 };
 
 export const HEIGHT_TO_PX: HeightMap = {
   micro: 32,
   small: 48,
   regular: 56,
   large: 64,
+  xLarge: 80,
   jumbo: 108,
 };
 

packages/core/src/components/DataTable/types.ts

@@ -5,7 +5,7 @@ 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' | '';
 
@@ -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;
   /**

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,
   };