zarm-web/es/table/Body.js

基于 React 的桌面端UI库

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { Component, Fragment } from 'react';
import classnames from 'classnames';

class Body extends Component {
  constructor(...args) {
    super(...args);
    this.scrollbody = void 0;
    this.row = void 0;
  }

  getRowKey(row, index) {
    const {
      rowKey
    } = this.props;
    let key;

    if (rowKey) {
      key = typeof rowKey === 'function' ? rowKey(row, index) : row[rowKey];
    } else {
      key = index;
    }

    return key;
  }

  handleToggleExpandRow(e, key, row) {
    e.stopPropagation();
    const {
      toggleExpandRow
    } = this.props;
    toggleExpandRow(key, row);
  }

  renderExpandIcon(row, index) {
    const {
      prefixCls,
      expandedRowRender,
      expandedRowKeys
    } = this.props;
    const key = this.getRowKey(row, index);
    const cls = classnames(`${prefixCls}-expand-icon`, {
      [`${prefixCls}-icon-expanded`]: expandedRowKeys.indexOf(key) > -1,
      [`${prefixCls}-icon-collapsed`]: expandedRowKeys.indexOf(key) < 0
    });

    if (expandedRowRender) {
      return React.createElement("td", {
        onClick: e => this.handleToggleExpandRow(e, key, row)
      }, React.createElement("span", {
        className: cls
      }));
    }
  }

  renderExpandedRow(row, index) {
    const {
      expandedRowRender,
      expandedRowKeys,
      rowSelection,
      prefixCls,
      dataColumns
    } = this.props;
    const key = this.getRowKey(row, index);
    let colSpan = dataColumns.length + 1;

    if (rowSelection) {
      colSpan += 1;
    }

    if (expandedRowKeys.indexOf(key) > -1) {
      return React.createElement("tr", {
        key: `expanded-row-${index}`,
        className: `${prefixCls}-expanded-row`
      }, React.createElement("td", {
        colSpan: colSpan
      }, expandedRowRender && expandedRowRender(row, index)));
    }

    return null;
  }

  render() {
    const {
      dataSource,
      dataColumns,
      rowSelection,
      renderSelect,
      renderCell,
      onEnterRow,
      onLeaveRow,
      rowClick,
      rowClassName
    } = this.props;
    return React.createElement("tbody", {
      ref: scrollbody => {
        this.scrollbody = scrollbody;
      }
    }, dataSource.map((row, rowIndex) => {
      const rowKey = this.getRowKey(row, rowIndex);
      const selection = rowSelection ? renderSelect(rowSelection, row) : null;
      const cells = dataColumns.map((column, columnIndex) => {
        return renderCell(column, row, rowIndex, columnIndex);
      });
      const rowClass = classnames({
        [`${rowClassName && rowClassName(row)}`]: !!(rowClassName && rowClassName(row))
      });
      const refAttr = rowIndex === 0 ? {
        ref: rowNode => {
          this.row = rowNode;
        }
      } : {};
      return React.createElement(Fragment, {
        key: rowKey
      }, React.createElement("tr", _extends({}, refAttr, {
        onMouseEnter: () => onEnterRow(rowIndex),
        onMouseLeave: () => onLeaveRow(),
        onClick: () => typeof rowClick === 'function' && rowClick(row),
        className: rowClass
      }), this.renderExpandIcon(row, rowIndex), selection, cells), this.renderExpandedRow(row, rowIndex));
    }));
  }

}

export default Body;