@douyinfe/semi-ui/lib/cjs/table/TableHeader.js

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
var _noop2 = _interopRequireDefault(require("lodash/noop"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
var _utils = require("@douyinfe/semi-foundation/lib/cjs/table/utils");
var _TableHeaderRow = _interopRequireDefault(require("./TableHeaderRow"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function parseHeaderRows(columns) {
  const rows = [];
  function fillRowCells(columns, colIndex) {
    let parents = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
    let rowIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
    let level = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
    // Init rows
    rows[rowIndex] = rows[rowIndex] || [];
    let currentColIndex = colIndex;
    const colSpans = columns.map(column => {
      const cell = {
        key: column.key,
        className: column.className || '',
        children: (0, _isFunction2.default)(column.title) ? column.title() : column.title,
        column,
        colStart: currentColIndex,
        level,
        parents
      };
      let colSpan = 1;
      /**
        * Calculate header column merge colSpan
        *  - If the current cell has children, colSpan = the sum of children rowSpan
        *  - If the current cell has no children, colSpan = 1
        */
      const subColumns = column.children;
      if (subColumns && subColumns.length > 0) {
        colSpan = fillRowCells(subColumns, currentColIndex, [...parents, cell], rowIndex + 1, level + 1).reduce((total, count) => total + count, 0);
        cell.hasSubColumns = true;
      }
      if ('colSpan' in column) {
        ({
          colSpan
        } = column);
      }
      if ('rowSpan' in column) {
        cell.rowSpan = column.rowSpan;
      }
      if (column.key === _constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR) {
        cell['x-type'] = _constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR;
      }
      cell.colSpan = colSpan;
      cell.colEnd = cell.colStart + colSpan - 1;
      rows[rowIndex].push(cell);
      currentColIndex += colSpan;
      const ellipsis = column === null || column === void 0 ? void 0 : column.ellipsis;
      const shouldShowTitle = (0, _utils.shouldShowEllipsisTitle)(ellipsis);
      if (shouldShowTitle && typeof cell.children === 'string') {
        cell.title = cell.children;
      }
      return colSpan;
    });
    return colSpans;
  }
  // Generate `rows` cell data
  fillRowCells(columns, 0);
  /**
   * Calculate header row merge rowSpan
   *  - If the current cell has no children, you need to calculate rowSpan, rowSpan = the total number of rows in the header-which row currently belongs to
   *  - If the current cell has children, there is no need to calculate rowSpan
   *
   * 计算表头行合并 rowSpan
   *  - 如果当前cell没有children，则需要计算rowSpan，rowSpan = 表头总行数 - 当前属于第几行
   *  - 如果当前cell有children，则无需计算rowSpan
   */
  const rowCount = rows.length;
  for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
    rows[rowIndex].forEach(cell => {
      if (!('rowSpan' in cell) && !cell.hasSubColumns) {
        cell.rowSpan = rowCount - rowIndex;
      }
    });
  }
  return rows;
}
/**
 * Render the header of the table header, and control the merging of the columns of the header
 */
class TableHeader extends _baseComponent.default {
  get adapter() {
    return Object.assign({}, super.adapter);
  }
  render() {
    const {
      components,
      columns,
      prefixCls,
      fixed,
      onHeaderRow,
      forwardedRef,
      selectedRowKeysSet
    } = this.props;
    const rows = parseHeaderRows(columns);
    const HeaderWrapper = components.header.wrapper;
    return /*#__PURE__*/_react.default.createElement(HeaderWrapper, {
      className: `${prefixCls}-thead`,
      ref: forwardedRef
    }, rows.map((row, idx) => (/*#__PURE__*/_react.default.createElement(_TableHeaderRow.default, {
      prefixCls: prefixCls,
      key: idx,
      index: idx,
      fixed: fixed,
      columns: columns,
      row: row,
      components: components,
      onHeaderRow: onHeaderRow,
      selectedRowKeysSet: selectedRowKeysSet
    }))));
  }
}
TableHeader.propTypes = {
  components: _propTypes.default.any,
  columns: _propTypes.default.array,
  columnManager: _propTypes.default.object,
  prefixCls: _propTypes.default.string,
  onHeaderRow: _propTypes.default.func,
  onDidUpdate: _propTypes.default.func,
  fixed: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
  selectedRowKeysSet: _propTypes.default.instanceOf(Set).isRequired
};
TableHeader.defaultProps = {
  columns: [],
  prefixCls: _constants.cssClasses.PREFIX,
  onHeaderRow: _noop2.default,
  onDidUpdate: _noop2.default,
  components: {
    header: {
      wrapper: 'thead',
      row: 'tr',
      cell: 'th'
    }
  }
};
var _default = exports.default = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(TableHeader, Object.assign({}, props, {
  forwardedRef: ref
})));