react-flexigrid/lib/FlexiGridRowBuffer.js

A React table component designed to allow presenting millions of rows of data.

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import IntegerBufferSet from './struct/IntegerBufferSet';
import { clamp } from './utils';

var MIN_BUFFER_ROWS = 3;
var MAX_BUFFER_ROWS = 6;

var FlexiGridRowBuffer = function () {
  function FlexiGridRowBuffer(rowCount, defaultRowHeight, viewportHeight, rowHeightGetter, bufferRowCount) {
    _classCallCheck(this, FlexiGridRowBuffer);

    this.rowCount = rowCount;
    this.defaultRowHeight = defaultRowHeight;
    this.viewportHeight = viewportHeight;
    this.rowHeightGetter = rowHeightGetter;
    this.bufferSet = new IntegerBufferSet();

    this.maxVisibleRowCount = Math.ceil(viewportHeight / defaultRowHeight) + 1;
    this.bufferRowCount = bufferRowCount > 0 ? bufferRowCount : clamp(Math.floor(this.maxVisibleRowCount / 2), MIN_BUFFER_ROWS, MAX_BUFFER_ROWS);
    this.satrtRowIndex = 0;
    this.endRowIndex = 0;
    this.rows = [];
  }

  FlexiGridRowBuffer.prototype.getRowsWithUpdatedBuffer = function getRowsWithUpdatedBuffer() {
    var remainingBufferRows = 2 * this.bufferRowCount;
    var bufferRowIndex = Math.max(this.satrtRowIndex - this.bufferRowCount, 0);

    while (bufferRowIndex < this.satrtRowIndex) {
      this.addRowToBuffer(bufferRowIndex, this.satrtRowIndex, this.endRowIndex - 1);
      bufferRowIndex += 1;
      remainingBufferRows -= 1;
    }

    bufferRowIndex = this.endRowIndex;
    while (bufferRowIndex < this.rowCount && remainingBufferRows > 0) {
      this.addRowToBuffer(bufferRowIndex, this.satrtRowIndex, this.endRowIndex - 1);
      bufferRowIndex += 1;
      remainingBufferRows -= 1;
    }

    return this.rows;
  };

  FlexiGridRowBuffer.prototype.getRows = function getRows(firstRowIndex, firstRowOffset) {
    // get row indexs will be render
    var rowIndex = firstRowIndex;
    var totalHeight = firstRowOffset;
    var endIndex = Math.min(firstRowIndex + this.maxVisibleRowCount, this.rowCount);

    this.satrtRowIndex = firstRowIndex;

    while (rowIndex < endIndex || totalHeight < this.viewportHeight && rowIndex < this.rowCount) {
      this.addRowToBuffer(rowIndex, firstRowIndex, endIndex - 1);
      totalHeight += this.rowHeightGetter(rowIndex);
      rowIndex += 1;
    }

    // Store index after the last viewport row as end, to be able to
    // distinguish when there are no rows rendered in viewport
    this.endRowIndex = rowIndex;

    return this.rows;
  };

  FlexiGridRowBuffer.prototype.addRowToBuffer = function addRowToBuffer(rowIndex, startRowIndex, endRowIndex) {
    var rowPosition = this.bufferSet.getPositionForValue(rowIndex);
    var viewportRowCount = endRowIndex - startRowIndex + 1;
    var allowedRowCount = viewportRowCount + this.bufferRowCount * 2;

    if (rowPosition === null && this.bufferSet.getSize() >= allowedRowCount) {
      rowPosition = this.bufferSet.replaceFurthestValuePosition(startRowIndex, endRowIndex, rowIndex);
    }

    if (rowPosition === null) {
      // Can't reuse any of existing positions for this row.
      // So we have to create new position.
      rowPosition = this.bufferSet.getNewPositionForValue(rowIndex);
      this.rows[rowPosition] = rowIndex;
    } else {
      // This row already is in the table with `rowPosition` position
      // or it can replace row that is in that position
      this.rows[rowPosition] = rowIndex;
    }
  };

  return FlexiGridRowBuffer;
}();

export default FlexiGridRowBuffer;