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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _mobxReactLite = require("mobx-react-lite");

var _classnames = _interopRequireDefault(require("classnames"));

var _TableHeaderCell = _interopRequireDefault(require("./TableHeaderCell"));

var _TableContext = _interopRequireDefault(require("./TableContext"));

var _enum = require("./enum");

var _utils = require("./utils");

var _TableHeaderRow = _interopRequireDefault(require("./TableHeaderRow"));

var _ExpandIcon = _interopRequireDefault(require("./ExpandIcon"));

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

  var lock = props.lock;

  var _useContext = (0, _react.useContext)(_TableContext["default"]),
      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 = (0, _utils.getTableHeaderRows)(lock ? columns.filter(function (group) {
    return group.lock === lock;
  }) : columns);

  var _useState = (0, _react.useState)(),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      isHeaderHover = _useState2[0],
      setIsHeaderHover = _useState2[1];

  var nodeRef = (0, _react.useRef)(null);
  var getHeaderNode = (0, _react.useCallback)(function () {
    return nodeRef.current;
  }, [nodeRef]);
  var handleTheadMouseEnter = (0, _react.useCallback)(function () {
    setIsHeaderHover(true);
  }, []);
  var handleTheadMouseLeave = (0, _react.useCallback)(function () {
    setIsHeaderHover(false);
  }, []);
  var isExpanded = tableStore.isBodyExpanded;
  var handleExpandChange = (0, _react.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["default"].createElement(_ExpandIcon["default"], {
        prefixCls: prefixCls,
        expandable: true,
        onChange: handleExpandChange,
        expanded: isExpanded
      });
    }
  };

  var expandIconColumnIndex = tableStore.props.bodyExpandable ? lock === _enum.ColumnLock.right ? columnGroups.leafs.filter(function (group) {
    return group.column.lock !== _enum.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 !== _enum.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["default"].createElement(_TableHeaderCell["default"], (0, _extends2["default"])({}, 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 ((0, _utils.isStickySupport)() && tableStore.overflowX) {
            placeHolderProps.style = tableStore.isAnyColumnsRightLock ? {
              right: 0
            } : {};
            classList.push("".concat(prefixCls, "-cell-fix-right"));
          }

          placeHolderProps.className = classList.join(' ');
          tds.push(_react["default"].createElement("th", (0, _extends2["default"])({}, placeHolderProps), "\xA0"));
        }

        return _react["default"].createElement(_TableHeaderRow["default"], {
          key: rowKey,
          rowIndex: rowIndex,
          rows: headerRows,
          lock: lock
        }, tds);
      }

      return _react["default"].createElement("tr", {
        key: rowKey
      });
    });
  };

  var theadProps = {
    ref: nodeRef,
    className: (0, _classnames["default"])("".concat(prefixCls, "-thead"), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-column-resizing"), columnResizing), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-column-resizable"), columnResizable), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-thead-hover"), isHeaderHover || columnResizing), _classNames))
  };

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

  return _react["default"].createElement("thead", (0, _extends2["default"])({}, theadProps), getTrs());
};

TableHeader.displayName = 'TableHeader';

var _default = (0, _mobxReactLite.observer)(TableHeader);

exports["default"] = _default;
//# sourceMappingURL=TableHeader.js.map