zarm-web/es/table/FixedColumn.js

基于 React 的桌面端UI库

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

class FixedColumn extends Component {
  renderRows(column, height) {
    const {
      dataSource,
      onEnterRow,
      onLeaveRow,
      rowClassName
    } = this.props;
    const {
      render,
      dataIndex
    } = column;
    const size = dataSource.length;
    let iHeight = parseInt(height, 10); // eslint-disable-next-line no-restricted-globals

    if (isNaN(iHeight)) {
      iHeight = 41;
    }

    return dataSource.map((data, index) => {
      const tdHeight = index === size - 1 ? iHeight - 1 : height;
      const rowClass = classnames({
        [`${rowClassName && rowClassName(data)}`]: !!(rowClassName && rowClassName(data))
      });
      return React.createElement("tr", {
        key: index.toString(),
        onMouseEnter: () => onEnterRow(index),
        onMouseLeave: () => onLeaveRow(),
        className: rowClass
      }, React.createElement("td", {
        style: {
          height: tdHeight
        }
      }, typeof render === 'function' ? render(data[dataIndex], data, index) : data[dataIndex]));
    });
  }

  renderSelection(thHeight, tdHeight) {
    const {
      prefixCls,
      direction,
      rowSelection,
      renderSelect,
      renderSelectAll,
      onEnterRow,
      onLeaveRow,
      dataSource,
      rowClassName
    } = this.props;
    const size = dataSource.length;
    let iHeight = parseInt(tdHeight, 10); // eslint-disable-next-line no-restricted-globals

    if (isNaN(iHeight)) {
      iHeight = 41;
    }

    const cls = `${prefixCls}-fixed-${direction}`;
    return React.createElement("table", {
      ref: fixedCol => {
        this[`fixed${direction}Col`] = fixedCol;
      },
      className: cls
    }, React.createElement("thead", null, React.createElement("tr", null, rowSelection ? renderSelectAll(rowSelection, dataSource, 1, thHeight) : null)), React.createElement("tbody", {
      ref: fixedTbody => {
        this[`fixed${direction}Tbody`] = fixedTbody;
      }
    }, dataSource.map((data, index) => {
      const height = index === size - 1 ? iHeight - 1 : tdHeight;
      const rowClass = classnames({
        [`${rowClassName && rowClassName(data)}`]: !!(rowClassName && rowClassName(data))
      });
      return React.createElement("tr", {
        key: index.toString(),
        onMouseEnter: () => onEnterRow(index),
        onMouseLeave: () => onLeaveRow(),
        className: rowClass
      }, rowSelection ? renderSelect(rowSelection, data, height) : null);
    })));
  }

  render() {
    const {
      direction,
      columns = [],
      prefixCls,
      colAttrs,
      rowSelection
    } = this.props;
    const {
      fixedColThHeight,
      fixedColTdHeight,
      fixedleftColWidth,
      fixedrightColWidth
    } = colAttrs;
    const column = direction === 'left' ? columns[0] : columns[columns.length - 1];
    const columnWidth = direction === 'left' ? fixedleftColWidth : fixedrightColWidth;

    if (!column) {
      return null;
    }

    const {
      fixed,
      title
    } = column;
    const cls = `${prefixCls}-fixed-${direction}`;

    if (direction === 'left' && rowSelection && rowSelection.fixed) {
      return this.renderSelection(fixedColThHeight, fixedColTdHeight);
    }

    if (fixed && fixed === direction) {
      return React.createElement("table", {
        ref: fixedCol => {
          this[`fixed${direction}Col`] = fixedCol;
        },
        className: cls
      }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
        style: {
          width: columnWidth,
          height: fixedColThHeight
        }
      }, title))), React.createElement("tbody", {
        ref: fixedTbody => {
          this[`fixed${direction}Tbody`] = fixedTbody;
        }
      }, this.renderRows(column, fixedColTdHeight)));
    }

    return null;
  }

}

export default FixedColumn;