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

beisencloud pc react components

'use strict';

var _commonFunc = require('../../common-func');

var React = require('react');
var assign = require('object-assign');
var normalize = require('react-style-normalizer');
var ToolTip = require('../../tool-tip');

var TEXT_ALIGN_2_JUSTIFY = {
  right: 'flex-end',
  center: 'center'
};

function copyProps(target, source, list) {

  list.forEach(function (name) {
    if (name in source) {
      target[name] = source[name];
    }
  });
}

var PropTypes = React.PropTypes;

var Cell = React.createClass({

  displayName: 'ReactDataGrid.Cell',

  propTypes: {
    className: PropTypes.string,
    firstClassName: PropTypes.string,
    lastClassName: PropTypes.string,

    contentPadding: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

    column: PropTypes.object,
    columns: PropTypes.array,
    index: PropTypes.number,

    style: PropTypes.object,
    text: PropTypes.any,
    rowIndex: PropTypes.number
  },

  getDefaultProps: function getDefaultProps() {
    return {
      text: '',

      firstClassName: 'z-first',
      lastClassName: 'z-last',

      defaultStyle: {}
    };
  },

  prepareClassName: function prepareClassName(props) {
    var index = props.index;
    var columns = props.columns;
    var column = props.column;

    var textAlign = column && column.textAlign;

    var className = props.className || '';

    className += ' ' + Cell.className;

    if (columns) {
      if (!index && props.firstClassName) {
        className += ' ' + props.firstClassName;
      }

      if (index == columns.length - 1 && props.lastClassName) {
        className += ' ' + props.lastClassName;
      }
    }

    if (column.numberType) {
      textAlign = "right";
    };

    if (textAlign) {
      className += ' z-align-' + textAlign;
    }

    if (props.isLookUpV2) {
      className += ' LookUpV2';
    }

    if (column.name == 'operator') {
      className += ' z-cell-operator';
    }

    return className;
  },

  prepareStyle: function prepareStyle(props) {
    var column = props.column;
    var sizeStyle = column && column.sizeStyle;

    var alignStyle;
    var textAlign = column && column.textAlign || (props.style || {}).textAlign;

    if (textAlign) {
      alignStyle = {
        justifyContent: TEXT_ALIGN_2_JUSTIFY[textAlign]
      };
    }

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

    return normalize(style);
  },

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

    if (!props.column && props.columns) {
      props.column = props.columns[props.index];
    }

    props.className = this.prepareClassName(props);
    props.style = this.prepareStyle(props);

    return props;
  },
  //处理编辑时的高亮逻辑
  handleHighLight: function handleHighLight(data, e) {
    e.preventDefault();
    var className = e.target.className;
    if (className && className.indexOf('z-column-header') !== -1) {
      return;
    }
    if (className && className.indexOf('z-content') !== -1 && className.indexOf('z-cell-high') === -1) {
      className = "z-content z-content-high";
    }
  },

  handleHighLightLeave: function handleHighLightLeave(data, e) {
    e.preventDefault();
    if (className && className.indexOf('z-content-high') !== -1) {
      className = "z-content";
    }
  },

  //juan 新增单元格编辑功能
  setEdit: function setEdit(col, rowId, event) {
    //当鼠标滑过事件为表头时data不存在
    if (this.props.data) {
      var tar = event.target;
      //计算出编辑框所在的位置
      var offset = this.getPosition(tar, {
        width: tar.offsetWidth,
        height: 43
      });
      //将列索引、行索引、单元格内容、挂载组件名称、挂载组件数据和位置传至业务
      if (this.props.handleEdit) {
        this.props.handleEdit(col, rowId, tar.innerText, offset);
      }
    }
  },

  getPosition: function getPosition(target) {
    var dom_offset = target.getBoundingClientRect();
    return {
      top: Math.floor(dom_offset.top),
      left: Math.floor(dom_offset.left)
    };
  },
  render: function render() {

    var props = this.p = this.prepareProps(this.props);
    var column = props.column;
    var textAlign = column && column.textAlign;
    var text = props.renderText ? props.renderText(props.text, column, props.rowIndex) : props.text;

    var tipText = "";
    if (typeof text == "string") {
      tipText = text;
    }
    //juan 非表头且列为可编辑
    if (props.data && props.column.editable) {
      //若无行id，则返回行索引
      var keyId = props.data.key_id ? props.data.key_id : props.rowIndex;
      //新增编辑图标
      text = React.createElement(
        'span',
        null,
        text,
        React.createElement('span', {
          className: 'pc-sys-tishi-nomal-small-svg',
          style: { float: 'right' } })
      );
      props.onMouseEnter = this.handleHighLight.bind(this, props);
      props.onMouseOut = this.handleHighLightLeave.bind(this, props);
      props.onDoubleClick = this.setEdit.bind(this, props.column, keyId); //传入列index和行index,从0开始
    }

    var cePadding = '';

    if (column.numberType && props.className.indexOf("z-column-header") !== -1) {
      cePadding = "0px 10px 0px 10px";
      if (props.className.indexOf("z-sortable") !== -1) {
        cePadding = "0px 15px 0px 10px";
      }
    } else if (props.className.indexOf("z-column-header") !== -1) {
      cePadding = "0px 10px 0px 10px";
      if (props.className.indexOf("z-sortable") !== -1) {
        cePadding = "0px 15px 0px 10px";
      }
    } else {
      cePadding = "10px 10px 10px 10px";
    }
    if (props.paddingSize) {
      cePadding = props.paddingSize + "px 10px " + props.paddingSize + "px 10px ";
    }

    var sty = "";
    var s = 0;
    if (props.rowType) {
      switch (props.rowType) {
        case "small":
          sty = "30px";
          s = 30;
          break;
        case "medium":
          sty = "50px";
          s = 50;
          break;
        case "big":
          sty = "80px";
          s = 80;
          break;
        default:
          s = 20;
          sty = "20px";
      }
    }
    //   if(props.paddingSize){
    //   sty = sty -
    // }
    if (text && text.props && text.props.isChecked !== undefined) {
      sty = s == 20 ? '23px' : '30px';
    }
    var contentProps = {
      className: 'z-content',
      style: {
        padding: cePadding,
        "lineHeight": sty,
        height: props.paddingSize * 2 + s + 1,
        'display': props.style.display
      }
    };
    if (props.className.indexOf("z-align-right") != -1) {
      contentProps.style.paddingRight = "20px";
    }

    var content = props.renderCell ? props.renderCell(contentProps, text, props) : React.createElement(
      'div',
      contentProps,
      text
    );

    if (tipText) {
      var content = props.renderCell ? props.renderCell(contentProps, text, props) : React.createElement(
        'div',
        contentProps,
        React.createElement(
          ToolTip,
          { title: (0, _commonFunc.decode)(tipText) },
          React.createElement(
            'span',
            { style: { "display": "block", "width": "100%", "overflow": "hidden", "textOverflow": "ellipsis", 'paddingTop': '5px' } },
            (0, _commonFunc.decode)(text)
          )
        )
      );
    } else {
      var content = props.renderCell ? props.renderCell(contentProps, text, props) : React.createElement(
        'div',
        contentProps,
        text
      );
    }

    var renderProps = assign({}, props);

    //给header自定义属性titleStyle
    if (renderProps.column.titleStyle && renderProps.className.indexOf('z-column-header') != -1) {
      renderProps.style = assign({}, renderProps.style, renderProps.column.titleStyle);
    }
    delete renderProps.data;

    if (renderProps.column.flexible) {
      //wuzhe----兼容ie10下的flex样式
      renderProps.style.WebkitBoxFlex = renderProps.column.flex || 1;
      renderProps.style.MsBoxFlex = renderProps.column.flex || 1;
      renderProps.style.MsFlex = renderProps.column.flex || 1;
      renderProps.style.WebkitFlex = renderProps.column.flex || 1;
      renderProps.style.flex = renderProps.column.flex || 1;
      renderProps.style.msFlexPositive = 1;
      renderProps.style.msFlexNegative = 0;
      renderProps.style.msFlexPreferredSize = "1px";
    } else {
      if (renderProps.column.fixedWidth && !renderProps.column.dropWidth) {
        renderProps.style.width = renderProps.column.fixedWidth + (renderProps.column.numberType ? 30 : 20);
        //防止超出最大宽度引发的问题，限制了最大宽度为3355000px
        renderProps.style.width = renderProps.style.width > 3355000 ? 3355000 : renderProps.style.width;
      } else {
        if (renderProps.header) {
          renderProps.style.width = renderProps.column.width;
        } else {
          if (renderProps.columnsWith || renderProps.column.width) {
            renderProps.style.width = renderProps.column.width;
          } else {
            renderProps.style.width = "auto";
          }
        }
      }
    }
    return React.createElement(
      'div',
      renderProps,
      content,
      props.children
    );
  }
});

Cell.className = 'z-cell';

module.exports = Cell;