fix(react-grid): calculate actual row count in VirtualTableState (#2888)

DevExpress · May 13, 2020 · 82cade0 · 82cade0
1 parent 1663707
commit 82cade0
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 22 deletions.
diff --git a/packages/dx-grid-core/src/plugins/virtual-table-state/computeds.ts b/packages/dx-grid-core/src/plugins/virtual-table-state/computeds.ts
@@ -9,6 +9,10 @@ export const virtualRowsWithCache: VirtualRowsWithCacheFn = (skip, rows, cache)
   return mergeRows(rowsInterval, cacheInterval, rows, cache.rows, skip, cache.skip);
 };
 
-export const plainRows: PlainRowsFn = virtualRows => virtualRows.rows;
+export const plainRows: PlainRowsFn = (virtualRows, availableRowCount) => {
+  return virtualRows.rows.length > availableRowCount
+    ? virtualRows.rows.slice(0, availableRowCount)
+    : virtualRows.rows;
+};
 
 export const loadedRowsStart: LoadedRowsStartFn = virtualRows => virtualRows.skip;
diff --git a/packages/dx-grid-core/src/types/virtual-table-state.types.ts b/packages/dx-grid-core/src/types/virtual-table-state.types.ts
@@ -18,7 +18,7 @@ export type VirtualRowsWithCacheFn = PureComputed<
 >;
 
 /** @internal */
-export type PlainRowsFn = PureComputed<[VirtualRows], Row[]>;
+export type PlainRowsFn = PureComputed<[VirtualRows, number], Row[]>;
 
 /** @internal */
 export type LoadedRowsStartFn = PureComputed<[VirtualRows], number>;

diff --git a/packages/dx-react-grid/src/plugins/virtual-table/virtual-table-state.test.tsx b/packages/dx-react-grid/src/plugins/virtual-table/virtual-table-state.test.tsx
@@ -71,19 +71,96 @@ describe('VirtualTableState', () => {
         .toBe(200);
     });
 
-    it('should provide value from "totalRowCount" property', () => {
-      const tree = mount((
-        <PluginHost>
-          {pluginDepsToComponents(defaultDeps)}
-          <VirtualTableState
-            {...defaultProps}
-            totalRowCount={2000}
-          />
-        </PluginHost>
-      ));
+    describe('availableRowCount', () => {
+      it('should provide value from "totalRowCount" property', () => {
+        const tree = mount((
+          <PluginHost>
+            {pluginDepsToComponents(defaultDeps)}
+            <VirtualTableState
+              {...defaultProps}
+              totalRowCount={2000}
+            />
+          </PluginHost>
+        ));
 
-      expect(getComputedState(tree).availableRowCount)
-        .toBe(2000);
+        expect(getComputedState(tree).availableRowCount)
+          .toBe(2000);
+      });
+
+      describe('infinite scrolling', () => {
+        it('should provide value "pageSize * 2" if it is less than "totalRowCount"', () => {
+          const tree = mount((
+            <PluginHost>
+              {pluginDepsToComponents(defaultDeps)}
+              <VirtualTableState
+                {...defaultProps}
+                totalRowCount={2000}
+                infiniteScrolling
+              />
+            </PluginHost>
+          ));
+
+          expect(getComputedState(tree).availableRowCount)
+            .toBe(defaultProps.pageSize * 2);
+        });
+
+        it('should provide value from "totalRowCount" if it is less than "pageSize * 2"', () => {
+          const tree = mount((
+            <PluginHost>
+              {pluginDepsToComponents(defaultDeps)}
+              <VirtualTableState
+                {...defaultProps}
+                totalRowCount={70}
+                infiniteScrolling
+              />
+            </PluginHost>
+          ));
+
+          expect(getComputedState(tree).availableRowCount)
+            .toBe(70);
+        });
+
+        it('should calculate correctly when "totalRowCount" property changes', () => {
+          class Test extends React.Component {
+            render() {
+              return (
+                <PluginHost>
+                  {pluginDepsToComponents(defaultDeps)}
+                  <VirtualTableState
+                    {...this.props}
+                  />
+                </PluginHost>
+              );
+            }
+          }
+
+          const tree = mount((
+            <Test
+              {...defaultProps}
+              totalRowCount={1000}
+              infiniteScrolling
+            />
+          ));
+
+          expect(getComputedState(tree).availableRowCount)
+            .toBe(defaultProps.pageSize * 2);
+
+          tree.setProps({ totalRowCount: 5 });
+          tree.update();
+          expect(getComputedState(tree).availableRowCount)
+            .toBe(5);
+
+          tree.setProps({ totalRowCount: 50 });
+          tree.update();
+          expect(getComputedState(tree).availableRowCount)
+            .toBe(50);
+
+          tree.setProps({ totalRowCount: 500 });
+          tree.update();
+          expect(getComputedState(tree).availableRowCount)
+            .toBe(defaultProps.pageSize * 2);
+        });
+      });
     });
 
     it('should provide cached rows', () => {
@@ -136,7 +213,7 @@ describe('VirtualTableState', () => {
       expect(getComputedState(tree).rows)
         .toBe('plainRows');
       expect(plainRows)
-        .toBeCalledWith('virtualRowsWithCache');
+        .toBeCalledWith('virtualRowsWithCache', defaultProps.totalRowCount);
     });
 
     it('should provide loaded rows start index', () => {
@@ -152,7 +229,7 @@ describe('VirtualTableState', () => {
       expect(getComputedState(tree).loadedRowsStart)
         .toBe('loadedRowsStart');
       expect(plainRows)
-        .toBeCalledWith('virtualRowsWithCache');
+        .toBeCalledWith('virtualRowsWithCache', defaultProps.totalRowCount);
     });
 
     describe('Reload rows', () => {

diff --git a/packages/dx-react-grid/src/plugins/virtual-table/virtual-table-state.tsx b/packages/dx-react-grid/src/plugins/virtual-table/virtual-table-state.tsx
@@ -11,7 +11,9 @@ const virtualRowsComputed = (
   { skip, rows, virtualRowsCache }: Getters,
 ) => virtualRowsWithCache(skip, rows, virtualRowsCache);
 
-const rowsComputed = ({ virtualRows }: Getters) => plainRows(virtualRows);
+const rowsComputed = (
+  { virtualRows, availableRowCount }: Getters,
+) => plainRows(virtualRows, availableRowCount);
 
 const loadedRowsStartComputed = ({ virtualRows }: Getters) => loadedRowsStart(virtualRows);
 
@@ -116,10 +118,18 @@ class VirtualTableStateBase extends React.PureComponent<VirtualTableStateProps,
   static getDerivedStateFromProps(nextProps, prevState) {
     const {
       availableRowCount = prevState.availableRowCount,
+      totalRowCount,
+      pageSize,
+      infiniteScrolling,
     } = nextProps;
 
     return {
-      availableRowCount,
+      availableRowCount: getAvailableRowCount(
+        infiniteScrolling,
+        pageSize * 2,
+        availableRowCount,
+        totalRowCount,
+      ),
     };
   }
 
@@ -140,10 +150,8 @@ class VirtualTableStateBase extends React.PureComponent<VirtualTableStateProps,
   }
 
   render() {
-    const { virtualRowsCache, availableRowCount: stateRowCount } = this.state;
-    const { skip, pageSize, loading, infiniteScrolling, totalRowCount } = this.props;
-
-    const availableRowCount = infiniteScrolling ? stateRowCount : totalRowCount;
+    const { virtualRowsCache, availableRowCount } = this.state;
+    const { skip, pageSize, loading, infiniteScrolling } = this.props;
 
     return (
       <Plugin