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

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

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

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

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

var _mobx = require("mobx");

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

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

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

var _isObject = _interopRequireDefault(require("lodash/isObject"));

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 _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));

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

var _resizeObserver = _interopRequireDefault(require("../../../lib/_util/resizeObserver"));

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

var _popover = _interopRequireDefault(require("../../../lib/popover"));

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

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

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

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

var _EventManager = _interopRequireWildcard(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 _DocumentUtils = require("../_util/DocumentUtils");

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 _textField = _interopRequireDefault(require("../text-field"));

var _Button = _interopRequireDefault(require("../button/Button"));

var _interface = require("../data-set/interface");

var _enum3 = require("../button/enum");

var _enum4 = require("../text-field/enum");

var _localeContext = require("../locale-context");

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,
      intersectionRef = props.intersectionRef,
      isRenderCell = props.isRenderCell;
  var column = columnGroup.column,
      key = columnGroup.key,
      prev = columnGroup.prev;
  var tooltipProps = column.tooltipProps;

  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,
      headerFilter = tableStore.headerFilter;
  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,
      filter = column.filter;
  var field = dataSet.getField(name);

  var _useState = (0, _react.useState)(),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      filterText = _useState2[0],
      _setFilterText = _useState2[1];

  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,
    groups: columnGroup.headerGroups,
    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.touches ? (0, _DocumentUtils.transformZoomData)(e.touches[0].clientX) : (0, _DocumentUtils.transformZoomData)(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('touchmove').removeEventListener('mouseup').removeEventListener('touchend');
    var tableBodyWrap = tableStore.node.tableBodyWrap;

    if (tableBodyWrap) {
      tableBodyWrap.removeEventListener('scroll', _EventManager.stopEvent);
    }

    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 _tableStore$node = tableStore.node,
        element = _tableStore$node.element,
        tableBodyWrap = _tableStore$node.tableBodyWrap,
        tableColumnResizeTrigger = tableStore.tableColumnResizeTrigger;

    if (tableColumnResizeTrigger !== _enum.TableColumnResizeTriggerType.hover) {
      var left = Math.round(element.getBoundingClientRect().left);
      globalRef.current.bodyLeft = border ? left + 1 : left;
    }

    setSplitLinePosition((0, _DocumentUtils.transformZoomData)(e.clientX));
    resizeEvent.setTarget(element.ownerDocument).addEventListener('mousemove', resize).addEventListener('touchmove', resize).addEventListener('mouseup', resizeEnd).addEventListener('touchend', resizeEnd);
    e.stopPropagation();

    if (tableBodyWrap) {
      tableBodyWrap.addEventListener('scroll', _EventManager.stopEvent, {
        passive: true
      });
    }
  }), [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) {
      var sortable = column.sortable;

      if (typeof sortable === 'function') {
        var fieldProps = dataSet.props.fields ? dataSet.props.fields.find(function (f) {
          return f.name === name;
        }) : undefined;

        if (field && fieldProps) {
          var unOrder = field.order || fieldProps.order;
          (0, _mobx.runInAction)(function () {
            var nowCombineSort = dataSet.combineSort;
            dataSet.fields.forEach(function (current) {
              if (current.order && (current !== field || nowCombineSort)) {
                current.order = undefined;
              }
            });
            dataSet.combineSort = false;

            switch (unOrder) {
              case _interface.SortOrder.asc:
                field.order = _interface.SortOrder.desc;
                break;

              case _interface.SortOrder.desc:
                field.order = undefined;
                break;

              default:
                field.order = _interface.SortOrder.asc;
            }
          });
        }

        (0, _mobx.runInAction)(function () {
          dataSet.records = dataSet.records.sort(function (record1, record2) {
            return sortable(record1, record2, field.order);
          });
        });
      } else {
        dataSet.sort(name);
      }
    }
  }, [dataSet, name]);
  var handleMouseEnter = (0, _react.useCallback)(function (e) {
    var tooltip = tableStore.getColumnTooltip(column);
    var currentTarget = e.currentTarget;
    var measureElement = currentTarget.getElementsByClassName("".concat(prefixCls, "-cell-inner-right-has-other"))[0] || currentTarget;

    if (!tableStore.columnResizing && (tooltip === _enum.TableColumnTooltip.always || tooltip === _enum.TableColumnTooltip.overflow && (0, _util["default"])(measureElement))) {
      var tooltipConfig = (0, _isObject["default"])(tooltipProps) ? tooltipProps : {};
      (0, _singleton.show)(currentTarget, (0, _objectSpread2["default"])({
        title: header,
        placement: getTooltipPlacement('table-cell') || 'right',
        theme: getTooltipTheme('table-cell')
      }, tooltipConfig));
      globalRef.current.tooltipShown = true;
    }
  }, [tableStore, column, globalRef, getTooltipTheme, getTooltipPlacement, header]);
  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 left = Math.round(element.getBoundingClientRect().left);
    var rect = e.target.getBoundingClientRect();
    var width = Math.round(rect.width);
    var resizerLeft = Math.round(rect.left);
    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, {
    leading: true,
    trailing: false
  }), []);
  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;
    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 onReset = (0, _react.useCallback)(function () {
    _setFilterText('');

    (0, _mobx.runInAction)(function () {
      tableStore.headerFilter = undefined;
    });
  }, [_setFilterText, tableStore]);
  var doFilter = (0, _react.useCallback)(function () {
    if (!(0, _isUndefined["default"])(filterText)) {
      (0, _mobx.runInAction)(function () {
        tableStore.headerFilter = {
          fieldName: name,
          filterText: filterText === null ? '' : filterText,
          filter: filter
        };
      });
    }
  }, [filterText, tableStore, name, filter]);
  var handleResize = (0, _react.useCallback)(function () {
    var clipboard = tableStore.clipboard,
        startChooseCell = tableStore.startChooseCell,
        endChooseCell = tableStore.endChooseCell,
        drawCopyBorder = tableStore.drawCopyBorder;

    if (clipboard && startChooseCell && endChooseCell) {
      drawCopyBorder();
    }
  }, [column.width]);

  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,
      onPointerDown: 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,
      onPointerDown: 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 && !isSearchCell) {
      var fieldHelp = (0, _defaultTo["default"])(column.help, field && field.get('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;
      }
    };
  }, []);
  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 getConstSortIcon = function getConstSortIcon() {
    var _classNames;

    var combineSort = dataSet.combineSort;
    var tableShowSortIcon = tableStore.getConfig('tableShowSortIcon');
    var combineSortField = combineSort && field && field.order;
    var type = combineSortField ? field && field.order === 'asc' ? 'paixu-shang' : 'paixu-xia' : (tableShowSortIcon || combineSort) && !(field && field.order) ? 'sort-all' : 'arrow_upward';
    var className = (0, _classnames["default"])("".concat(prefixCls, "-sort-icon"), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-sort-icon-temp"), tableShowSortIcon || combineSort && !combineSortField), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-sort-icon-combine"), combineSortField), _classNames));
    return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      key: "sort",
      type: type,
      className: className
    });
  };

  var getFilterIcon = function getFilterIcon() {
    if (column.filter) {
      var popoverContent;

      var footer = /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-sort-popup-footer")
      }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
        onClick: onReset,
        key: 'reset'
      }, (0, _localeContext.$l)('Table', 'reset_button')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
        color: _enum3.ButtonColor.primary,
        onClick: doFilter,
        key: 'filter'
      }, (0, _localeContext.$l)('Table', 'search')));

      var columnFilterPopover = column.filterPopover || tableStore.getConfig('tableColumnFilterPopover');

      if (typeof columnFilterPopover === 'function') {
        popoverContent = /*#__PURE__*/_react["default"].createElement("div", {
          onClick: function onClick(e) {
            return e.stopPropagation();
          }
        }, columnFilterPopover({
          setFilterText: function setFilterText(filterText) {
            return _setFilterText(filterText);
          },
          dataSet: dataSet,
          field: field,
          filterText: filterText,
          clearFilters: onReset,
          confirm: doFilter,
          footer: footer
        }));
      } else {
        popoverContent = /*#__PURE__*/_react["default"].createElement("div", {
          onClick: function onClick(e) {
            return e.stopPropagation();
          }
        }, /*#__PURE__*/_react["default"].createElement(_textField["default"], {
          autoFocus: true,
          onEnterDown: doFilter,
          style: {
            width: '100%'
          },
          valueChangeAction: _enum4.ValueChangeAction.input,
          value: filterText,
          onChange: function onChange(value) {
            return _setFilterText(value);
          }
        }), footer);
      }

      return /*#__PURE__*/_react["default"].createElement(_popover["default"], {
        content: popoverContent,
        overlayClassName: "".concat(prefixCls, "-sort-popup-content"),
        trigger: "click",
        onVisibleChange: function onVisibleChange() {
          if (headerFilter) {
            _setFilterText(headerFilter.fieldName === name ? String(headerFilter.filterText) : '');
          }
        },
        key: 'filter'
      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        key: "filter",
        className: filterText && String(headerFilter && headerFilter.fieldName) === name ? "".concat(prefixCls, "-filter-icon ").concat(prefixCls, "-filter-icon-active") : "".concat(prefixCls, "-filter-icon"),
        type: "search",
        onClick: function onClick(e) {
          return e.stopPropagation();
        }
      }));
    }

    return undefined;
  }; // 过滤按钮


  var filterIcon = getFilterIcon(); // 帮助按钮

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

  var sortIcon = !column.aggregation && column.sortable && name && !isSearchCell ? getConstSortIcon() : undefined;
  var headerNodePlaceholder = Symbol('headerNodePlaceholder');
  var childNodes = [headerNodePlaceholder];
  var innerClassNames = ["".concat(prefixCls, "-cell-inner")];
  var innerProps = {
    children: childNodes,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave
  };
  var labelClassNames = [];

  if (helpIcon) {
    childNodes.push(helpIcon);
    labelClassNames.push("".concat(prefixCls, "-cell-inner-right-has-help"));
  }

  if (sortIcon) {
    if (field && field.order) {
      classList.push("".concat(prefixCls, "-sort-").concat(field.order));
      var combineSort = dataSet.combineSort;

      if (combineSort) {
        classList.push("".concat(prefixCls, "-sort-").concat(field.order, "-combine"));
      } else {
        classList.push("".concat(prefixCls, "-sort-").concat(field.order, "-temp"));
      }
    }

    innerProps.onClick = handleClick;
    childNodes.push(sortIcon);
    labelClassNames.push("".concat(prefixCls, "-cell-inner-right-has-sort"));
  }

  if (filterIcon) {
    childNodes.push(filterIcon);
    labelClassNames.push("".concat(prefixCls, "-cell-inner-right-has-filter"));
  }

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


  if (labelClassNames.length > 0) {
    labelClassNames.push("".concat(prefixCls, "-cell-inner-right-has-other"));
  }

  var labelClassNamesStr = labelClassNames.length > 0 ? labelClassNames.join(' ') : undefined;
  var headerNode = !isSearchCell ? /*#__PURE__*/(0, _react.isValidElement)(header) ? /*#__PURE__*/(0, _react.cloneElement)(header, {
    key: 'text',
    className: (0, _classnames["default"])(header.props && header.props.className, labelClassNamesStr)
  }) : (0, _isString["default"])(header) ? /*#__PURE__*/_react["default"].createElement("span", {
    key: "text",
    className: labelClassNamesStr
  }, header) : header : null;
  childNodes[childNodes.findIndex(function (item) {
    return item === headerNodePlaceholder;
  })] = headerNode;

  if (!isSearchCell) {
    var $rowHeight = headerRowHeight === undefined ? rowHeight : headerRowHeight;

    if ($rowHeight !== 'auto') {
      var height = Number(cellStyle.height) || $rowHeight * (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"));
  }

  if (!tableStore.tableColumnResizeTransition) {
    classList.push("".concat(prefixCls, "-cell-no-transition"));
  }

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

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

  if (!isRenderCell) {
    return /*#__PURE__*/_react["default"].createElement("th", (0, _extends2["default"])({}, thProps));
  }

  return /*#__PURE__*/_react["default"].createElement(_resizeObserver["default"], {
    onResize: handleResize
  }, /*#__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