chore(virtualizer): include scrollbar size

Author: amen-souissi

src/components/utils/table.tsx

@@ -104,7 +104,7 @@ interface CacheProps {
   itemsCount?: number;
   /** Minimal size of a item */
   minItemSize: number;
-  /** Sum of the size of fixed items with a pre-defined size */
+  /** Sum of the custom items sizes */
   customSizesElements: CustomSizesElements;
   /** A pre-defined padding of the grid */
   padding: number;
@@ -772,9 +772,9 @@ export const getVirtualizerCache = ({
     visibleItemIndexes: {},
     ignoredIndexes: {},
   };
-  const { fixed: fixedCustomSizesItems, scrollable: scrollableCustomSizesItems, customSizes } = customSizesElements;
+  const { fixed: fixedCustomSizesItems, scrollable: scrollableCustomSizesItems } = customSizesElements;
   /**
-   * Size allocated to the verticalPadding and the fixed items that have a custom size specified by the user.
+   * Size allocated to the padding and the fixed items that have a custom size specified by the user.
    * We only take into account visible fixed items  with a custom size.
    */
   const extraItemsSize = fixedCustomSizesItems.sum + padding;
@@ -802,8 +802,6 @@ export const getVirtualizerCache = ({
   ignoredIndexes.forEach((ignoredIndex) => {
     cache.ignoredIndexes[ignoredIndex] = true;
   });
-  // Returns the distance (in pixels) between the different items
-  cache.itemIndexesScrollMapping = getIndexScrollMapping(itemsLength, customSizes, cache.itemSize, ignoredIndexes);
   // The size of the scrollable element area
   cache.scrollableItemsSize =
     scrollableItemsSize - (cache.visibleFixedItems.length - fixedCustomSizesItems.count) * cache.itemSize;

src/components/virtualizer.tsx

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { isEqual } from "lodash";
 
-import Scroller, { IOnScroll, VERTICAL_SCROLL_DIRECTIONS, HORIZONTAL_SCROLL_DIRECTIONS } from "./scroller";
+import Scroller, { IOnScroll, VERTICAL_SCROLL_DIRECTIONS, HORIZONTAL_SCROLL_DIRECTIONS, SCROLLBAR_SIZE } from "./scroller";
 import {
   getVisibleIndexesInsideDatalength,
   IElevateds,
@@ -12,6 +12,7 @@ import {
   getVirtualizerCache,
   getVisibleItemIndexes,
   getElevatedIndexes,
+  getIndexScrollMapping,
 } from "./utils/table";
 import { DEFAULT_ROW_HEIGHT, MIN_COLUMN_WIDTH } from "./constants";
 import { Nullable } from "./typing";
@@ -252,26 +253,56 @@ class Virtualizer extends React.Component<IVirtualizerProps, IState> {
     } = this.props;
     const minCellHeight = minRowHeight || DEFAULT_ROW_HEIGHT;
     const minCellWidth = minColumnWidth || MIN_COLUMN_WIDTH;
-    this.verticalData = getVirtualizerCache({
-      minItemSize: minCellHeight,
-      fixedItems: fixedRows,
-      padding: horizontalPadding,
-      hiddenItems: hiddenRows,
-      customSizesElements: customCellsHeight,
-      containerSize: height,
-      itemsLength: rowsLength,
-      itemsCount: rowsCount,
-    });
-    this.horizontalData = getVirtualizerCache({
-      minItemSize: minCellWidth,
-      fixedItems: fixedColumns,
-      padding: verticalPadding,
-      hiddenItems: hiddenColumns,
-      customSizesElements: customCellsWidth,
-      containerSize: width,
-      itemsLength: columnsLength,
-      itemsCount: columnsCount,
-    });
+    const setverticalData = (padding: number) => {
+      this.verticalData = getVirtualizerCache({
+        minItemSize: minCellHeight,
+        fixedItems: fixedRows,
+        padding,
+        hiddenItems: hiddenRows,
+        customSizesElements: customCellsHeight,
+        containerSize: height,
+        itemsLength: rowsLength,
+        itemsCount: rowsCount,
+      });
+    };
+
+    const sethorizontalData = (padding: number) => {
+      this.horizontalData = getVirtualizerCache({
+        minItemSize: minCellWidth,
+        fixedItems: fixedColumns,
+        padding,
+        hiddenItems: hiddenColumns,
+        customSizesElements: customCellsWidth,
+        containerSize: width,
+        itemsLength: columnsLength,
+        itemsCount: columnsCount,
+      });
+    };
+
+    setverticalData(horizontalPadding);
+
+    const horizontalScrollBarSize =
+      this.verticalData.virtualSize > (this.verticalData.scrollableItemsSize || 0) ? SCROLLBAR_SIZE : 0;
+    sethorizontalData(verticalPadding + horizontalScrollBarSize);
+
+    const verticalScrollBarSize =
+      this.horizontalData.virtualSize > (this.horizontalData.scrollableItemsSize || 0) ? SCROLLBAR_SIZE : 0;
+    setverticalData(verticalScrollBarSize + horizontalPadding);
+
+    // Returns the distance (in pixels) between the different items
+    this.verticalData.itemIndexesScrollMapping = getIndexScrollMapping(
+      rowsLength,
+      customCellsHeight.customSizes,
+      this.verticalData.itemSize,
+      [...this.verticalData.visibleFixedItems, ...hiddenRows]
+    );
+    // Returns the distance (in pixels) between the different items
+    this.horizontalData.itemIndexesScrollMapping = getIndexScrollMapping(
+      columnsLength,
+      customCellsWidth.customSizes,
+      this.horizontalData.itemSize,
+      [...this.horizontalData.visibleFixedItems, ...hiddenColumns]
+    );
   };
 
   private getVisibleRowIndexes = (scrollValue = 0) => {

stories/components/table/virtualized-table.stories.tsx

@@ -92,7 +92,7 @@ storiesOf("Table/Virtualized", module)
             isVirtualized
             isSpan={boolean("isSpan", false)}
             virtualizerProps={{
-              // hiddenColumns: [13, 32],
+              hiddenColumns: [13, 32],
               fixedRows: object("fixedRows", [0, 50, 97]),
               fixedColumns: object("fixedColumns", [0, 1, 2, 3, 4]),
             }}
@@ -103,7 +103,7 @@ storiesOf("Table/Virtualized", module)
     { notes: { markdown: Readme } }
   )
   .add(
-    "Absolute column and row",
+    "Fixed columns and rows",
     () => {
       const props = generateTable(3, 300, {});
       return (
@@ -166,7 +166,6 @@ storiesOf("Table/Virtualized", module)
           isSpan={boolean("isSpan", false)}
           virtualizerProps={{
             rowsCount: 10,
-            // columnsCount: 10,
             fixedRows: object("fixedRows", [0, 1]),
             fixedColumns: object("fixedColumns", [0, 5]),
           }}

test/components/__snapshots__/scroller.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`Scroller component should render a vertical scroller 1`] = `
     style={
       Object {
         "minHeight": 300,
-        "minWidth": 285,
+        "minWidth": 300,
       }
     }
   />
@@ -28,7 +28,7 @@ exports[`Scroller component should render a vertical scroller 1`] = `
     style={
       Object {
         "minHeight": 3700,
-        "minWidth": 315,
+        "minWidth": 300,
       }
     }
   />
@@ -53,7 +53,7 @@ exports[`Scroller component should render an horizontal scroller 1`] = `
     className="scroller-content"
     style={
       Object {
-        "minHeight": 285,
+        "minHeight": 300,
         "minWidth": 300,
       }
     }
@@ -62,7 +62,7 @@ exports[`Scroller component should render an horizontal scroller 1`] = `
     className="scroller-scrollbar"
     style={
       Object {
-        "minHeight": 315,
+        "minHeight": 300,
         "minWidth": 4000,
       }
     }
@@ -88,17 +88,17 @@ exports[`Scroller component should render the default scroller 1`] = `
     className="scroller-content"
     style={
       Object {
-        "minHeight": 285,
-        "minWidth": 285,
+        "minHeight": 300,
+        "minWidth": 300,
       }
     }
   />
   <div
     className="scroller-scrollbar"
     style={
       Object {
-        "minHeight": 3715,
-        "minWidth": 4015,
+        "minHeight": 3700,
+        "minWidth": 4000,
       }
     }
   />

test/tests.entry.js

@@ -9,4 +9,4 @@ Enzyme.configure({ adapter: new Adapter() });
 
 window.ga = function () {};
 
-CommonUtils.getScrollbarSize = jest.fn(() => 15);
+CommonUtils.getScrollbarSize = jest.fn(() => 0);