react-flexigrid/lib/FlexiGridBufferedRows.js

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

import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React from 'react';
import PropTypes from 'prop-types';
import propTypes from './struct/propTypes';
import FlexiGridRow from './FlexiGridRow';
import FlexiGridRowBuffer from './FlexiGridRowBuffer';

var FlexiGridBufferedRows = function (_React$Component) {
  _inherits(FlexiGridBufferedRows, _React$Component);

  function FlexiGridBufferedRows(props) {
    _classCallCheck(this, FlexiGridBufferedRows);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.getRowHeight = function (index) {
      return _this.props.getRowHeight ? _this.props.getRowHeight(index) : _this.props.defaultRowHeight;
    };

    _this.getSubRowHeight = function (index) {
      return _this.props.getSubRowHeight ? _this.props.getSubRowHeight(index) : _this.props.subRowHeight;
    };

    _this.rowBuffer = new FlexiGridRowBuffer(_this.props.rowCount, _this.props.defaultRowHeight, _this.props.height, _this.getRowHeight, _this.props.bufferRowCount);

    _this.state = {
      rowsToRender: _this.rowBuffer.getRows(_this.props.firstRowIndex, _this.props.firstRowOffset)
    };
    return _this;
  }

  FlexiGridBufferedRows.prototype.componentDidMount = function componentDidMount() {
    setTimeout(this.updateBuffer, 1000);
  };

  FlexiGridBufferedRows.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    if (nextProps.rowCount !== this.props.rowCount || nextProps.defaultRowHeight !== this.props.defaultRowHeight || nextProps.height !== this.props.height) {
      this.rowBuffer = new FlexiGridRowBuffer(nextProps.rowCount, nextProps.defaultRowHeight, nextProps.height, this.getRowHeight, this.props.bufferRowCount);
    }

    if (this.props.scrolling && !nextProps.scrolling) {
      this.updateBuffer();
    } else {
      this.setState({
        rowsToRender: this.rowBuffer.getRows(nextProps.firstRowIndex, nextProps.firstRowOffset)
      });
    }
  };

  FlexiGridBufferedRows.prototype.shouldComponentUpdate = function shouldComponentUpdate() {
    return true;
  };

  FlexiGridBufferedRows.prototype.componentWillUnmount = function componentWillUnmount() {
    this.rowBuffer = null;
  };

  FlexiGridBufferedRows.prototype.updateBuffer = function updateBuffer() {
    if (this.rowBuffer) {
      this.setState({
        rowsToRender: this.rowBuffer.getRowsWithUpdatedBuffer()
      });
    }
  };

  FlexiGridBufferedRows.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        data = _props.data,
        rowKey = _props.rowKey,
        firstRowIndex = _props.firstRowIndex,
        firstRowOffset = _props.firstRowOffset,
        bufferRowCount = _props.bufferRowCount,
        scrolling = _props.scrolling,
        getRowPosition = _props.getRowPosition,
        getRowClassName = _props.getRowClassName,
        getRowHeight = _props.getRowHeight,
        getSubRowHeight = _props.getSubRowHeight,
        otherProps = _objectWithoutProperties(_props, ['data', 'rowKey', 'firstRowIndex', 'firstRowOffset', 'bufferRowCount', 'scrolling', 'getRowPosition', 'getRowClassName', 'getRowHeight', 'getSubRowHeight']);

    var rowsToRender = this.state.rowsToRender;
    var baseOffsetTop = firstRowOffset - getRowPosition(firstRowIndex);
    var rowPositions = {};
    var sortedRows = rowsToRender.slice().sort(function (a, b) {
      return a - b;
    });

    sortedRows.forEach(function (rowIndex) {
      rowPositions[rowIndex] = getRowPosition(rowIndex);
    });

    var renderredRows = sortedRows.map(function (rowIndex) {
      var currentRowHeight = _this2.getRowHeight(rowIndex);
      // const currentSubRowHeight = this.getSubRowHeight(rowIndex)
      var rowOffsetTop = baseOffsetTop + rowPositions[rowIndex];
      var className = getRowClassName ? getRowClassName(rowIndex) : null;
      var record = data[rowIndex];
      var rowProps = _extends({}, otherProps, {
        className: className,
        rowIndex: rowIndex,
        record: record,
        height: currentRowHeight,
        offsetTop: Math.round(rowOffsetTop)
      });

      return React.createElement(FlexiGridRow, _extends({ key: 'body-row-' + record[rowKey] }, rowProps));
    });

    return React.createElement(
      'div',
      null,
      renderredRows
    );
  };

  return FlexiGridBufferedRows;
}(React.Component);

FlexiGridBufferedRows.PROPTYPES_DISABLED_FOR_PERFORMANCE = {
  // inherit from body
  prefixCls: PropTypes.string,
  rowHeight: PropTypes.number,
  bordered: PropTypes.bool,
  scrollX: PropTypes.number,
  showScrollbarX: PropTypes.bool,
  showScrollbarY: PropTypes.bool,
  isJustFullfill: PropTypes.bool,

  leftFixedColumns: propTypes.columns,
  scrollableColumns: propTypes.columns,
  rightFixedColumns: propTypes.columns,
  leftFixedLeafColumns: propTypes.columns,
  scrollableLeafColumns: propTypes.columns,
  rightFixedLeafColumns: propTypes.columns,
  leftFixedColumnsWidth: PropTypes.number,
  scrollableColumnsWidth: PropTypes.number,
  rightFixedColumnsWidth: PropTypes.number,
  leftFixedColumnsUpdated: PropTypes.bool,
  scrollableColumnsUpdated: PropTypes.bool,
  rightFixedColumnsUpdated: PropTypes.bool,

  width: PropTypes.number,
  height: PropTypes.number,
  data: propTypes.data,
  rowKey: propTypes.columnKey,
  firstRowIndex: PropTypes.number,
  firstRowOffset: PropTypes.number,
  bufferRowCount: PropTypes.number,
  scrolling: PropTypes.bool,
  getRowPosition: PropTypes.func.isRequired,
  getRowClassName: PropTypes.func,
  getRowHeight: PropTypes.func,
  getSubRowHeight: PropTypes.func,

  onRowTouchStart: PropTypes.func,
  onRowTouchEnd: PropTypes.func,
  onRowTouchMove: PropTypes.func,

  onRowClick: PropTypes.func,
  onRowDoubleClick: PropTypes.func,
  onRowMouseDown: PropTypes.func,
  onRowMouseUp: PropTypes.func,
  onRowMouseEnter: PropTypes.func,
  onRowMouseLeave: PropTypes.func,

  // specified
  rowCount: PropTypes.number,
  defaultRowHeight: PropTypes.number
};
export default FlexiGridBufferedRows;