choerodon-ui/pro/es/table/TableHeader.js

An enterprise-class UI design language and React-based implementation

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useContext, useRef, useState } from 'react';
import { observer } from 'mobx-react-lite';
import classNames from 'classnames';
import TableHeaderCell from './TableHeaderCell';
import TableContext from './TableContext';
import { ColumnLock } from './enum';
import { getTableHeaderRows, isStickySupport } from './utils';
import TableHeaderRow from './TableHeaderRow';
import ExpandIcon from './ExpandIcon';

var TableHeader = function TableHeader(props) {
  var _classNames;

  var lock = props.lock;

  var _useContext = useContext(TableContext),
      prefixCls = _useContext.prefixCls,
      border = _useContext.border,
      tableStore = _useContext.tableStore,
      dataSet = _useContext.dataSet;

  var columnResizable = tableStore.columnResizable,
      columnResizing = tableStore.columnResizing,
      columnGroups = tableStore.columnGroups;
  var columns = columnGroups.columns;
  var headerRows = getTableHeaderRows(lock ? columns.filter(function (group) {
    return group.lock === lock;
  }) : columns);

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      isHeaderHover = _useState2[0],
      setIsHeaderHover = _useState2[1];

  var nodeRef = useRef(null);
  var getHeaderNode = useCallback(function () {
    return nodeRef.current;
  }, [nodeRef]);
  var handleTheadMouseEnter = useCallback(function () {
    setIsHeaderHover(true);
  }, []);
  var handleTheadMouseLeave = useCallback(function () {
    setIsHeaderHover(false);
  }, []);
  var isExpanded = tableStore.isBodyExpanded;
  var handleExpandChange = useCallback(function () {
    tableStore.setBodyExpanded(!isExpanded);
  }, [tableStore, isExpanded]);

  var renderExpandIcon = function renderExpandIcon() {
    var record = dataSet.get(0);

    if (record) {
      var expandIcon = tableStore.expandIcon;

      if (typeof expandIcon === 'function') {
        return expandIcon({
          prefixCls: prefixCls,
          expanded: isExpanded,
          expandable: true,
          needIndentSpaced: false,
          onExpand: handleExpandChange,
          record: record
        });
      }

      return React.createElement(ExpandIcon, {
        prefixCls: prefixCls,
        expandable: true,
        onChange: handleExpandChange,
        expanded: isExpanded
      });
    }
  };

  var expandIconColumnIndex = tableStore.props.bodyExpandable ? lock === ColumnLock.right ? columnGroups.leafs.filter(function (group) {
    return group.column.lock !== ColumnLock.right;
  }).length : 0 : -1;

  var hasExpandIcon = function hasExpandIcon(columnIndex) {
    return expandIconColumnIndex > -1 && columnIndex + expandIconColumnIndex === tableStore.expandIconColumnIndex;
  };

  var getTrs = function getTrs() {
    return headerRows.map(function (row, rowIndex) {
      var length = row.length;
      var rowKey = String(rowIndex);

      if (length) {
        var notLockLeft = lock !== ColumnLock.left;
        var lastColumnClassName = notLockLeft ? "".concat(prefixCls, "-cell-last") : undefined;
        var hasPlaceholder = tableStore.overflowY && rowIndex === 0 && notLockLeft;
        var tds = row.map(function (col, index) {
          if (!col.hidden) {
            var key = col.key,
                rowSpan = col.rowSpan,
                colSpan = col.colSpan,
                children = col.children;
            var cellProps = {
              key: key,
              columnGroup: col,
              getHeaderNode: getHeaderNode,
              rowIndex: rowIndex
            };

            if (notLockLeft && !hasPlaceholder && index === length - 1 && columnGroups.lastLeaf === col.lastLeaf) {
              cellProps.className = lastColumnClassName;
            }

            if (rowSpan > 1 || children) {
              cellProps.rowSpan = rowSpan;
            }

            if (colSpan > 1 || children) {
              cellProps.colSpan = colSpan;
            }

            return React.createElement(TableHeaderCell, _extends({}, cellProps, {
              scope: children ? 'colgroup' : 'col'
            }), rowIndex === headerRows.length - 1 && hasExpandIcon(index) ? renderExpandIcon() : undefined);
          }

          return undefined;
        });

        if (hasPlaceholder) {
          var placeHolderProps = {
            key: 'fixed-column',
            rowSpan: headerRows.length
          };
          var classList = ["".concat(prefixCls, "-cell"), lastColumnClassName];

          if (isStickySupport() && tableStore.overflowX) {
            placeHolderProps.style = tableStore.isAnyColumnsRightLock ? {
              right: 0
            } : {};
            classList.push("".concat(prefixCls, "-cell-fix-right"));
          }

          placeHolderProps.className = classList.join(' ');
          tds.push(React.createElement("th", _extends({}, placeHolderProps), "\xA0"));
        }

        return React.createElement(TableHeaderRow, {
          key: rowKey,
          rowIndex: rowIndex,
          rows: headerRows,
          lock: lock
        }, tds);
      }

      return React.createElement("tr", {
        key: rowKey
      });
    });
  };

  var theadProps = {
    ref: nodeRef,
    className: classNames("".concat(prefixCls, "-thead"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-column-resizing"), columnResizing), _defineProperty(_classNames, "".concat(prefixCls, "-column-resizable"), columnResizable), _defineProperty(_classNames, "".concat(prefixCls, "-thead-hover"), isHeaderHover || columnResizing), _classNames))
  };

  if (!isStickySupport() && !border && tableStore.overflowX) {
    theadProps.onMouseEnter = handleTheadMouseEnter;
    theadProps.onMouseLeave = handleTheadMouseLeave;
  }

  return React.createElement("thead", _extends({}, theadProps), getTrs());
};

TableHeader.displayName = 'TableHeader';
export default observer(TableHeader);
//# sourceMappingURL=TableHeader.js.map