zarm-web/es/table/Cell.js

基于 React 的桌面端UI库

import React, { Component } from 'react';
import Popover from '../popover';

class Cell extends Component {
  renderMergedCell(column, columnIndex, render) {
    const {
      maxCellSize
    } = this.props;
    const {
      colSpan,
      rowSpan,
      value
    } = render;
    const {
      style = {}
    } = column;

    if (colSpan === 0 || rowSpan === 0) {
      return null;
    } // 字符长度判断


    if (typeof value === 'string' && value.length > maxCellSize && maxCellSize !== 0) {
      return React.createElement("td", {
        key: column.dataIndex + columnIndex,
        style: style,
        colSpan: colSpan,
        rowSpan: rowSpan
      }, React.createElement(Popover, {
        trigger: "hover",
        direction: "top",
        content: value
      }, React.createElement("div", {
        className: "ellipsis-cell",
        style: {
          maxWidth: 15 * maxCellSize
        }
      }, value)));
    }

    return React.createElement("td", {
      style: style,
      key: column.dataIndex + columnIndex,
      colSpan: colSpan,
      rowSpan: rowSpan
    }, value);
  }

  render() {
    const {
      maxCellSize,
      column,
      row,
      rowIndex,
      columnIndex
    } = this.props;
    const value = row[column.dataIndex];
    const {
      style = {}
    } = column;
    const render = 'render' in column ? column.render(value, row, rowIndex) : value; // 渲染需合并的单元格

    if (render && typeof render === 'object' && ('colSpan' in render || 'rowSpan' in render)) {
      return this.renderMergedCell(column, columnIndex, render);
    } // 字符长度判断


    if (typeof render === 'string' && render.length > maxCellSize && maxCellSize !== 0) {
      return React.createElement("td", {
        key: column.dataIndex + columnIndex,
        style: style
      }, React.createElement(Popover, {
        trigger: "hover",
        direction: "top",
        content: render
      }, React.createElement("div", {
        className: "ellipsis-cell",
        style: {
          maxWidth: 15 * maxCellSize
        }
      }, render)));
    }

    return React.createElement("td", {
      key: column.dataIndex + columnIndex,
      style: style
    }, render);
  }

}

export default Cell;