react-flexigrid/lib/FlexiGridCellGroup.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 PropTypes from 'prop-types';
import classNames from 'classnames';
import propTypes from './struct/propTypes';
import { translateDOMPosition } from './utils';
import { shouldUpdateCellGroup } from './FlexiGridUpdateHelper';
import FlexiGridCell from './FlexiGridCell';

var NO_RIGHT_BORDR = 'no-right-border';

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

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

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

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

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

  FlexiGridCellGroup.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    return shouldUpdateCellGroup(this.props, nextProps);
  };

  FlexiGridCellGroup.prototype.renderBodyCells = function renderBodyCells() {
    var _props = this.props,
        prefixCls = _props.prefixCls,
        height = _props.height,
        leafColumns = _props.leafColumns,
        leafColumnsToRender = _props.leafColumnsToRender,
        record = _props.record,
        rowIndex = _props.rowIndex,
        fixLastColumnBorder = _props.fixLastColumnBorder;


    var left = 0;

    return (leafColumnsToRender || leafColumns).map(function (column) {
      var width = column.width,
          key = column.key,
          dataIndex = column.dataIndex,
          render = column.render,
          align = column.align,
          offsetLeft = column.offsetLeft,
          isLastLeaf = column.isLastLeaf;

      var cellProps = {
        prefixCls: prefixCls,
        width: width,
        height: height,
        left: offsetLeft !== undefined ? offsetLeft : left,
        record: record,
        dataIndex: dataIndex,
        rowIndex: rowIndex,
        align: align,
        render: render
      };

      if (fixLastColumnBorder && isLastLeaf) {
        cellProps.className = NO_RIGHT_BORDR;
      }

      left += width;
      return React.createElement(FlexiGridCell, _extends({ key: key }, cellProps));
    });
  };

  FlexiGridCellGroup.prototype.renderHeaderMergedCells = function renderHeaderMergedCells(height, left, column) {
    var _classNames;

    var _props2 = this.props,
        prefixCls = _props2.prefixCls,
        rowHeight = _props2.rowHeight,
        fixLastColumnBorder = _props2.fixLastColumnBorder;
    var children = column.children,
        width = column.width,
        title = column.title,
        align = column.align,
        isLastLeaf = column.isLastLeaf,
        key = column.key;

    var cellProps = {
      prefixCls: prefixCls,
      width: width,
      height: rowHeight,
      left: 0,
      align: align || 'center',
      render: title,
      className: classNames((_classNames = {
        unsortable: column.sortable === false,
        unreorderable: column.reorderable === false
      }, _classNames[NO_RIGHT_BORDR] = fixLastColumnBorder && isLastLeaf, _classNames))
    };

    return React.createElement(
      'div',
      {
        key: key + '-merged-cells-wrap',
        className: prefixCls + '-header-merged-cells-wrap',
        style: { width: width, height: height, left: left }
      },
      React.createElement(FlexiGridCell, cellProps),
      React.createElement(
        'div',
        {
          key: key + '-merged-cells',
          className: prefixCls + '-header-merged-cells',
          style: {
            width: width,
            height: height - rowHeight,
            top: rowHeight
          }
        },
        this.renderHeaderCells({
          prefixCls: prefixCls,
          height: height - rowHeight,
          columns: children,
          fixLastColumnBorder: fixLastColumnBorder
        })
      )
    );
  };

  FlexiGridCellGroup.prototype.renderHeaderCells = function renderHeaderCells() {
    var _this2 = this;

    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
    var prefixCls = props.prefixCls,
        height = props.height,
        columns = props.columns,
        fixLastColumnBorder = props.fixLastColumnBorder;


    var left = 0;

    return columns.map(function (column) {
      var children = column.children,
          width = column.width,
          title = column.title,
          key = column.key,
          isLastLeaf = column.isLastLeaf,
          align = column.align;

      var ret = void 0;

      if (children && children.length) {
        ret = _this2.renderHeaderMergedCells(height, left, column);
      } else {
        var cellProps = {
          prefixCls: prefixCls,
          width: width,
          height: height,
          left: left,
          key: key,
          align: align,
          render: title,
          className: {
            unsortable: column.sortable === false,
            unreorderable: column.reorderable === false
          }
        };

        if (fixLastColumnBorder && isLastLeaf) {
          cellProps.className[NO_RIGHT_BORDR] = true;
        }

        ret = React.createElement(FlexiGridCell, cellProps);
      }

      left += width;

      return ret;
    });
  };

  FlexiGridCellGroup.prototype.render = function render() {
    var _props3 = this.props,
        prefixCls = _props3.prefixCls,
        className = _props3.className,
        width = _props3.width,
        height = _props3.height,
        left = _props3.left,
        zIndex = _props3.zIndex,
        isHeader = _props3.isHeader,
        scrollX = _props3.scrollX;

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

    translateDOMPosition(innerStyle, -scrollX, 0, this.initialRender);

    return React.createElement(
      'div',
      {
        className: prefixCls + '-cells-group-wrap',
        style: wrapStyle
      },
      React.createElement(
        'div',
        {
          className: classNames(prefixCls + '-cells-group', className),
          style: innerStyle
        },
        isHeader ? this.renderHeaderCells() : this.renderBodyCells()
      )
    );
  };

  return FlexiGridCellGroup;
}(React.Component);

FlexiGridCellGroup.PROPTYPES_DISABLED_FOR_PERFORMANCE = {
  prefixCls: PropTypes.string,
  className: propTypes.className,
  record: propTypes.record,
  width: PropTypes.number,
  height: PropTypes.number,
  left: PropTypes.number,
  zIndex: PropTypes.number,
  scrollX: PropTypes.number,
  isHeader: PropTypes.bool,
  rowIndex: PropTypes.number,
  rowHeight: PropTypes.number,
  columns: propTypes.columns,
  leafColumns: propTypes.columns,
  columnsToRender: propTypes.columns,
  leafColumnsToRender: propTypes.columns,
  columnsUpdated: PropTypes.bool,
  columnsToRenderUpdated: PropTypes.bool,
  fixLastColumnBorder: PropTypes.bool
};
export default FlexiGridCellGroup;