@beisen/ethos/lib/data-grid/render/renderRow.js

beisencloud pc react components

'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var assign = require('object-assign');
var React = require('react');

var Row = require('../Row');
var RowFactory = React.createFactory(Row);

var renderCell = Row.prototype.renderCell;

/**
 * Render a datagrid row
 *
 * @param  {Object}   props The props from which to build row props
 * @param  {Object}   data The data object that backs this row
 * @param  {Number}   index The index in the grid of the row to be rendered
 * @param  {Function} [fn] A function that can be used to modify built row props
 *
 * If props.rowFactory is specified, it will be used to build the ReactElement
 * corresponding to this row. In case it returns undefined, the default RowFactory will be used
 * (this case occurs when the rowFactory was specified just to modify the row props)
 *
 * @return {ReactElement}
 */

module.exports = function renderRow(props, data, index, fixStatus, fn) {
  var factory = props.rowFactory || RowFactory;
  var key = data[props.idProperty];
  var selectedKey = props.selectedKey || key;
  var renderKey = key;

  //wuzhe----通过判断即将渲染的行的index与传入的hover的index值是否相同，确定是否是hover的行
  var hoverStatus = false;
  var vRolling = false;
  //wuzhe----纵向滚动时的状态，如果是处在纵向滚动的状态中则去掉所有的hover效果
  // if (props.inDataGrid && (props.hoverIndex == -1)) {
  //   vRolling = true;
  // }
  if (props.inDataGrid && props.hoverIndex == index) {
    hoverStatus = true;
  }

  if (!props.groupBy) {
    renderKey = index - props.startIndex;
  }

  var selected = false;

  if ((0, _typeof3.default)(props.selected) == 'object' && props.selected) {
    selected = !!props.selected[data[selectedKey]];
  } else if (props.selected) {
    selected = data[selectedKey] === props.selected;
  }

  var config = assign({}, props.rowProps, {
    selected: selected,

    key: renderKey,
    data: data,
    index: index,
    hoverRowIndex: props.hoverRowIndex,
    paddingSize: props.paddingSize ? props.paddingSize : 8,

    cellFactory: props.cellFactory,
    renderCell: props.renderCell,
    renderText: props.renderText,
    cellPadding: props.cellPadding,
    rowHeight: props.rowHeight,
    minWidth: props.minRowWidth - props.scrollbarSize,
    columns: props.columns,

    rowContextMenu: props.rowContextMenu,
    showMenu: props.showMenu,
    columnsWith: props.columnsWith,
    //holly========
    handleEdit: props.handleEdit,
    handleExpand: props.handleExpand,
    handleHover: props.handleHover,
    handleMouseOut: props.handleMouseOut,
    _onClick: this ? this.handleRowClick : null,
    //吴喆
    onMouseEnter: props.onRowMouseEnter,
    hoverStatus: hoverStatus,
    vRolling: vRolling,
    rowType: props.rowType,

    isLookUpV2: props.isLookUpV2
  });

  var style;
  var rowStyle = props.rowStyle;

  if (rowStyle) {
    style = {};

    if (typeof rowStyle == 'function') {
      style = rowStyle(data, config);
    } else {
      assign(style, rowStyle);
    }

    config.style = style;
  }

  // 用以支持自定义背景色
  if (config.data.bgColor) {
    config.style = assign({
      background: config.data.bgColor
    }, config.style);
  }

  var className = props.rowClassName;

  if (typeof className == 'function') {
    className = className(data, config);
  }

  if (className) {
    config.className = className;
  }

  if (typeof fn == 'function') {
    config = fn(config);
  }
  //在展开区域滚动时加阴影
  function handleExpandScroll(data) {
    props.handleExpandScroll(data);
  }
  var row = factory(config);

  var expandDiv = void 0;

  if (row !== undefined) {

    //juan add 显示展开内容
    if (config.data && config.data.expandable === true) {
      var _config$data = config.data,
          id = _config$data.id,
          isFold = _config$data.isFold,
          hasShadowClass = _config$data.hasShadowClass,
          expandContent = _config$data.expandContent;

      var expandDisplayClass = isFold ? "none" : "block";
      var borderClass = expandContent ? "1px solid #e4ebf0" : "none"; //无内容去掉border

      var expandClass = {
        overflowY: "auto",
        maxHeight: "300px",
        paddingLeft: "15px",
        paddingRight: "15px",
        display: expandDisplayClass,
        borderBottom: borderClass
      };

      var expStyle = (0, _extends3.default)({}, expandClass, this.props.expandStyle);

      expandDiv = React.createElement(
        'div',
        {
          'data-id': id,
          style: expStyle,
          onScroll: handleExpandScroll.bind(this, config.data) },
        expandContent
      );
      config = (0, _extends3.default)({}, config, { isExpandShadowClass: config.data.hasShadowClass });
    }
    row = React.createElement(
      'div',
      null,
      React.createElement(Row, config),
      expandDiv
    );
  }

  if (config.selected && this) {
    this.selIndex = index;
  }
  return row;
};