choerodon-ui/pro/lib/performance-table/ColumnGroup.js

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

"use strict";

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

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

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

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

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

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

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

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

var _isString = _interopRequireDefault(require("lodash/isString"));

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

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

var _excluded = ["header", "className", "children", "classPrefix", "headerHeight", "verticalAlign", "width", "left", "headerLeft", "fixed"];

var ColumnGroup = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var header = props.header,
      className = props.className,
      children = props.children,
      classPrefix = props.classPrefix,
      _props$headerHeight = props.headerHeight,
      headerHeight = _props$headerHeight === void 0 ? 80 : _props$headerHeight,
      verticalAlign = props.verticalAlign,
      width = props.width,
      left = props.left,
      _props$headerLeft = props.headerLeft,
      headerLeft = _props$headerLeft === void 0 ? 0 : _props$headerLeft,
      fixed = props.fixed,
      rest = (0, _objectWithoutProperties2["default"])(props, _excluded);

  var _useContext = (0, _react.useContext)(_TableContext["default"]),
      scrollX = _useContext.scrollX,
      _useContext$tableWidt = _useContext.tableWidth,
      tableWidth = _useContext$tableWidt === void 0 ? 0 : _useContext$tableWidt,
      tableStore = _useContext.tableStore;

  var groupHeaderRef = (0, _react.useRef)(null);
  var originalColumns = tableStore.originalColumns;
  var height = headerHeight / 2;
  var styles = {
    height: height,
    width: width,
    left: left
  };
  var contentStyles = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, styles), {}, {
    verticalAlign: verticalAlign
  });

  var addPrefix = function addPrefix(name) {
    return (0, _utils.prefix)(classPrefix)(name);
  }; // 组合列 header 随滚动条滚动居中。


  var headerMiddleStyle = undefined;

  if (groupHeaderRef && groupHeaderRef.current && !fixed) {
    var fixedWidth = originalColumns.reduce(function (prev, current) {
      if (current.fixed === true || current.fixed === 'left') {
        prev.leftWidth = prev.leftWidth + (current.width || 0);
      } else if (current.fixed === 'right') {
        prev.rightWidth = prev.rightWidth + (current.width || 0);
      }

      return prev;
    }, {
      leftWidth: 0,
      rightWidth: 0
    });
    var mathScrollX = Math.abs(scrollX);
    var calcTableWidth = tableWidth - fixedWidth.rightWidth;
    var mathPostionLeft = headerLeft - calcTableWidth;
    var leftDistanceFixed = headerLeft - fixedWidth.leftWidth;
    var positionLeft = 0;
    var beyondWidth = 0;

    if (mathScrollX > leftDistanceFixed) {
      beyondWidth = mathScrollX - leftDistanceFixed;
    }

    if (mathScrollX > mathPostionLeft && width) {
      var percent = calcTableWidth + mathScrollX - headerLeft + (beyondWidth > 0 ? beyondWidth : 0);

      if (mathScrollX + calcTableWidth > headerLeft + width) {
        percent -= mathScrollX + calcTableWidth - (headerLeft + width);
      }

      var getHeaderWidth = groupHeaderRef.current.offsetWidth;
      var minLeft = getHeaderWidth / 2;
      var maxLeft = width - getHeaderWidth / 2;
      positionLeft = percent > 0 && percent / 2 < width ? percent / 2 : 0;

      if (positionLeft < minLeft) {
        positionLeft = minLeft;
      } else if (positionLeft > maxLeft) {
        positionLeft = maxLeft;
      }
    }

    headerMiddleStyle = {
      position: 'absolute',
      top: '50%',
      left: positionLeft ? positionLeft : '50%',
      transform: 'translate(-50%, -50%)'
    };
  }

  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    ref: ref,
    className: (0, _classnames["default"])(classPrefix, className)
  }, rest), /*#__PURE__*/_react["default"].createElement("div", {
    className: addPrefix('header'),
    style: styles
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: addPrefix('header-content'),
    style: contentStyles
  }, (0, _isString["default"])(header) ? /*#__PURE__*/_react["default"].createElement("span", {
    style: headerMiddleStyle,
    ref: groupHeaderRef
  }, header) : /*#__PURE__*/(0, _react.isValidElement)(header) ? /*#__PURE__*/_react["default"].cloneElement(header) : header)), _react["default"].Children.map(children, function (node) {
    var nodeStyles = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, node.props.style), {}, {
      top: styles.height,
      left: styles.left
    });
    return /*#__PURE__*/_react["default"].cloneElement(node, {
      className: addPrefix('cell'),
      style: nodeStyles,
      children: /*#__PURE__*/_react["default"].createElement("span", {
        className: addPrefix('cell-content')
      }, node.props.children)
    });
  }));
});

ColumnGroup.displayName = 'ColumnGroup';
ColumnGroup.__PRO_TABLE_COLUMN_GROUP = true;
ColumnGroup.defaultProps = {
  headerHeight: 80,
  classPrefix: (0, _utils.defaultClassPrefix)('performance-table-column-group')
};
var _default = ColumnGroup;
exports["default"] = _default;
//# sourceMappingURL=ColumnGroup.js.map