Improve scrolling responsiveness (#1766)

* Improve scrolling responsiveness

* Fix tests

* Move RowsContainerProps to types.ts

* Enable sourcemaps in webpack-dev-server

* add source-map-loader

* Remove will-change on row container to fix interactionmask overlaying the frozen columns

package.json

@@ -57,6 +57,7 @@
     "react-dom": "^16.10.1",
     "react-router-dom": "^5.1.2",
     "recharts": "^1.7.1",
+    "source-map-loader": "^0.2.4",
     "style-loader": "^1.0.0",
     "terser-webpack-plugin": "^2.1.2",
     "ts-jest": "^24.1.0",

packages/react-data-grid/src/Canvas.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { isElement } from 'react-is';
 
 import Row from './Row';
-import RowsContainerDefault from './RowsContainer';
 import RowGroup from './RowGroup';
 import { InteractionMasks } from './masks';
 import { getColumnScrollPosition, isPositionStickySupported } from './utils';
@@ -278,7 +277,7 @@ export default class Canvas<R> extends React.PureComponent<CanvasProps<R>> {
 
   render() {
     const { rowOverscanStartIdx, rowOverscanEndIdx, cellMetaData, columns, colOverscanStartIdx, colOverscanEndIdx, colVisibleStartIdx, colVisibleEndIdx, lastFrozenColumnIndex, rowHeight, rowsCount, width, height, rowGetter, contextMenu, isScrolling, scrollLeft } = this.props;
-    const RowsContainer = this.props.RowsContainer || RowsContainerDefault;
+    const RowsContainer = this.props.RowsContainer || Fragment;
 
     const rows = this.getRows(rowOverscanStartIdx, rowOverscanEndIdx)
       .map(({ row, subRowDetails }, idx) => {
@@ -351,8 +350,7 @@ export default class Canvas<R> extends React.PureComponent<CanvasProps<R>> {
           {...this.props.interactionMasksMetaData}
         />
         <RowsContainer id={contextMenu ? contextMenu.props.id : 'rowsContainer'}>
-          {/* Set minHeight to show horizontal scrollbar when there are no rows */}
-          <div style={{ width, minHeight: 1 }}>{rows}</div>
+          <div className="rdg-rows-container" style={{ width }}>{rows}</div>
         </RowsContainer>
       </div>
     );

packages/react-data-grid/src/ReactDataGrid.tsx

@@ -12,7 +12,6 @@ import Grid from './Grid';
 import ToolbarContainer, { ToolbarProps } from './ToolbarContainer';
 import { getColumnMetrics } from './ColumnMetrics';
 import { ScrollState } from './Viewport';
-import { RowsContainerProps } from './RowsContainer';
 import { EventBus } from './masks';
 import { CellNavigationMode, EventTypes, UpdateActions, HeaderRowType, DEFINE_SORT } from './common/enums';
 import {
@@ -28,6 +27,7 @@ import {
   HeaderRowData,
   InteractionMasksMetaData,
   Position,
+  RowsContainerProps,
   RowExpandToggleEvent,
   RowGetter,
   SelectedRange,

packages/react-data-grid/src/__tests__/Canvas.spec.tsx

@@ -3,7 +3,6 @@ import { shallow } from 'enzyme';
 
 import InteractionMasks from '../masks/InteractionMasks';
 import Canvas, { CanvasProps } from '../Canvas';
-import RowsContainer from '../RowsContainer';
 import EventBus from '../masks/EventBus';
 import { CellNavigationMode } from '../common/enums';
 import { CalculatedColumn } from '../common/types';
@@ -15,7 +14,7 @@ interface Row {
 }
 
 const noop = () => null;
-const getRows = (wrp: ReturnType<typeof renderComponent>) => wrp.find(RowsContainer).children().props().children;
+const getRows = (wrp: ReturnType<typeof renderComponent>) => wrp.find('.rdg-rows-container').props().children as JSX.Element[];
 
 const testProps: CanvasProps<Row> = {
   rowKey: 'row',
@@ -55,7 +54,6 @@ const testProps: CanvasProps<Row> = {
   width: 1000,
   onScroll() {},
   lastFrozenColumnIndex: 0,
-  RowsContainer: RowsContainer as CanvasProps<Row>['RowsContainer'],
   scrollTop: 0,
   scrollLeft: 0
 };

packages/react-data-grid/src/common/types.ts

@@ -168,6 +168,11 @@ export interface CellRendererProps<TRow, TValue = unknown> {
   onRowSelectionChange(rowIdx: number, row: TRow, checked: boolean, isShiftClick: boolean): void;
 }
 
+export interface RowsContainerProps {
+  id: string;
+  children: React.ReactElement;
+}
+
 export interface RowRendererProps<TRow> {
   height: number;
   columns: CalculatedColumn<TRow>[];

packages/react-data-grid/style/rdg-core.less

@@ -17,4 +17,11 @@
   overflow-x: auto;
   overflow-y: scroll;
   background-color: #fff;
+  // will-change promotes the canvas to a new layer, improving scroll responsiveness
+  will-change: transform;
+}
+
+.rdg-rows-container {
+  // min-height is here to show the horizontal scrollbar when there are no rows
+  min-height: 1px;
 }

webpack-dev-server.js

@@ -8,6 +8,7 @@ const RELEASE = process.argv.slice(2).includes('--release');
 
 const config = {
   mode: RELEASE ? 'production' : 'development',
+  devtool: 'eval-source-map',
   entry: {
     index: [
       'webpack-dev-server/client?http://localhost:8080/',
@@ -27,7 +28,12 @@ const config = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.js$/,
+        use: ['source-map-loader'],
+        enforce: 'pre'
+      },
+      {
+        test: /\.jsx?$/,
         exclude: /node_modules/,
         use: ['babel-loader']
       },