fix(react-grid): fix hidden tall rows in VirtualTable (#747)

fixes #745

Author: kvet

packages/dx-react-grid/src/components/table-layout/virtual-table-utils.js

@@ -10,25 +10,29 @@ const ENDING_KEY = 'ending';
 export const getVisibleRows = (rows, viewportTop, viewportHeight, getRowHeight) => {
   const result = [];
 
-  const bottom = viewportTop + viewportHeight;
-  let position = 0;
+  const viewportBottom = viewportTop + viewportHeight;
+  let topPosition = 0;
   for (let i = 0; i < rows.length; i += 1) {
     const row = rows[i];
-    const last = result[result.length - 1];
+    const lastIndex = result.length - 1;
+    const last = result[lastIndex];
 
     const height = getRowHeight(row);
-    const nextPosition = position + height;
+    const bottomPosition = topPosition + height;
     if (
-      (viewportTop <= position && position < bottom
-        && viewportTop < nextPosition && nextPosition <= bottom) ||
-      (viewportTop > position && nextPosition > bottom)
+      (topPosition >= viewportTop && topPosition < viewportBottom) ||
+      (bottomPosition > viewportTop && bottomPosition <= viewportBottom) ||
+      (topPosition < viewportTop && bottomPosition > viewportBottom)
     ) {
       if (last && last.type === STUB_TYPE) {
         rows.slice(Math.max(0, i - OVERSCAN), i).forEach((overscanRow) => {
           const overscanRowSize = getRowHeight(overscanRow);
           last.height -= overscanRowSize;
           result.push({ type: OVERSCAN_TYPE, height: overscanRowSize, row: overscanRow });
         });
+        if (last.height === 0) {
+          result.splice(lastIndex, 1);
+        }
       }
       result.push({ type: VISIBLE_TYPE, height, row });
     } else if (last && last.type === STUB_TYPE) {
@@ -45,7 +49,7 @@ export const getVisibleRows = (rows, viewportTop, viewportHeight, getRowHeight)
     } else {
       result.push({ type: STUB_TYPE, key: STARTING_KEY, height });
     }
-    position = nextPosition;
+    topPosition = bottomPosition;
   }
 
   return result;

packages/dx-react-grid/src/components/table-layout/virtual-table-utils.test.js

@@ -13,14 +13,16 @@ describe('VirtualTableLaout utils', () => {
         { key: 3, height: 40 },
         { key: 4, height: 40 },
         { key: 5, height: 40 },
+        { key: 6, height: 40 },
       ];
 
       expect(getVisibleRows(rows, 0, 50, row => row.height))
         .toEqual([
           { type: 'visible', height: 40, row: rows[0] },
-          { type: 'overscan', height: 40, row: rows[1] },
+          { type: 'visible', height: 40, row: rows[1] },
           { type: 'overscan', height: 40, row: rows[2] },
           { type: 'overscan', height: 40, row: rows[3] },
+          { type: 'overscan', height: 40, row: rows[4] },
           { type: 'stub', height: 80, key: 'ending' },
         ]);
     });
@@ -33,15 +35,17 @@ describe('VirtualTableLaout utils', () => {
         { key: 3, height: 40 },
         { key: 4, height: 40 },
         { key: 5, height: 40 },
+        { key: 6, height: 40 },
       ];
 
-      expect(getVisibleRows(rows, 190, 50, row => row.height))
+      expect(getVisibleRows(rows, 230, 50, row => row.height))
         .toEqual([
           { type: 'stub', height: 80, key: 'starting' },
           { type: 'overscan', height: 40, row: rows[2] },
           { type: 'overscan', height: 40, row: rows[3] },
           { type: 'overscan', height: 40, row: rows[4] },
           { type: 'visible', height: 40, row: rows[5] },
+          { type: 'visible', height: 40, row: rows[6] },
         ]);
     });
 
@@ -71,6 +75,35 @@ describe('VirtualTableLaout utils', () => {
           { type: 'stub', height: 40, key: 'ending' },
         ]);
     });
+
+    it('should return visible rows in center with one big row', () => {
+      const rows = [
+        { key: 0, height: 40 },
+        { key: 1, height: 400 },
+        { key: 2, height: 40 },
+      ];
+
+      expect(getVisibleRows(rows, 170, 20, row => row.height))
+        .toEqual([
+          { type: 'overscan', height: 40, row: rows[0] },
+          { type: 'visible', height: 400, row: rows[1] },
+          { type: 'overscan', height: 40, row: rows[2] },
+        ]);
+
+      expect(getVisibleRows(rows, 30, 20, row => row.height))
+        .toEqual([
+          { type: 'visible', height: 40, row: rows[0] },
+          { type: 'visible', height: 400, row: rows[1] },
+          { type: 'overscan', height: 40, row: rows[2] },
+        ]);
+
+      expect(getVisibleRows(rows, 430, 20, row => row.height))
+        .toEqual([
+          { type: 'overscan', height: 40, row: rows[0] },
+          { type: 'visible', height: 400, row: rows[1] },
+          { type: 'visible', height: 40, row: rows[2] },
+        ]);
+    });
   });
 
   describe('#firstVisibleRowOffset', () => {