react-flexigrid/lib/FlexiGridCell.js

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

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 { shallowEqual } from './utils';

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

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

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

  FlexiGridCell.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    return !shallowEqual(this.props, nextProps);
  };

  FlexiGridCell.prototype.renderContent = function renderContent() {
    var _props = this.props,
        prefixCls = _props.prefixCls,
        height = _props.height,
        width = _props.width,
        dataIndex = _props.dataIndex,
        rowIndex = _props.rowIndex,
        record = _props.record,
        render = _props.render;

    var content = record && record[dataIndex];
    var params = { height: height, width: width, dataIndex: dataIndex, rowIndex: rowIndex, record: record, content: content };

    if (render) {
      if (React.isValidElement(render)) {
        content = React.cloneElement(render, params);
      } else if (typeof render === 'function') {
        content = render(params);
      } else {
        content = render;
      }
    }

    return React.createElement(
      'div',
      { className: prefixCls + '-cell-wrap1', style: { width: width, height: height } },
      React.createElement(
        'div',
        { className: prefixCls + '-cell-wrap2' },
        React.createElement(
          'div',
          { className: prefixCls + '-cell-wrap3' },
          React.createElement(
            'div',
            { className: prefixCls + '-cell-content', style: { width: width } },
            content
          )
        )
      )
    );
  };

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

    var _props2 = this.props,
        prefixCls = _props2.prefixCls,
        className = _props2.className,
        align = _props2.align,
        width = _props2.width,
        height = _props2.height,
        left = _props2.left;

    var cls = classNames((_classNames = {}, _classNames[prefixCls + '-cell'] = true, _classNames['align-left'] = align === 'left' || align === undefined, _classNames['align-center'] = align === 'center', _classNames['align-right'] = align === 'right', _classNames), className);

    return React.createElement(
      'div',
      { className: cls, style: { width: width, height: height, left: left } },
      this.renderContent()
    );
  };

  return FlexiGridCell;
}(React.Component);

FlexiGridCell.PROPTYPES_DISABLED_FOR_PERFORMANCE = {
  prefixCls: PropTypes.string,
  className: propTypes.className,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  minWidth: PropTypes.number,
  maxWidth: PropTypes.number,
  left: PropTypes.number,
  align: propTypes.align,
  rowIndex: PropTypes.number.isRequired,
  dataIndex: propTypes.columnKey,
  render: propTypes.render,
  record: propTypes.record
};
export default FlexiGridCell;