grid scrolling improvements

Author: conor-j-malone

src/Canvas.js

@@ -2,7 +2,6 @@ const React           = require('react');
 const ReactDOM = require('react-dom');
 const joinClasses     = require('classnames');
 const PropTypes       = React.PropTypes;
-const shallowEqual    = require('fbjs/lib/shallowEqual');
 const ScrollShim      = require('./ScrollShim');
 const Row             = require('./Row');
 const cellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape');
@@ -31,14 +30,16 @@ const Canvas = React.createClass({
     columns: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
     cellMetaData: PropTypes.shape(cellMetaDataShape).isRequired,
     selectedRows: PropTypes.array,
-    rowKey: React.PropTypes.string
+    rowKey: React.PropTypes.string,
+    rowScrollTimeout: React.PropTypes.number
   },
 
   getDefaultProps() {
     return {
       rowRenderer: Row,
       onRows: () => {},
-      selectedRows: []
+      selectedRows: [],
+      rowScrollTimeout: 0
     };
   },
 
@@ -62,25 +63,12 @@ const Canvas = React.createClass({
   },
 
   componentWillReceiveProps(nextProps: any) {
-    let scrollbarWidth = this.getScrollbarWidth();
-    let shouldUpdate = !(nextProps.visibleStart > this.state.displayStart
-                        && nextProps.visibleEnd < this.state.displayEnd)
-                        || nextProps.rowsCount !== this.props.rowsCount
-                        || nextProps.rowHeight !== this.props.rowHeight
-                        || nextProps.columns !== this.props.columns
-                        || nextProps.width !== this.props.width
-                        || nextProps.cellMetaData !== this.props.cellMetaData
-                        || !shallowEqual(nextProps.style, this.props.style);
-
-    if (shouldUpdate) {
+    if (nextProps.displayStart !== this.state.displayStart
+    || nextProps.displayEnd !== this.state.displayEnd) {
       this.setState({
-        shouldUpdate: true,
         displayStart: nextProps.displayStart,
-        displayEnd: nextProps.displayEnd,
-        scrollbarWidth: scrollbarWidth
+        displayEnd: nextProps.displayEnd
       });
-    } else {
-      this.setState({shouldUpdate: false, scrollbarWidth: scrollbarWidth});
     }
   },
 
@@ -112,8 +100,28 @@ const Canvas = React.createClass({
     this.appendScrollShim();
     let {scrollTop, scrollLeft} = e.target;
     let scroll = {scrollTop, scrollLeft};
+    // check how far we have scrolled, and if this means we are being taken out of range
+    let scrollYRange = Math.abs(this._scroll.scrollTop - scroll.scrollTop) / this.props.rowHeight;
+    let scrolledOutOfRange = scrollYRange > (this.props.displayEnd - this.props.displayStart);
+
     this._scroll = scroll;
     this.props.onScroll(scroll);
+    // if we go out of range, we queue the actual render, just rendering cheap placeholders
+    // avoiding rendering anything expensive while a user scrolls down
+    if (scrolledOutOfRange && this.props.rowScrollTimeout > 0) {
+      let scrollTO = this.state.scrollingTimeout;
+      if (scrollTO) {
+        clearTimeout(scrollTO);
+      }
+     // queue up, and set state to clear the TO so we render the rows (not placeholders)
+      scrollTO = setTimeout(() => {
+        if (this.state.scrollingTimeout !== null) {
+          this.setState({scrollingTimeout: null});
+        }
+      }, this.props.rowScrollTimeout);
+
+      this.setState({scrollingTimeout: scrollTO});
+    }
   },
 
   getRows(displayStart: number, displayEnd: number): Array<any> {
@@ -166,6 +174,12 @@ const Canvas = React.createClass({
   },
 
   renderRow(props: any) {
+    if (this.state.scrollingTimeout !== null) {
+      // in the midst of a rapid scroll, so we render placeholders
+      // the actual render is then queued (through a timeout)
+      // this avoids us redering a bunch of rows that a user is trying to scroll past
+      return this.renderScrollingPlaceholder(props);
+    }
     let RowsRenderer = this.props.rowRenderer;
     if (typeof RowsRenderer === 'function') {
       return <RowsRenderer {...props}/>;
@@ -176,7 +190,30 @@ const Canvas = React.createClass({
     }
   },
 
+  renderScrollingPlaceholder(props: any): ?ReactElement {
+    // here we are just rendering empty cells
+    // we may want to allow a user to inject this, and/or just render the cells that are in view
+    // for now though we essentially are doing a (very lightweight) row + cell with empty content
+    let styles = {
+      row: {height: props.height, overflow: 'hidden'},
+      cell: {height: props.height, position: 'absolute'},
+      placeholder: {backgroundColor: 'rgba(211, 211, 211, 0.45)', width: '60%', height: Math.floor(props.height * 0.3)}
+    };
+    return (
+      <div key={props.key} style={styles.row} className="react-grid-Row">
+        {this.props.columns.map(
+          (col, idx) =>
+              <div style={Object.assign(styles.cell, {width: col.width, left: col.left})} key={idx} className="react-grid-Cell">
+                <div style={Object.assign(styles.placeholder, {width: Math.floor(col.width * 0.6)})}></div>
+              </div>
+        )}
+      </div>
+    );
+  },
+
   renderPlaceholder(key: string, height: number): ?ReactElement {
+    // just renders empty cells
+    // if we wanted to show gridlines, we'd need classes and position as with renderScrollingPlaceholder
     return (
       <div key={key} style={{height: height}}>
         {this.props.columns.map(

src/Grid.js

@@ -31,7 +31,8 @@ const Grid = React.createClass({
     onColumnResize: PropTypes.func,
     onSort: PropTypes.func,
     cellMetaData: PropTypes.shape(cellMetaDataShape),
-    rowKey: PropTypes.string.isRequired
+    rowKey: PropTypes.string.isRequired,
+    rowScrollTimeout: PropTypes.number
   },
 
   mixins: [
@@ -91,6 +92,7 @@ const Grid = React.createClass({
                   cellMetaData={this.props.cellMetaData}
                   rowOffsetHeight={this.props.rowOffsetHeight || this.props.rowHeight * headerRows.length}
                   minHeight={this.props.minHeight}
+                  rowScrollTimeout={this.props.rowScrollTimeout}
                 />
             </div>
         :

src/Viewport.js

@@ -21,7 +21,8 @@ const Viewport = React.createClass({
     onScroll: PropTypes.func,
     minHeight: PropTypes.number,
     cellMetaData: PropTypes.shape(cellMetaDataShape),
-    rowKey: PropTypes.string.isRequired
+    rowKey: PropTypes.string.isRequired,
+    rowScrollTimeout: PropTypes.number
   },
 
   onScroll(scroll: {scrollTop: number; scrollLeft: number}) {
@@ -70,15 +71,14 @@ const Viewport = React.createClass({
           expandedRows={this.props.expandedRows}
           columns={this.props.columnMetrics.columns}
           rowRenderer={this.props.rowRenderer}
-          visibleStart={this.state.visibleStart}
-          visibleEnd={this.state.visibleEnd}
           displayStart={this.state.displayStart}
           displayEnd={this.state.displayEnd}
           cellMetaData={this.props.cellMetaData}
           height={this.state.height}
           rowHeight={this.props.rowHeight}
           onScroll={this.onScroll}
           onRows={this.props.onRows}
+          rowScrollTimeout={this.props.rowScrollTimeout}
           />
       </div>
     );

src/addons/grids/ReactDataGrid.js

@@ -73,7 +73,8 @@ const ReactDataGrid = React.createClass({
     onGridSort: React.PropTypes.func,
     onDragHandleDoubleClick: React.PropTypes.func,
     onRowSelect: React.PropTypes.func,
-    rowKey: React.PropTypes.string
+    rowKey: React.PropTypes.string,
+    rowScrollTimeout: React.PropTypes.number
   },
 
   getDefaultProps(): {enableCellSelect: boolean} {
@@ -83,7 +84,8 @@ const ReactDataGrid = React.createClass({
       rowHeight: 35,
       enableRowSelect: false,
       minHeight: 350,
-      rowKey: 'id'
+      rowKey: 'id',
+      rowScrollTimeout: 0
     };
   },
 
@@ -98,12 +100,6 @@ const ReactDataGrid = React.createClass({
     return initialState;
   },
 
-  componentWillReceiveProps: function(nextProps: ReactDataGridProps) {
-    if (nextProps.rowsCount  === this.props.rowsCount + 1) {
-      this.onAfterAddRow(nextProps.rowsCount + 1);
-    }
-  },
-
   onSelect: function(selected: SelectedType) {
     if (this.props.enableCellSelect) {
       if (this.state.selected.rowIdx !== selected.rowIdx
@@ -224,10 +220,6 @@ const ReactDataGrid = React.createClass({
     }
   },
 
-  onAfterAddRow: function(numberOfRows: number) {
-    this.setState({selected: { idx: 1, rowIdx: numberOfRows - 2 }});
-  },
-
   onToggleFilter() {
     this.setState({ canFilter: !this.state.canFilter });
   },
@@ -523,7 +515,8 @@ const ReactDataGrid = React.createClass({
             onViewportDragStart={this.onDragStart}
             onViewportDragEnd={this.handleDragEnd}
             onViewportDoubleClick={this.onViewportDoubleClick}
-            onColumnResize={this.onColumnResize}/>
+            onColumnResize={this.onColumnResize}
+            rowScrollTimeout={this.props.rowScrollTimeout}/>
           </div>
         </div>
       );