fix(DataTable): rowHeight xLarge => xlarge (#368)

* fix(DataTable): Update rowHeight prop value from xLarge => xlarge

* fix(DataTable): clear timeout on unmount

* fix(DataTable): use existing timeout if it exists, don't create a new one

Author: williaster

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

@@ -141,14 +141,20 @@ export class DataTable extends React.Component<DataTableProps & WithStylesProps,
       });
     } 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();
-      });
+      if (!this.timeoutId) {
+        this.timeoutId = window.setTimeout(() => {
+          this.cache.clearAll();
+          this.forceUpdate();
+          this.timeoutId = 0;
+        });
+      }
     }
   }
 
+  componentWillUnmount() {
+    if (this.timeoutId) window.clearTimeout(this.timeoutId);
+  }
+
   private getTableHeight = (expandedDataList: ExpandedRow[]): number => {
     const { height, rowHeight, showAllRows, dynamicRowHeight } = this.props;
     // @ts-ignore _rowHeightCache is missing from DataTable types
@@ -222,11 +228,13 @@ 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.
-      if (this.timeoutId) window.clearTimeout(this.timeoutId);
-      this.timeoutId = window.setTimeout(() => {
-        this.cache.clearAll();
-        this.forceUpdate();
-      });
+      if (!this.timeoutId) {
+        this.timeoutId = window.setTimeout(() => {
+          this.cache.clearAll();
+          this.forceUpdate();
+          this.timeoutId = 0;
+        });
+      }
     }
   };
 

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

@@ -21,7 +21,7 @@ export const HEIGHT_TO_PX: HeightMap = {
   small: 48,
   regular: 56,
   large: 64,
-  xLarge: 80,
+  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 = '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' | '';