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 _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import { action, computed } from 'mobx';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import measureScrollbar from '../../../es/_util/measureScrollbar';
import TableHeaderCell from './TableHeaderCell';
import TableContext from './TableContext';
import { ColumnLock } from './enum';
import { getColumnKey, getColumnLock, getHeight as _getHeight, isStickySupport } from './utils';
import autobind from '../_util/autobind';
import TableHeaderRow from './TableHeaderRow';

var TableHeader =
/*#__PURE__*/
function (_Component) {
  _inherits(TableHeader, _Component);

  var _super = _createSuper(TableHeader);

  function TableHeader() {
    _classCallCheck(this, TableHeader);

    return _super.apply(this, arguments);
  }

  _createClass(TableHeader, [{
    key: "saveRef",
    value: function saveRef(node) {
      this.node = node;
    }
  }, {
    key: "getHeaderNode",
    value: function getHeaderNode() {
      return this.node;
    }
  }, {
    key: "handleTheadMouseEnter",
    value: function handleTheadMouseEnter() {
      var tableStore = this.context.tableStore;
      tableStore.isHeaderHover = true;
    }
  }, {
    key: "handleTheadMouseLeave",
    value: function handleTheadMouseLeave() {
      var tableStore = this.context.tableStore;
      tableStore.isHeaderHover = false;
    }
  }, {
    key: "getTrs",
    value: function getTrs() {
      var _this = this;

      var _this$props = this.props,
          lock = _this$props.lock,
          dataSet = _this$props.dataSet;
      var tableStore = this.context.tableStore;
      var prefixCls = tableStore.prefixCls;
      var rows = this.getTableHeaderRows(this.groupedColumns);
      return rows.map(function (row, rowIndex) {
        if (row.length) {
          var hasPlaceholder = tableStore.overflowY && rowIndex === 0 && lock !== ColumnLock.left;
          var prevColumn;
          var placeholderWidth = hasPlaceholder ? measureScrollbar() : 0;
          var tds = row.map(function (col, index, cols) {
            if (!col.hidden) {
              var column = col.column,
                  rowSpan = col.rowSpan,
                  colSpan = col.colSpan,
                  lastLeaf = col.lastLeaf,
                  children = col.children;
              var key = String(getColumnKey(column));
              var props = {
                key: key,
                dataSet: dataSet,
                prevColumn: prevColumn,
                column: column,
                resizeColumn: lastLeaf,
                getHeaderNode: _this.getHeaderNode
              };

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

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

              prevColumn = lastLeaf;

              if (isStickySupport() && tableStore.overflowX) {
                var columnLock = getColumnLock(column.lock);

                if (columnLock === ColumnLock.left) {
                  props.style = {
                    left: pxToRem(col.left)
                  };
                  var next = cols[index + 1];

                  if (!next || getColumnLock(next.column.lock) !== ColumnLock.left) {
                    props.className = "".concat(prefixCls, "-cell-fix-left-last");
                  }
                } else if (columnLock === ColumnLock.right) {
                  props.style = {
                    right: pxToRem(col.right + placeholderWidth)
                  };
                  var prev = cols[index - 1];

                  if (!prev || prev.column.lock !== ColumnLock.right) {
                    props.className = "".concat(prefixCls, "-cell-fix-right-first");
                  }
                }
              }

              return React.createElement(TableHeaderCell, _extends({}, props));
            }

            return undefined;
          });

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

            if (isStickySupport() && tableStore.overflowX) {
              var hasColRightLock = tds.some(function (td) {
                if (td) {
                  return td.props.column.lock === ColumnLock.right;
                }

                return false;
              });
              placeHolderProps.style = hasColRightLock ? {
                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: String(rowIndex),
            rowIndex: rowIndex,
            tds: tds,
            rows: rows,
            lock: lock
          });
        }

        return undefined;
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames;

      var _this$context$tableSt = this.context.tableStore,
          prefixCls = _this$context$tableSt.prefixCls,
          overflowX = _this$context$tableSt.overflowX,
          columnResizable = _this$context$tableSt.columnResizable,
          isHeaderHover = _this$context$tableSt.isHeaderHover,
          columnResizing = _this$context$tableSt.columnResizing,
          border = _this$context$tableSt.props.border;
      var trs = this.getTrs();
      var theadProps = {
        ref: this.saveRef,
        className: classNames("".concat(prefixCls, "-thead"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-column-resizable"), columnResizable), _defineProperty(_classNames, "".concat(prefixCls, "-column-group"), trs && trs.length > 1), _defineProperty(_classNames, "".concat(prefixCls, "-thead-hover"), isHeaderHover || columnResizing), _classNames))
      };

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

      return React.createElement("thead", _extends({}, theadProps), trs);
    }
  }, {
    key: "getHeight",
    value: function getHeight() {
      var node = this.node;

      if (node) {
        return _getHeight(node);
      }

      return 0;
    }
  }, {
    key: "getTableHeaderRows",
    value: function getTableHeaderRows(columns) {
      var _this2 = this;

      var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
      var rows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
      rows[currentRow] = rows[currentRow] || [];
      columns.forEach(function (column) {
        var hidden = column.hidden,
            rowSpan = column.rowSpan,
            colSpan = column.colSpan,
            children = column.children;

        if (!hidden) {
          if (rowSpan && rows.length < rowSpan) {
            while (rows.length < rowSpan) {
              rows.push([]);
            }
          }

          if (children) {
            _this2.getTableHeaderRows(children.columns, currentRow + rowSpan, rows);
          }

          if (colSpan !== 0) {
            rows[currentRow].push(column);
          }
        }
      });
      return rows;
    }
  }, {
    key: "groupedColumns",
    get: function get() {
      var tableStore = this.context.tableStore;
      var lock = this.props.lock;

      switch (lock) {
        case ColumnLock.left:
        case true:
          return tableStore.leftGroupedColumns;

        case ColumnLock.right:
          return tableStore.rightGroupedColumns;

        default:
          return tableStore.groupedColumns;
      }
    }
  }]);

  return TableHeader;
}(Component);

TableHeader.displayName = 'TableHeader';
TableHeader.propTypes = {
  lock: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([ColumnLock.right, ColumnLock.left])])
};
TableHeader.contextType = TableContext;

__decorate([autobind], TableHeader.prototype, "saveRef", null);

__decorate([autobind], TableHeader.prototype, "getHeaderNode", null);

__decorate([autobind, action], TableHeader.prototype, "handleTheadMouseEnter", null);

__decorate([autobind, action], TableHeader.prototype, "handleTheadMouseLeave", null);

__decorate([computed], TableHeader.prototype, "groupedColumns", null);

TableHeader = __decorate([observer], TableHeader);
export default TableHeader;
//# sourceMappingURL=TableHeader.js.map