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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

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

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

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

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

var _tslib = require("tslib");

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _mobxReact = require("mobx-react");

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

var _mobx = require("mobx");

var _UnitConvertor = require("../../../lib/_util/UnitConvertor");

var _measureScrollbar = _interopRequireDefault(require("../../../lib/_util/measureScrollbar"));

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

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

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

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

var _autobind = _interopRequireDefault(require("../_util/autobind"));

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

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 = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var TableHeader =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(TableHeader, _Component);

  var _super = _createSuper(TableHeader);

  function TableHeader() {
    (0, _classCallCheck2["default"])(this, TableHeader);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(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 !== _enum.ColumnLock.left;
          var prevColumn;
          var placeholderWidth = hasPlaceholder ? (0, _measureScrollbar["default"])() : 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((0, _utils.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 ((0, _utils.isStickySupport)() && tableStore.overflowX) {
                var columnLock = (0, _utils.getColumnLock)(column.lock);

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

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

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

              return _react["default"].createElement(_TableHeaderCell["default"], (0, _extends2["default"])({}, props));
            }

            return undefined;
          });

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

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

                return false;
              });
              placeHolderProps.style = hasColRightLock ? {
                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: 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: (0, _classnames["default"])("".concat(prefixCls, "-thead"), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-column-resizable"), columnResizable), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-column-group"), trs && trs.length > 1), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-thead-hover"), isHeaderHover || columnResizing), _classNames))
      };

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

      return _react["default"].createElement("thead", (0, _extends2["default"])({}, theadProps), trs);
    }
  }, {
    key: "getHeight",
    value: function getHeight() {
      var node = this.node;

      if (node) {
        return (0, _utils.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 _enum.ColumnLock.left:
        case true:
          return tableStore.leftGroupedColumns;

        case _enum.ColumnLock.right:
          return tableStore.rightGroupedColumns;

        default:
          return tableStore.groupedColumns;
      }
    }
  }]);
  return TableHeader;
}(_react.Component);

TableHeader.displayName = 'TableHeader';
TableHeader.propTypes = {
  lock: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf([_enum.ColumnLock.right, _enum.ColumnLock.left])])
};
TableHeader.contextType = _TableContext["default"];
(0, _tslib.__decorate)([_autobind["default"]], TableHeader.prototype, "saveRef", null);
(0, _tslib.__decorate)([_autobind["default"]], TableHeader.prototype, "getHeaderNode", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], TableHeader.prototype, "handleTheadMouseEnter", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], TableHeader.prototype, "handleTheadMouseLeave", null);
(0, _tslib.__decorate)([_mobx.computed], TableHeader.prototype, "groupedColumns", null);
TableHeader = (0, _tslib.__decorate)([_mobxReact.observer], TableHeader);
var _default = TableHeader;
exports["default"] = _default;
//# sourceMappingURL=TableHeader.js.map