fix(Virtualizer/Scroller): Improve virtualization/scroll (#42)

* chore(Scroll): improve scroll * refactor(table utils): clean utils and add new tests * chore(Virtualizer): ceil instead of floor * fix(Virtualizer): use items count * test(utils): add test for getFixedItemsCountBeforeSelectedItemIndex method * chore(Virtualizer): use cache * chore(Virtualizer): rename function * test(virtualizer): adapt tests * test(Virtualizer): fix tests * test(virtualized-table): fix tests * chore(Package): update versions * chore(virtualized table story): remove the test story Co-authored-by: Amen Souissi <[email protected]>
Decathlon · Oct 28, 2021 · 4f36804 · 4f36804
1 parent 7eb2a0d
commit 4f36804
Show file tree

Hide file tree

Showing 11 changed files with 315 additions and 147 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@decathlon/react-table",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React components for efficiently rendering large tabular data",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
@@ -8,7 +8,7 @@ import {
   getTreesLength,
   getAllIndexesMap,
   IIndexesMap,
-  getFixedElementFixedSizeSum,
+  getFixedElementsWithCustomSize,
   relativeToAbsoluteIndexes,
   getIndexesIdsMapping,
   IIndexesIdsMapping,
@@ -18,6 +18,7 @@ import {
   IRelativeIndexesMap,
   IElevateds,
   getDenseColumns,
+  FixedCustomSizesElements,
 } from "../utils/table";
 import SelectionHandler, { ISelection, ISelectionHandlerOptionalProps } from "../table-selection/selection-handler";
 import { ROW_SPAN_WIDTH } from "../constants";
@@ -67,20 +68,16 @@ class Table<IDataCoordinates = any> extends React.Component<ITableProps<IDataCoo
 
   private globalColumnProps?: IColumnOptions;
 
-  private fixedCellsHeight: {
-    sum: number;
-    count: number;
-  } = {
+  private fixedCellsHeight: FixedCustomSizesElements = {
     sum: 0,
     count: 0,
+    customSizes: {},
   };
 
-  private fixedCellsWidth: {
-    sum: number;
-    count: number;
-  } = {
+  private fixedCellsWidth: FixedCustomSizesElements = {
     sum: 0,
     count: 0,
+    customSizes: {},
   };
 
   private virtualizer: React.RefObject<Virtualizer> = React.createRef<Virtualizer>();
@@ -106,8 +103,8 @@ class Table<IDataCoordinates = any> extends React.Component<ITableProps<IDataCoo
       fixedRowsIndexes: this.getFixedRowsIndexes(initialOpenedTrees, indexesMapping.relative),
     };
     if (isVirtualized) {
-      this.fixedCellsHeight = getFixedElementFixedSizeSum(rows, fixedRows, hiddenRows);
-      this.fixedCellsWidth = getFixedElementFixedSizeSum(columns, fixedColumns, hiddenColumns);
+      this.fixedCellsHeight = getFixedElementsWithCustomSize(rows, fixedRows, hiddenRows);
+      this.fixedCellsWidth = getFixedElementsWithCustomSize(columns, fixedColumns, hiddenColumns);
     }
   }
 

diff --git a/src/components/utils/table.tsx b/src/components/utils/table.tsx
@@ -352,19 +352,27 @@ export const getMouseClickButton = (clickCode: number): MouseClickButtons => {
   }
 };
 
+export interface FixedCustomSizesElements {
+  sum: number;
+  count: number;
+  // key === item index and value item width
+  customSizes: Record<number, number>;
+}
+
 /**
  * Calculate the  size of all fixed elements with a custom size and count those elements
  * @param elements
  * @param fixedElements
  */
-export const getFixedElementFixedSizeSum = (
+export const getFixedElementsWithCustomSize = (
   elements: IRow[] | { [index: number]: IColumn } = [],
   fixedElements?: number[],
   hiddenIndexes: number[] = []
-) => {
+): FixedCustomSizesElements => {
   let fixedElementFixedSizeSum = {
     sum: 0,
     count: 0,
+    customSizes: {},
   };
   if (fixedElements) {
     fixedElementFixedSizeSum = fixedElements.reduce(
@@ -375,12 +383,14 @@ export const getFixedElementFixedSizeSum = (
           ? {
               sum: currFixedElementFixedSizeSum.sum + size,
               count: currFixedElementFixedSizeSum.count + 1,
+              customSizes: { ...currFixedElementFixedSizeSum.customSizes, [index]: size },
             }
           : currFixedElementFixedSizeSum;
       },
       {
         sum: 0,
         count: 0,
+        customSizes: {},
       }
     );
   }
@@ -621,3 +631,41 @@ export const getScrollbarSize = () => {
 
   return scrollbarSize;
 };
+
+/**
+ * Get the number of fixed items that are placed before the selectedItemIndex
+ */
+export const getFixedItemsCountBeforeSelectedItemIndex = (fixedItems: number[], selectedItemIndex: number): number => {
+  let beforeFixedColumnsCount = 0;
+
+  fixedItems.findIndex((fixedColumnIndex) => {
+    if (fixedColumnIndex > selectedItemIndex) {
+      return true;
+    }
+    beforeFixedColumnsCount += 1;
+    return false;
+  });
+  return beforeFixedColumnsCount;
+};
+/**
+ * ex itemsLength=4; itemsSizes={ 0:40 }; defaultCellSize=10; hiddenItems=[1] =>
+ *  [0, 40, 40, 50]
+ * @param itemsLength number of total items
+ * @param itemsSizes custom item sizes
+ * @param defaultCellSize default item size if no custom item size
+ * @param hiddenItems hidden items (size == 0)
+ * @returns
+ */
+export const getIndexScrollMapping = (
+  itemsLength: number,
+  itemsSizes: Record<number, number> = {},
+  defaultItemSize: number,
+  hiddenItems: number[]
+): number[] => {
+  const result: number[] = [0];
+  for (let i = 1; i < itemsLength; i++) {
+    const prevItemSize = hiddenItems.includes(i - 1) ? 0 : itemsSizes[i - 1] || defaultItemSize;
+    result[i] = (result[i - 1] || 0) + prevItemSize;
+  }
+  return result;
+};