react-flexigrid/lib/FlexiGridRow.js

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

import _extends from 'babel-runtime/helpers/extends';
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 classNames from 'classnames';
import PropTypes from 'prop-types';
import propTypes from './struct/propTypes';
import { translateDOMPosition } from './utils';
import { shouldUpdateRow } from './FlexiGridUpdateHelper';
import FlexiGridCellGroup from './FlexiGridCellGroup';

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

  function FlexiGridRow() {
    _classCallCheck(this, FlexiGridRow);

    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
  }

  FlexiGridRow.prototype.componentWillMount = function componentWillMount() {
    this.initialRender = true;
  };

  FlexiGridRow.prototype.componentDidMount = function componentDidMount() {
    this.initialRender = false;
  };

  FlexiGridRow.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    return shouldUpdateRow(this.props, nextProps);
  };

  FlexiGridRow.prototype.isJustFullfill = function isJustFullfill() {
    return this.props.width === this.props.leftFixedColumnsWidth + this.props.rightFixedColumnsWidth + this.props.scrollableColumnsWidth;
  };

  FlexiGridRow.prototype.shouldFixLastColumnBorder = function shouldFixLastColumnBorder() {
    return this.props.showScrollbarX || this.props.isJustFullfill;
  };

  FlexiGridRow.prototype.renderLeftFixedColumns = function renderLeftFixedColumns() {
    var _props = this.props,
        prefixCls = _props.prefixCls,
        record = _props.record,
        height = _props.height,
        rowHeight = _props.rowHeight,
        rowIndex = _props.rowIndex,
        isHeader = _props.isHeader,
        bordered = _props.bordered,
        leftFixedColumns = _props.leftFixedColumns,
        rightFixedColumns = _props.rightFixedColumns,
        scrollableColumns = _props.scrollableColumns,
        leftFixedLeafColumns = _props.leftFixedLeafColumns,
        leftFixedColumnsWidth = _props.leftFixedColumnsWidth,
        leftFixedColumnsUpdated = _props.leftFixedColumnsUpdated;


    var props = {
      record: record,
      prefixCls: prefixCls,
      className: 'fixed-left',
      width: leftFixedColumnsWidth,
      height: height,
      rowHeight: rowHeight,
      rowIndex: rowIndex,
      isHeader: isHeader,
      left: 0,
      zIndex: 1,
      columns: leftFixedColumns,
      leafColumns: leftFixedLeafColumns,
      columnsUpdated: leftFixedColumnsUpdated
    };

    if (scrollableColumns.length === 0 && rightFixedColumns.length === 0) {
      props.fixLastColumnBorder = bordered && this.shouldFixLastColumnBorder();
    }

    return React.createElement(FlexiGridCellGroup, _extends({ key: 'left-fixed-columns' }, props));
  };

  FlexiGridRow.prototype.renderScrollableColumns = function renderScrollableColumns() {
    var _props2 = this.props,
        prefixCls = _props2.prefixCls,
        record = _props2.record,
        height = _props2.height,
        rowHeight = _props2.rowHeight,
        rowIndex = _props2.rowIndex,
        isHeader = _props2.isHeader,
        bordered = _props2.bordered,
        scrollX = _props2.scrollX,
        getColumnPosition = _props2.getColumnPosition,
        scrollableColumns = _props2.scrollableColumns,
        rightFixedColumns = _props2.rightFixedColumns,
        scrollableLeafColumns = _props2.scrollableLeafColumns,
        scrollableColumnsToRender = _props2.scrollableColumnsToRender,
        scrollableLeafColumnsToRender = _props2.scrollableLeafColumnsToRender,
        leftFixedColumnsWidth = _props2.leftFixedColumnsWidth,
        scrollableColumnsWidth = _props2.scrollableColumnsWidth,
        scrollableColumnsUpdated = _props2.scrollableColumnsUpdated,
        scrollableColumnsToRenderUpdated = _props2.scrollableColumnsToRenderUpdated;


    var props = {
      prefixCls: prefixCls,
      record: record,
      className: 'scrollable',
      width: scrollableColumnsWidth,
      height: height,
      rowHeight: rowHeight,
      rowIndex: rowIndex,
      isHeader: isHeader,
      scrollX: scrollX,
      left: leftFixedColumnsWidth,
      getColumnPosition: getColumnPosition,
      columns: scrollableColumns,
      leafColumns: scrollableLeafColumns,
      columnsUpdated: scrollableColumnsUpdated,
      columnsToRender: scrollableColumnsToRender,
      leafColumnsToRender: scrollableLeafColumnsToRender,
      columnsToRenderUpdated: scrollableColumnsToRenderUpdated
    };

    if (rightFixedColumns.length === 0) {
      props.fixLastColumnBorder = bordered && this.shouldFixLastColumnBorder();
    }

    return React.createElement(FlexiGridCellGroup, _extends({ key: 'scrollable-columns' }, props));
  };

  FlexiGridRow.prototype.renderRightFixedColumns = function renderRightFixedColumns() {
    var _props3 = this.props,
        prefixCls = _props3.prefixCls,
        record = _props3.record,
        width = _props3.width,
        height = _props3.height,
        rowHeight = _props3.rowHeight,
        rowIndex = _props3.rowIndex,
        isHeader = _props3.isHeader,
        bordered = _props3.bordered,
        showScrollbarX = _props3.showScrollbarX,
        showScrollbarY = _props3.showScrollbarY,
        scrollbarSize = _props3.scrollbarSize,
        rightFixedColumns = _props3.rightFixedColumns,
        rightFixedLeafColumns = _props3.rightFixedLeafColumns,
        leftFixedColumnsWidth = _props3.leftFixedColumnsWidth,
        scrollableColumnsWidth = _props3.scrollableColumnsWidth,
        rightFixedColumnsWidth = _props3.rightFixedColumnsWidth,
        rightFixedColumnsUpdated = _props3.rightFixedColumnsUpdated;


    var props = {
      prefixCls: prefixCls,
      record: record,
      className: 'fixed-right',
      width: rightFixedColumnsWidth,
      height: height,
      rowHeight: rowHeight,
      rowIndex: rowIndex,
      isHeader: isHeader,
      zIndex: 1,
      columns: rightFixedColumns,
      leafColumns: rightFixedLeafColumns,
      columnsUpdated: rightFixedColumnsUpdated
    };

    if (bordered) {
      props.fixLastColumnBorder = this.shouldFixLastColumnBorder();
    }

    var leftGroupsWidth = leftFixedColumnsWidth + scrollableColumnsWidth;
    if (leftGroupsWidth + props.width > width) {
      props.left = width - props.width;
    } else {
      props.left = leftGroupsWidth;
    }

    if (isHeader && showScrollbarX && showScrollbarY) {
      props.width += scrollbarSize;
      props.left -= scrollbarSize;
    }

    return React.createElement(FlexiGridCellGroup, _extends({ key: 'right-fixed-columns' }, props));
  };

  FlexiGridRow.prototype.render = function render() {
    var _classNames;

    var _props4 = this.props,
        prefixCls = _props4.prefixCls,
        width = _props4.width,
        height = _props4.height,
        offsetTop = _props4.offsetTop,
        rowIndex = _props4.rowIndex,
        isHeader = _props4.isHeader;

    var wrapStyle = { width: width, height: height };
    var innerStyle = { width: width, height: height };

    translateDOMPosition(wrapStyle, 0, offsetTop, this.initialRender);

    var className = classNames((_classNames = {}, _classNames[prefixCls + '-row'] = true, _classNames['is-header'] = isHeader, _classNames.odd = !isHeader && rowIndex % 2 === 1, _classNames.even = !isHeader && rowIndex % 2 === 0, _classNames));

    return React.createElement(
      'div',
      { className: prefixCls + '-row-wrap', style: wrapStyle },
      React.createElement(
        'div',
        { className: className, style: innerStyle },
        this.props.leftFixedColumns.length && this.renderLeftFixedColumns(),
        this.props.scrollableColumns.length && this.renderScrollableColumns(),
        this.props.rightFixedColumns.length && this.renderRightFixedColumns()
      )
    );
  };

  return FlexiGridRow;
}(React.Component);

FlexiGridRow.PROPTYPES_DISABLED_FOR_PERFORMANCE = {
  prefixCls: PropTypes.string,
  className: PropTypes.string,
  record: propTypes.record,
  width: PropTypes.number,
  height: PropTypes.number,
  offsetTop: PropTypes.number,
  isHeader: PropTypes.bool,
  rowIndex: PropTypes.number,
  rowHeight: PropTypes.number,
  bordered: PropTypes.bool,
  scrollX: PropTypes.number,
  showScrollbarX: PropTypes.bool,
  showScrollbarY: PropTypes.bool,
  isJustFullfill: PropTypes.bool,
  scrollbarSize: PropTypes.number,

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

  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
};
export default FlexiGridRow;