@beisen/ethos/lib/data-grid/Row/index.js

beisencloud pc react components

'use strict';

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

var _extends3 = _interopRequireDefault(_extends2);

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

var React = require('react');
var Region = require('region');
var assign = require('object-assign');
var normalize = require('react-style-normalizer');
var Cell = require('../Cell');
var CellFactory = React.createFactory(Cell);
var ReactMenu = require('react-menus');
var ReactMenuFactory = React.createFactory(ReactMenu);

module.exports = React.createClass({

  displayName: 'ReactDataGrid.Row',

  propTypes: {
    data: React.PropTypes.object,
    columns: React.PropTypes.array,
    index: React.PropTypes.number
  },
  shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
    return true;
  },
  getDefaultProps: function getDefaultProps() {

    return {
      defaultStyle: {}
    };
  },

  getInitialState: function getInitialState() {
    return {
      mouseOver: false
    };
  },

  render: function render() {
    var props = this.prepareProps(this.props);

    var cells = props.children || props.columns.map(this.renderCell.bind(this, this.props));

    var shadowClass = props.isExpandShadowClass ? '3px 3px 5px rgba(0,0,0,0.3)' : "";

    return React.createElement(
      'div',
      (0, _extends3.default)({ style: { boxShadow: shadowClass, position: 'relative' } }, props),
      cells
    );
  },

  prepareProps: function prepareProps(thisProps) {
    var props = assign({}, thisProps);

    props.className = this.prepareClassName(props, this.state);
    props.onMouseEnter = this.handleMouseEnter;
    props.onMouseLeave = this.handleMouseLeave;
    props.onContextMenu = this.handleContextMenu;
    props.onClick = this.handleRowClick;

    //new add
    props.handleHover = this.handleHover;
    props.handleMouseOut = this.handleMouseOut;

    delete props.data;
    delete props.cellPadding;

    return props;
  },

  handleRowClick: function handleRowClick(event) {

    if (this.props.onClick) {
      this.props.onClick(event);
    }

    if (this.props._onClick) {
      this.props._onClick(this.props, event);
    }
  },

  handleContextMenu: function handleContextMenu(event) {

    if (this.props.rowContextMenu) {
      this.showMenu(event);
    }

    if (this.props.onContextMenu) {
      this.props.onContextMenu(event);
    }
  },

  showMenu: function showMenu(event) {
    var factory = this.props.rowContextMenu;
    var alignTo = Region.from(event);

    var props = {
      style: {
        position: 'absolute'
      },
      rowProps: this.props,
      data: this.props.data,
      alignTo: alignTo,
      alignPositions: ['tl-bl', 'tr-br', 'bl-tl', 'br-tr'],
      items: [{
        label: 'stop'
      }]
    };

    var menu = factory(props);

    if (menu === undefined) {
      menu = ReactMenuFactory(props);
    }

    event.preventDefault();

    this.props.showMenu(function () {
      return menu;
    });
  },

  handleMouseLeave: function handleMouseLeave(event) {
    this.setState({
      mouseOver: false
    });

    if (this.props.onMouseLeave) {
      this.props.onMouseLeave(event);
    }
  },

  handleMouseEnter: function handleMouseEnter(event) {
    //wuzhe----通过调用this.props.onMouseEnter将当前hover行的index传到最外层
    //this.props.onMouseEnter具体内容写在src/index.js
    var rowIdx = this.props.index;
    var hoverRowInfo = assign({}, event);
    hoverRowInfo.rowIdx = rowIdx;
    if (this.props.onMouseEnter) {

      this.props.onMouseEnter(hoverRowInfo);
    }
  },

  handleHover: function handleHover(data) {
    this.props.handleHover(data, "hover");
  },

  handleMouseOut: function handleMouseOut(data) {
    this.props.handleHover(data, "out");
  },

  handleClick: function handleClick(data) {
    this.props.handleExpand(data);
  },

  //juan add 大名片展开折叠样式处理
  getExpandClass: function getExpandClass() {
    var _props$data = this.props.data,
        isFold = _props$data.isFold,
        isHover = _props$data.isHover,
        expandSign = _props$data.expandSign;


    if (!isFold) {
      return "pc-sys-arrowdown-active-svg";
    } else {
      return isHover ? "pc-sys-arrowright-active-svg" : "pc-sys-arrowright-nomal-svg";
    }
  },

  renderCell: function renderCell(props, column, index) {

    var text = void 0;

    text = props.data[column.name];
    //juan add 折叠和展开按钮图标isFold为true 折叠
    if (props.data) {
      var expandable = props.data.expandable;

      var expandIconClass = this.getExpandClass();

      if (column.name === "expand" && expandable === true) {
        text = React.createElement('span', {
          className: expandIconClass,
          onClick: this.handleClick.bind(this, props.data),
          onMouseOver: this.handleHover.bind(this, props.data),
          onMouseOut: this.handleMouseOut.bind(this, props.data) });
      }
    }

    var columns = props.columns;

    var cellProps = {
      style: column.style,
      className: column.className,

      key: column.name,
      name: column.name,

      data: props.data,
      columns: columns,
      index: index,
      rowIndex: props.index,
      columnsWith: props.columnsWith,
      textPadding: props.cellPadding,
      renderCell: props.renderCell,
      renderText: props.renderText,
      //juan add
      handleEdit: props.handleEdit,
      rowType: props.rowType,
      paddingSize: props.paddingSize,

      isLookUpV2: props.isLookUpV2
    };

    if (typeof column.render == 'function') {
      text = column.render(text, props.data, cellProps);
    }

    cellProps.text = text;

    var result;

    if (props.cellFactory) {
      result = props.cellFactory(cellProps);
    }

    if (result === undefined) {
      result = React.createElement(Cell, cellProps);
    }

    return result;
  },

  prepareClassName: function prepareClassName(props, state) {
    var className = props.className || '';

    className += ' z-row ';

    if (props.index % 2 === 0) {
      className += ' z-even ' + (props.evenClassName || '');
    } else {
      className += ' z-odd ' + (props.oddClassName || '');
    }

    //wuzhe----props.hoverStatus是依据从这里传出去的当前hover的行的index，判断出当前的行是否为hover状态
    //固定列hover的实现：由于固定列的实现原理是多渲染两个独立的表格，因此，固定列和原表格的hover效果是独立的，要做的就是让它们的hover效果同步
    //在这一层的handleMouseEnter函数中获得当前hover的行的index，并将其传出到最外层。在最外层对应的index.js文件中的onRowMouseEnter函数中获得hover行的index，
    //然后再在prepareProps函数中将index的值向下传，路径是src/index.js-->src/render/getTableProps.js-->src/render/renderRow.js，renderRow.js就是当前文件的上层
    //在renderRow.js中，通过判断即将渲染的行的index与传入的hover的index值是否相同，确定是否是hover的行，最终实现一致的hover的效果
    if (props.vRolling) {
      //wuzhe----处在纵向滚动的过程中时，清除所以hover效果
      className += props.overClassName || '';
    } else if (state.mouseOver || props.hoverStatus) {
      className += ' z-over ' + (props.overClassName || '');
    }

    if (props.selected || props.data && props.data.checked) {
      className += ' z-selected ' + (props.selectedClassName || '');
    }

    if (props.paddingSize == 15) {
      className += ' z-row_big-height ';
    }

    return className;
  },

  prepareStyle: function prepareStyle(props) {

    var style = assign({}, props.defaultStyle, props.style);

    style.height = props.rowHeight;
    style.minWidth = props.minWidth;

    return style;
  }
});