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

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

"use strict";

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

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

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

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

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

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

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

var _mobx = require("mobx");

var _reactIntersectionObserver = require("react-intersection-observer");

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

var _raf = _interopRequireDefault(require("raf"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _noop = _interopRequireDefault(require("lodash/noop"));

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

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));

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

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

var _ConfigContext = _interopRequireDefault(require("../../../lib/config-provider/ConfigContext"));

var _Column = require("./Column");

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

var _icon = _interopRequireDefault(require("../icon"));

var _EventManager = _interopRequireDefault(require("../_util/EventManager"));

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

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

var _enum2 = require("../field/enum");

var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));

var _transform = _interopRequireDefault(require("../_util/transform"));

var _singleton = require("../tooltip/singleton");

var _util = _interopRequireDefault(require("../overflow-tip/util"));

var _TableStore = require("./TableStore");

var _AggregationTree = require("./AggregationTree");

var _TableCellInner = _interopRequireDefault(require("./TableCellInner"));

var TableHeaderCell = function TableHeaderCell(props) {
  var columnGroup = props.columnGroup,
      rowSpan = props.rowSpan,
      colSpan = props.colSpan,
      className = props.className,
      rowIndex = props.rowIndex,
      _props$getHeaderNode = props.getHeaderNode,
      getHeaderNode = _props$getHeaderNode === void 0 ? _noop["default"] : _props$getHeaderNode,
      scope = props.scope,
      expandIcon = props.children,
      isSearchCell = props.isSearchCell;
  var column = columnGroup.column,
      key = columnGroup.key,
      prev = columnGroup.prev;

  var _useContext = (0, _react.useContext)(_TableContext["default"]),
      rowHeight = _useContext.rowHeight,
      border = _useContext.border,
      prefixCls = _useContext.prefixCls,
      tableStore = _useContext.tableStore,
      dataSet = _useContext.dataSet,
      aggregation = _useContext.aggregation,
      autoMaxWidth = _useContext.autoMaxWidth;

  var _useContext2 = (0, _react.useContext)(_ConfigContext["default"]),
      getTooltipTheme = _useContext2.getTooltipTheme,
      getTooltipPlacement = _useContext2.getTooltipPlacement;

  var columnResizable = tableStore.columnResizable,
      headerRowHeight = tableStore.headerRowHeight;
  var headerClassName = column.headerClassName,
      _column$headerStyle = column.headerStyle,
      headerStyle = _column$headerStyle === void 0 ? {} : _column$headerStyle,
      name = column.name,
      align = column.align,
      children = column.children,
      command = column.command,
      lock = column.lock;
  var field = dataSet.getField(name);
  var needIntersection = tableStore.virtualCell && tableStore.overflowX;

  var _useInView = (0, _reactIntersectionObserver.useInView)({
    root: needIntersection ? tableStore.node.wrapper : undefined,
    rootMargin: '100px',
    initialInView: true
  }),
      ref = _useInView.ref,
      inView = _useInView.inView;

  var aggregationTree = (0, _react.useMemo)(function () {
    if (aggregation) {
      var $column = columnGroup.column,
          headerGroup = columnGroup.headerGroup;

      if (headerGroup) {
        var tableGroup = columnGroup.tableGroup;

        if (tableGroup) {
          var columnProps = tableGroup.columnProps;
          var totalRecords = headerGroup.totalRecords;

          if (columnProps && totalRecords.length) {
            var _children = columnProps.children;

            if (_children && _children.length) {
              var renderer = function renderer(_ref) {
                var colGroup = _ref.colGroup,
                    style = _ref.style;
                return /*#__PURE__*/_react["default"].createElement(_TableCellInner["default"], {
                  record: totalRecords[0],
                  column: colGroup.column,
                  style: style,
                  inAggregation: true
                });
              };

              return (0, _AggregationTree.groupedAggregationTree)({
                columns: _children,
                headerGroup: headerGroup,
                column: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, $column), columnProps),
                renderer: renderer
              });
            }
          }
        }
      }
    }
  }, [columnGroup, aggregation]);
  var header = (0, _utils.getHeader)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, column), {}, {
    dataSet: dataSet,
    aggregation: aggregation,
    group: columnGroup.headerGroup,
    aggregationTree: aggregationTree
  }));
  var globalRef = (0, _react.useRef)({
    bodyLeft: 0,
    resizeBoundary: 0
  });
  var resizeEvent = (0, _react.useMemo)(function () {
    return new _EventManager["default"]();
  }, []);
  var setSplitLineHidden = (0, _react.useCallback)(function (hidden) {
    var resizeLine = tableStore.node.resizeLine;

    if (resizeLine) {
      resizeLine.style.display = hidden ? 'none' : 'block';
    }
  }, [tableStore]);
  var setSplitLinePosition = (0, _react.useCallback)((0, _mobx.action)(function (left) {
    var resizeLine = tableStore.node.resizeLine;
    var bodyLeft = globalRef.current.bodyLeft;
    left -= bodyLeft;

    if (left < 0) {
      left = 0;
    }

    if (resizeLine) {
      (0, _transform["default"])("translateX(".concat((0, _UnitConvertor.pxToRem)(left, true) || 0, ")"), resizeLine.style);
    }

    return left + bodyLeft;
  }), [tableStore, globalRef]);
  var resize = (0, _react.useCallback)(function (e) {
    var current = globalRef.current;
    var resizeColumnGroup = current.resizeColumnGroup;

    if (resizeColumnGroup) {
      var limit = current.resizeBoundary + (0, _Column.minColumnWidth)(resizeColumnGroup.column, tableStore);
      var left = e.clientX;

      if (left < limit) {
        left = limit;
      }

      current.resizePosition = setSplitLinePosition(left);
    }
  }, [globalRef, setSplitLinePosition]);
  var resizeEnd = (0, _react.useCallback)((0, _mobx.action)(function () {
    tableStore.columnResizing = false;
    setSplitLineHidden(true);
    resizeEvent.removeEventListener('mousemove').removeEventListener('mouseup');
    var _globalRef$current = globalRef.current,
        resizePosition = _globalRef$current.resizePosition,
        resizeColumnGroup = _globalRef$current.resizeColumnGroup;

    if (resizePosition !== undefined && resizeColumnGroup) {
      var resizeColumn = resizeColumnGroup.column;
      var newWidth = Math.round(Math.max(resizePosition - globalRef.current.resizeBoundary, (0, _Column.minColumnWidth)(resizeColumn, tableStore)));

      if (newWidth !== resizeColumn.width) {
        var width = resizeColumn.width;
        var group = resizeColumnGroup;
        var element = tableStore.node.element;

        while (group) {
          var _group = group,
              col = _group.column;

          if (col.width === undefined) {
            var th = element.querySelector(".".concat(prefixCls, "-thead .").concat(prefixCls, "-cell[data-index=\"").concat(col.name, "\"]"));

            if (th) {
              tableStore.setColumnWidth(group, th.offsetWidth);
            }
          }

          group = group.prev;
        }

        if (width === undefined) {
          (0, _raf["default"])(function () {
            tableStore.setColumnWidth(resizeColumnGroup, newWidth);
          });
        } else {
          tableStore.setColumnWidth(resizeColumnGroup, newWidth);
        }
      }
    }
  }), [globalRef, tableStore, setSplitLineHidden, resizeEvent]);
  var resizeStart = (0, _react.useCallback)((0, _mobx.action)(function (e) {
    tableStore.columnResizing = true;
    delete globalRef.current.resizePosition;
    setSplitLineHidden(false);
    var element = tableStore.node.element,
        tableColumnResizeTrigger = tableStore.tableColumnResizeTrigger;

    if (tableColumnResizeTrigger !== _enum.TableColumnResizeTriggerType.hover) {
      var _element$getBoundingC = element.getBoundingClientRect(),
          left = _element$getBoundingC.left;

      globalRef.current.bodyLeft = border ? left + 1 : left;
    }

    setSplitLinePosition(e.clientX);
    resizeEvent.setTarget(element.ownerDocument).addEventListener('mousemove', resize).addEventListener('mouseup', resizeEnd);
  }), [tableStore, globalRef, setSplitLineHidden, setSplitLinePosition, resizeEvent]);
  var delayResizeStart = (0, _react.useCallback)((0, _debounce["default"])(resizeStart, 300, {
    leading: true,
    trailing: false
  }), [resizeStart]);
  var prevColumnGroup = columnResizable ? prev && prev.lastLeaf : undefined;
  var currentColumnGroup = columnResizable ? columnGroup.lastLeaf : undefined;
  var handleClick = (0, _react.useCallback)(function () {
    if (name) {
      dataSet.sort(name);
    }
  }, [dataSet, name]);
  var handleMouseEnter = (0, _react.useCallback)(function (e) {
    var tooltip = tableStore.getColumnTooltip(column);
    var currentTarget = e.currentTarget;

    if (!tableStore.columnResizing && (tooltip === _enum.TableColumnTooltip.always || tooltip === _enum.TableColumnTooltip.overflow && (0, _util["default"])(currentTarget))) {
      (0, _singleton.show)(currentTarget, {
        title: header,
        placement: getTooltipPlacement('table-cell') || 'right',
        theme: getTooltipTheme('table-cell')
      });
      globalRef.current.tooltipShown = true;
    }
  }, [tableStore, column, globalRef, getTooltipTheme, getTooltipPlacement]);
  var handleMouseLeave = (0, _react.useCallback)(function () {
    if (globalRef.current.tooltipShown) {
      (0, _singleton.hide)();
      delete globalRef.current.tooltipShown;
    }
  }, [globalRef]);
  var setResizeGroup = (0, _react.useCallback)(function (group) {
    globalRef.current.resizeColumnGroup = group;
    var headerDom = getHeaderNode();
    var node = headerDom && headerDom.querySelector("[data-index=\"".concat(group.key, "\"]"));

    if (node) {
      globalRef.current.resizeBoundary = Math.round(node.getBoundingClientRect().left);
    }
  }, [globalRef, getHeaderNode]);
  var handleLeftResize = (0, _react.useCallback)(function (e) {
    if (prevColumnGroup) {
      setResizeGroup(prevColumnGroup);

      if (autoMaxWidth) {
        e.persist();
        delayResizeStart(e);
      } else {
        resizeStart(e);
      }
    }
  }, [prevColumnGroup, setResizeGroup, autoMaxWidth, delayResizeStart, resizeStart]);
  var handleRightResize = (0, _react.useCallback)(function (e) {
    if (currentColumnGroup) {
      setResizeGroup(currentColumnGroup);

      if (autoMaxWidth) {
        e.persist();
        delayResizeStart(e);
      } else {
        resizeStart(e);
      }
    }
  }, [currentColumnGroup, setResizeGroup, autoMaxWidth, delayResizeStart, resizeStart]);
  var showSplitLine = (0, _react.useCallback)(function (e, type) {
    var columnResizing = tableStore.columnResizing;
    if (columnResizing) return;
    setSplitLineHidden(false);
    var element = tableStore.node.element;

    var _element$getBoundingC2 = element.getBoundingClientRect(),
        left = _element$getBoundingC2.left;

    var _e$target$getBounding = e.target.getBoundingClientRect(),
        resizerLeft = _e$target$getBounding.left,
        width = _e$target$getBounding.width;

    var newLeft = resizerLeft + (type === 'pre' ? 0 : width);
    globalRef.current.bodyLeft = border ? left + 1 : left;
    setSplitLinePosition(newLeft);
  }, []);
  var delayShowSplitLine = (0, _react.useCallback)((0, _debounce["default"])(showSplitLine, 300), []);
  var handleShowSplitLine = (0, _react.useCallback)(function (e, type) {
    var tableColumnResizeTrigger = tableStore.tableColumnResizeTrigger;
    if (tableColumnResizeTrigger !== _enum.TableColumnResizeTriggerType.hover) return;
    e.persist();
    delayShowSplitLine(e, type);
  }, []);
  var handleHideSplitLine = (0, _react.useCallback)(function () {
    var tableColumnResizeTrigger = tableStore.tableColumnResizeTrigger;
    if (tableColumnResizeTrigger !== _enum.TableColumnResizeTriggerType.hover) return;
    delayShowSplitLine.cancel();
    var columnResizing = tableStore.columnResizing;
    if (columnResizing) return;
    setSplitLineHidden(true);
  }, []);
  var resizeDoubleClick = (0, _react.useCallback)((0, _mobx.action)(function () {
    var resizeColumnGroup = globalRef.current.resizeColumnGroup;

    if (resizeColumnGroup) {
      var col = resizeColumnGroup.column;
      var element = tableStore.node.element;
      var maxWidth = Math.max.apply(Math, (0, _toConsumableArray2["default"])((0, _toConsumableArray2["default"])(element.querySelectorAll("[data-index=\"".concat(resizeColumnGroup.key, "\"] > .").concat(prefixCls, "-cell-inner"))).map(function (node) {
        return node.parentNode.offsetWidth + (0, _utils.getMaxClientWidth)(node) - node.clientWidth + 1;
      })).concat([(0, _Column.minColumnWidth)(col, tableStore), col.width ? col.width : 0]));

      if (maxWidth !== col.width) {
        tableStore.setColumnWidth(resizeColumnGroup, maxWidth);
      } else if (col.minWidth) {
        tableStore.setColumnWidth(resizeColumnGroup, col.minWidth);
      }
    }
  }), [globalRef, prefixCls, tableStore]);
  var handleLeftDoubleClick = (0, _react.useCallback)(function () {
    resizeDoubleClick();
  }, [delayResizeStart, resizeDoubleClick]);
  var handleRightDoubleClick = (0, _react.useCallback)(function () {
    resizeDoubleClick();
  }, [delayResizeStart, resizeDoubleClick]);

  var renderResizer = function renderResizer() {
    var columns = tableStore.rightColumnGroups.columns,
        overflowX = tableStore.overflowX;
    var columnGroup = props.columnGroup;
    var resizerPrefixCls = "".concat(prefixCls, "-resizer");

    var pre = prevColumnGroup && prevColumnGroup.column.resizable && /*#__PURE__*/_react["default"].createElement("div", {
      key: "pre",
      className: "".concat(resizerPrefixCls, " ").concat(resizerPrefixCls, "-left"),
      onDoubleClick: autoMaxWidth ? handleLeftDoubleClick : undefined,
      onMouseDown: handleLeftResize,
      onMouseEnter: function onMouseEnter(e) {
        return handleShowSplitLine(e, 'pre');
      },
      onMouseLeave: handleHideSplitLine
    });

    var next = currentColumnGroup && currentColumnGroup.column.resizable && /*#__PURE__*/_react["default"].createElement("div", {
      key: "next",
      className: "".concat(resizerPrefixCls, " ").concat(resizerPrefixCls, "-right"),
      onDoubleClick: autoMaxWidth ? handleRightDoubleClick : undefined,
      onMouseDown: handleRightResize,
      onMouseEnter: function onMouseEnter(e) {
        return handleShowSplitLine(e, 'next');
      },
      onMouseLeave: handleHideSplitLine
    });

    if (columns.length && overflowX && columns[0].key === columnGroup.key) return next;
    return [pre, next];
  };

  var getHelpIcon = function getHelpIcon() {
    if (column.showHelp !== _enum2.ShowHelp.none) {
      var fieldHelp = (0, _defaultTo["default"])(field && field.get('help'), column.help);

      if (fieldHelp) {
        return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
          title: fieldHelp,
          placement: getTooltipPlacement('help'),
          theme: getTooltipTheme('help'),
          key: "help"
        }, /*#__PURE__*/_react["default"].createElement("span", {
          className: "".concat(prefixCls, "-help-icon")
        }));
      }
    }
  };

  (0, _react.useEffect)(function () {
    return function () {
      resizeEvent.clear();
      delayResizeStart.cancel();

      if (globalRef.current.tooltipShown) {
        (0, _singleton.hide)();
        delete globalRef.current.tooltipShown;
      }
    };
  }, []);
  (0, _react.useEffect)(function () {
    if (needIntersection) {
      columnGroup.setInView(inView);
    } else if (columnGroup.inView !== undefined) {
      columnGroup.setInView(undefined);
    }
  }, [needIntersection, columnGroup, inView]);
  var columnLock = (0, _utils.isStickySupport)() && tableStore.overflowX && (0, _utils.getColumnLock)(lock);
  var classList = ["".concat(prefixCls, "-cell")];
  var cellStyle = (0, _objectSpread2["default"])({
    textAlign: align || (command || children && children.length ? _enum.ColumnAlign.center : tableStore.getConfig('tableColumnAlign')(column, field))
  }, headerStyle);

  if (columnLock) {
    classList.push("".concat(prefixCls, "-cell-fix-").concat(columnLock));

    if (columnLock === _enum.ColumnLock.left) {
      cellStyle.left = (0, _UnitConvertor.pxToRem)(columnGroup.left, true);
    } else if (columnLock === _enum.ColumnLock.right) {
      cellStyle.right = (0, _UnitConvertor.pxToRem)(columnGroup.right + (rowIndex === 0 && tableStore.overflowY ? (0, _measureScrollbar["default"])() : 0), true);
    }
  }

  if (className) {
    classList.push(className);
  }

  if (headerClassName) {
    classList.push(headerClassName);
  }

  var headerNode = !isSearchCell ? /*#__PURE__*/(0, _react.isValidElement)(header) ? /*#__PURE__*/(0, _react.cloneElement)(header, {
    key: 'text'
  }) : (0, _isString["default"])(header) ? /*#__PURE__*/_react["default"].createElement("span", {
    key: "text"
  }, header) : header : null; // 帮助按钮

  var helpIcon = getHelpIcon(); // 排序按钮

  var sortIcon = !column.aggregation && column.sortable && name ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
    key: "sort",
    type: "arrow_upward",
    className: "".concat(prefixCls, "-sort-icon")
  }) : undefined;
  var childNodes = [headerNode];
  var innerClassNames = ["".concat(prefixCls, "-cell-inner")];
  var innerProps = {
    children: childNodes,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave
  };

  if (helpIcon) {
    if (cellStyle.textAlign === _enum.ColumnAlign.right) {
      childNodes.unshift(helpIcon);
    } else {
      childNodes.push(helpIcon);
    }
  }

  if (sortIcon) {
    if (field && field.order) {
      classList.push("".concat(prefixCls, "-sort-").concat(field.order));
    }

    innerProps.onClick = handleClick;

    if (cellStyle.textAlign === _enum.ColumnAlign.right) {
      childNodes.unshift(sortIcon);
    } else {
      childNodes.push(sortIcon);
    }
  }

  if (expandIcon) {
    childNodes.unshift( /*#__PURE__*/_react["default"].createElement("span", {
      key: "prefix",
      className: !isSearchCell ? "".concat(prefixCls, "-header-expand-icon") : undefined
    }, expandIcon));
  }

  if (headerRowHeight !== 'auto' && rowHeight !== 'auto' && !isSearchCell) {
    var height = Number(cellStyle.height) || (headerRowHeight === undefined ? rowHeight : headerRowHeight) * (rowSpan || 1);
    innerProps.style = {
      height: (0, _UnitConvertor.pxToRem)(height),
      lineHeight: (0, _UnitConvertor.pxToRem)(height - 2)
    };
    innerClassNames.push("".concat(prefixCls, "-cell-inner-row-height-fixed"));
  }

  if (isSearchCell) {
    innerClassNames.push("".concat(prefixCls, "-cell-search-header"));
  }

  if (key === _TableStore.CUSTOMIZED_KEY && (0, _utils.isStickySupport)() && tableStore.stickyRight && tableStore.overflowX && tableStore.columnGroups.rightLeafs.length === 1) {
    classList.push("".concat(prefixCls, "-cell-sticky-shadow"));
  }

  var thProps = {
    className: classList.join(' '),
    rowSpan: rowSpan,
    colSpan: colSpan,
    'data-index': key,
    style: (0, _omit["default"])(cellStyle, ['width', 'height']),
    scope: scope
  };

  if (needIntersection) {
    thProps.ref = ref;
  }

  return /*#__PURE__*/_react["default"].createElement("th", (0, _extends2["default"])({}, thProps), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, innerProps, {
    className: innerClassNames.join(' ')
  })), columnResizable && renderResizer());
};

TableHeaderCell.displayName = 'TableHeaderCell';

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

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