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 TableHeader = (0, _mobxReactLite.observer)(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;

  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 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));
          }

          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 = TableHeader;
exports["default"] = _default;
//# sourceMappingURL=TableHeader.js.map