some tweaking with rowDisplay start and End points

adazzle · Nov 1, 2016 · 38b503c · 38b503c
1 parent 7d5f45f
commit 38b503c
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 105 deletions.
diff --git a/src/Canvas.js b/src/Canvas.js
@@ -143,28 +143,8 @@ const Canvas = React.createClass({
     let scrollLeft = e.target.scrollLeft;
     let scrollTop = e.target.scrollTop;
     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 });
-    }
   },
 
   getSubRows(row) {
@@ -306,31 +286,10 @@ const Canvas = React.createClass({
     }
   },
 
-  renderScrollingPlaceholder(props: any) {
-    // 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 }}>
+    return (<div key={ key } style={{ height: height }}>
       {
         this.props.columns.map(
           (column, idx) => <div style={{ width: column.width }} key={idx} />
@@ -340,67 +299,66 @@ const Canvas = React.createClass({
     );
   },
 
-render() {
-  const { displayStart, displayEnd } = this.state;
-  const { rowHeight, rowsCount } = this.props;
-
-  let rows = this.getRows(displayStart, displayEnd)
-    .map((r, idx) => this.renderRow({
-      key: `row-${displayStart + idx}`,
-      ref: idx,
-      idx: displayStart + idx,
-      visibleStart: this.props.visibleStart,
-      visibleEnd: this.props.visibleEnd,
-      row: r.row,
-      height: rowHeight,
-      onMouseOver: this.onMouseOver,
-      columns: this.props.columns,
-      isSelected: this.isRowSelected(displayStart + idx, r.row, displayStart, displayEnd),
-      expandedRows: this.props.expandedRows,
-      cellMetaData: this.props.cellMetaData,
-      subRowDetails: r.subRowDetails,
-      colVisibleStart: this.props.colVisibleStart,
-      colVisibleEnd: this.props.colVisibleEnd,
-      colDisplayStart: this.props.colDisplayStart,
-      colDisplayEnd: this.props.colDisplayEnd
-    }));
-
-  this._currentRowsLength = rows.length;
-
-  if (displayStart > 0) {
-    rows.unshift(this.renderPlaceholder('top', displayStart * rowHeight));
-  }
+  render() {
+    const { displayStart, displayEnd } = this.state;
+    const { rowHeight, rowsCount } = this.props;
+
+    let rows = this.getRows(displayStart, displayEnd)
+      .map((r, idx) => this.renderRow({
+        key: `row-${displayStart + idx}`,
+        ref: idx,
+        idx: displayStart + idx,
+        visibleStart: this.props.visibleStart,
+        visibleEnd: this.props.visibleEnd,
+        row: r.row,
+        height: rowHeight,
+        onMouseOver: this.onMouseOver,
+        columns: this.props.columns,
+        isSelected: this.isRowSelected(displayStart + idx, r.row, displayStart, displayEnd),
+        expandedRows: this.props.expandedRows,
+        cellMetaData: this.props.cellMetaData,
+        subRowDetails: r.subRowDetails,
+        colVisibleStart: this.props.colVisibleStart,
+        colVisibleEnd: this.props.colVisibleEnd,
+        colDisplayStart: this.props.colDisplayStart,
+        colDisplayEnd: this.props.colDisplayEnd
+      }));
+
+    this._currentRowsLength = rows.length;
+
+    if (displayStart > 0) {
+      rows.unshift(this.renderPlaceholder('top', displayStart * rowHeight));
+    }
 
-  if (rowsCount - displayEnd > 0) {
-    rows.push(
-      this.renderPlaceholder('bottom', (rowsCount - displayEnd) * rowHeight));
-  }
+    if (rowsCount - displayEnd > 0) {
+      rows.push(
+        this.renderPlaceholder('bottom', (rowsCount - displayEnd) * rowHeight));
+    }
+
+    let style = {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      overflowX: 'auto',
+      overflowY: 'scroll',
+      width: this.props.totalWidth,
+      height: this.props.height
+    };
 
-  let style = {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    overflowX: 'auto',
-    overflowY: 'scroll',
-    width: this.props.totalWidth,
-    height: this.props.height,
-    transform: 'translate3d(0, 0, 0)'
-  };
-
-  return (
-    <div
-      style={style}
-      onScroll={this.onScroll}
-      className={joinClasses('react-grid-Canvas', this.props.className, { opaque: this.props.cellMetaData.selected && this.props.cellMetaData.selected.active }) }>
-      <RowsContainer
-        width={this.props.width}
-        rows={rows}
-        contextMenu={this.props.contextMenu}
-        rowIdx={this.props.cellMetaData.selected.rowIdx}
-        idx={this.props.cellMetaData.selected.idx} />
-    </div>
-  );
-}
+    return (
+      <div
+        style={style}
+        onScroll={this.onScroll}
+        className={joinClasses('react-grid-Canvas', this.props.className, { opaque: this.props.cellMetaData.selected && this.props.cellMetaData.selected.active }) }>
+        <RowsContainer
+          width={this.props.width}
+          rows={rows}
+          contextMenu={this.props.contextMenu}
+          rowIdx={this.props.cellMetaData.selected.rowIdx}
+          idx={this.props.cellMetaData.selected.idx} />
+      </div>
+    );
+  }
 });
 
 module.exports = Canvas;
diff --git a/src/Viewport.js b/src/Viewport.js
@@ -63,7 +63,7 @@ const Viewport = React.createClass({
     this.refs.canvas.setScrollLeft(scrollLeft);
   },
 
-  render(): ?ReactElement {
+  render() {
     let style = {
       padding: 0,
       bottom: 0,

diff --git a/src/ViewportScrollMixin.js b/src/ViewportScrollMixin.js
@@ -92,6 +92,7 @@ module.exports = {
 
   updateScroll(scrollTop: number, scrollLeft: number, height: number, rowHeight: number, length: number, width) {
     let visibleBuffer = 2;
+    let displayBuffer = 1.5;
     let renderedRowsCount = ceil(height / rowHeight);
 
     let visibleStart = max(0, floor(scrollTop / rowHeight) - visibleBuffer);
@@ -102,18 +103,18 @@ module.exports = {
 
     let displayStart = max(
       0,
-      visibleStart - renderedRowsCount * 2);
+      visibleStart - parseInt(renderedRowsCount * visibleBuffer, 10));
 
     let displayEnd = min(
-      visibleStart + renderedRowsCount * 2,
+      visibleStart + parseInt(renderedRowsCount * visibleBuffer, 10),
       length);
 
     let totalNumberColumns = ColumnUtils.getSize(this.props.columnMetrics.columns);
     let colVisibleStart = this.getVisibleColStart(scrollLeft);
     let renderedColumnCount = this.getRenderedColumnCount(colVisibleStart, width);
     let colVisibleEnd = colVisibleStart + renderedColumnCount;
     let colDisplayStart = max(0, colVisibleStart - 2);
-    let colDisplayEnd = min(colVisibleStart + renderedColumnCount * 2, totalNumberColumns);
+    let colDisplayEnd = min(colVisibleStart + parseInt(renderedColumnCount * displayBuffer, 10), totalNumberColumns);
 
     let nextScrollState = {
       visibleStart,