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");

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

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

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 _mobx = require("mobx");

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

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

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

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

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

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

var _componentClasses = _interopRequireDefault(require("component-classes"));

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

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

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

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 _autobind = _interopRequireDefault(require("../_util/autobind"));

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 TableHeaderCell =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(TableHeaderCell, _Component);

  var _super = _createSuper(TableHeaderCell);

  function TableHeaderCell() {
    var _this;

    (0, _classCallCheck2["default"])(this, TableHeaderCell);
    _this = _super.apply(this, arguments);
    _this.resizeEvent = new _EventManager["default"](typeof window !== 'undefined' && document);
    _this.resizeBoundary = 0;
    _this.delayResizeStart = (0, _debounce["default"])(function (e) {
      _this.resizeStart(e);
    }, 300);
    return _this;
  }

  (0, _createClass2["default"])(TableHeaderCell, [{
    key: "saveElement",
    value: function saveElement(element) {
      this.element = element;
    }
  }, {
    key: "handleClick",
    value: function handleClick() {
      var _this$props = this.props,
          column = _this$props.column,
          dataSet = _this$props.dataSet;
      var name = column.name;

      if (name) {
        dataSet.sort(name);
      }
    }
  }, {
    key: "getNode",
    value: function getNode(column) {
      var getHeaderNode = this.props.getHeaderNode;
      var headerDom = getHeaderNode();

      if (headerDom) {
        return headerDom.querySelector("[data-index=\"".concat((0, _utils.getColumnKey)(column), "\"]"));
      }
    }
  }, {
    key: "setResizeColumn",
    value: function setResizeColumn(column) {
      this.resizeColumn = column;
      var node = this.getNode(column);

      if (node) {
        this.resizeBoundary = node.getBoundingClientRect().left;
      }
    }
  }, {
    key: "handleLeftResize",
    value: function handleLeftResize(e) {
      var prevColumn = this.props.prevColumn;
      var autoMaxWidth = this.context.tableStore.props.autoMaxWidth;
      this.setResizeColumn(prevColumn);

      if (autoMaxWidth) {
        e.persist();
        this.delayResizeStart(e);
      } else {
        this.resizeStart(e);
      }
    }
  }, {
    key: "handleStopResize",
    value: function handleStopResize() {
      if (this.delayResizeStart) {
        this.delayResizeStart.cancel();
      }
    }
  }, {
    key: "handleRightResize",
    value: function handleRightResize(e) {
      var resizeColumn = this.props.resizeColumn;
      var autoMaxWidth = this.context.tableStore.props.autoMaxWidth;
      this.setResizeColumn(resizeColumn);

      if (autoMaxWidth) {
        e.persist();
        this.delayResizeStart(e);
      } else {
        this.resizeStart(e);
      }
    }
  }, {
    key: "handleLeftDoubleClick",
    value: function handleLeftDoubleClick(_e) {
      if (this.delayResizeStart) {
        this.delayResizeStart.cancel();
        this.resizeDoubleClick();
      }
    }
  }, {
    key: "handleRightDoubleClick",
    value: function handleRightDoubleClick(_e) {
      if (this.delayResizeStart) {
        this.delayResizeStart.cancel();
        this.resizeDoubleClick();
      }
    }
  }, {
    key: "resizeDoubleClick",
    value: function resizeDoubleClick() {
      var column = this.resizeColumn;
      var tableStore = this.context.tableStore;
      var prefixCls = tableStore.prefixCls,
          element = tableStore.node.element;

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

        if (maxWidth !== column.width) {
          tableStore.changeCustomizedColumnValue(column, {
            width: maxWidth
          });
        } else if (column.minWidth) {
          tableStore.changeCustomizedColumnValue(column, {
            width: column.minWidth
          });
        }
      }
    }
  }, {
    key: "resizeStart",
    value: function resizeStart(e) {
      var tableStore = this.context.tableStore;
      var prefixCls = tableStore.prefixCls,
          element = tableStore.node.element;
      tableStore.columnResizing = true;
      (0, _componentClasses["default"])(element).add("".concat(prefixCls, "-resizing"));
      delete this.resizePosition;
      this.setSplitLinePosition(e.pageX);
      this.resizeEvent.addEventListener('mousemove', this.resize).addEventListener('mouseup', this.resizeEnd);
    }
  }, {
    key: "resize",
    value: function resize(e) {
      var column = this.resizeColumn;
      var limit = this.resizeBoundary + (0, _Column.minColumnWidth)(column);
      var left = e.pageX;

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

      this.resizePosition = this.setSplitLinePosition(left);
    }
  }, {
    key: "resizeEnd",
    value: function resizeEnd() {
      var tableStore = this.context.tableStore;
      var prefixCls = tableStore.prefixCls,
          element = tableStore.node.element;
      tableStore.columnResizing = false;
      (0, _componentClasses["default"])(element).remove("".concat(prefixCls, "-resizing"));
      this.resizeEvent.removeEventListener('mousemove').removeEventListener('mouseup');
      var column = this.resizeColumn;

      if (this.resizePosition && column) {
        var newWidth = Math.round(Math.max(this.resizePosition - this.resizeBoundary, (0, _Column.minColumnWidth)(column)));

        if (newWidth !== column.width) {
          tableStore.changeCustomizedColumnValue(column, {
            width: newWidth
          });
        }
      }
    }
  }, {
    key: "setSplitLinePosition",
    value: function setSplitLinePosition(left) {
      var resizeLine = this.context.tableStore.node.resizeLine;

      var _resizeLine$offsetPar = resizeLine.offsetParent.getBoundingClientRect(),
          rectLeft = _resizeLine$offsetPar.left;

      left -= rectLeft;

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

      resizeLine.style.left = (0, _UnitConvertor.pxToRem)(left) || null;
      return left + rectLeft;
    }
  }, {
    key: "renderResizer",
    value: function renderResizer() {
      var _this$props2 = this.props,
          prevColumn = _this$props2.prevColumn,
          column = _this$props2.column;
      var _this$context$tableSt = this.context.tableStore,
          prefixCls = _this$context$tableSt.prefixCls,
          autoMaxWidth = _this$context$tableSt.props.autoMaxWidth;
      var resizerPrefixCls = "".concat(prefixCls, "-resizer");

      var pre = prevColumn && prevColumn.resizable && _react["default"].createElement("div", {
        key: "pre",
        className: "".concat(resizerPrefixCls, " ").concat(resizerPrefixCls, "-left"),
        onDoubleClick: autoMaxWidth ? this.handleLeftDoubleClick : undefined,
        onMouseDown: this.handleLeftResize,
        onMouseUp: autoMaxWidth ? this.handleStopResize : undefined
      });

      var next = column.resizable && _react["default"].createElement("div", {
        key: "next",
        className: "".concat(resizerPrefixCls, " ").concat(resizerPrefixCls, "-right"),
        onDoubleClick: autoMaxWidth ? this.handleRightDoubleClick : undefined,
        onMouseDown: this.handleRightResize,
        onMouseUp: autoMaxWidth ? this.handleStopResize : undefined
      });

      return [pre, next];
    }
  }, {
    key: "handleResize",
    value: function handleResize() {
      var element = this.element;
      var tableStore = this.context.tableStore;

      if (element && !tableStore.hidden) {
        if (this.nextFrameActionId !== undefined) {
          _raf["default"].cancel(this.nextFrameActionId);
        }

        this.nextFrameActionId = (0, _raf["default"])(this.syncSize);
      }
    }
  }, {
    key: "syncSize",
    value: function syncSize() {
      this.overflow = this.computeOverFlow();
    }
  }, {
    key: "computeOverFlow",
    value: function computeOverFlow() {
      var element = this.element;

      if (element && element.textContent) {
        var column = this.props.column;
        var tableStore = this.context.tableStore;

        if (tableStore.getColumnTooltip(column) === _enum.TableColumnTooltip.overflow) {
          var clientWidth = element.clientWidth,
              scrollWidth = element.scrollWidth;
          return scrollWidth > clientWidth;
        }
      }

      return false;
    }
  }, {
    key: "getHelpIcon",
    value: function getHelpIcon(field) {
      var column = this.props.column;
      var prefixCls = this.context.tableStore.prefixCls;
      var help = column.help,
          showHelp = column.showHelp;

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

        if (fieldHelp) {
          return _react["default"].createElement(_Tooltip["default"], {
            title: fieldHelp,
            placement: "bottom",
            key: "help"
          }, _react["default"].createElement(_icon["default"], {
            type: "help_outline",
            className: "".concat(prefixCls, "-help-icon")
          }));
        }
      }
    }
  }, {
    key: "getSortIcon",
    value: function getSortIcon() {
      var column = this.props.column;
      var prefixCls = this.context.tableStore.prefixCls;
      var sortable = column.sortable,
          name = column.name;

      if (sortable && name) {
        return _react["default"].createElement(_icon["default"], {
          key: "sort",
          type: "arrow_upward",
          className: "".concat(prefixCls, "-sort-icon")
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          column = _this$props3.column,
          dataSet = _this$props3.dataSet,
          rowSpan = _this$props3.rowSpan,
          colSpan = _this$props3.colSpan,
          style = _this$props3.style,
          className = _this$props3.className;
      var tableStore = this.context.tableStore;
      var prefixCls = tableStore.prefixCls,
          rowHeight = tableStore.rowHeight,
          columnResizable = tableStore.columnResizable;
      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 tooltip = tableStore.getColumnTooltip(column);
      var columnKey = (0, _utils.getColumnKey)(column);
      var columnLock = (0, _utils.isStickySupport)() && tableStore.overflowX && (0, _utils.getColumnLock)(lock);
      var classList = ["".concat(prefixCls, "-cell")];

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

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

      var field = dataSet.getField(name);

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

      var cellStyle = (0, _objectSpread2["default"])({
        textAlign: align || (command || children && children.length ? _enum.ColumnAlign.center : (0, _utils.getAlignByField)(field))
      }, headerStyle, {}, style);
      var header = (0, _utils.getHeader)(column, dataSet);
      var headerNode = (0, _react.isValidElement)(header) ? (0, _react.cloneElement)(header, {
        key: 'text'
      }) : (0, _isString["default"])(header) ? _react["default"].createElement("span", {
        key: "text"
      }, header) : header; // 帮助按钮

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

      var sortIcon = this.getSortIcon();
      var childNodes = [headerNode];
      var innerProps = {
        className: (0, _classnames["default"])("".concat(prefixCls, "-cell-inner")),
        children: childNodes,
        style: {}
      };

      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 = this.handleClick;

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

      if (rowHeight !== 'auto') {
        var height = Number(cellStyle.height) || rowHeight * (rowSpan || 1);
        innerProps.style = {
          height: (0, _UnitConvertor.pxToRem)(height),
          lineHeight: (0, _UnitConvertor.pxToRem)(height - 2)
        };
      }

      if (tooltip === _enum.TableColumnTooltip.overflow) {
        innerProps.ref = this.saveElement;
      }

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

      var inner = _react["default"].createElement("div", (0, _extends2["default"])({}, innerProps));

      var th = _react["default"].createElement("th", (0, _extends2["default"])({}, thProps), this.overflow || tooltip === _enum.TableColumnTooltip.always ? _react["default"].createElement(_Tooltip["default"], {
        key: "tooltip",
        title: header,
        placement: (0, _utils.getPlacementByAlign)(cellStyle.textAlign)
      }, inner) : inner, columnResizable && this.renderResizer());

      return tooltip === _enum.TableColumnTooltip.overflow ? _react["default"].createElement(_resizeObserver["default"], {
        onResize: this.handleResize,
        resizeProp: "width"
      }, th) : th;
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.resizeEvent.clear();
      this.delayResizeStart.cancel();
    }
  }]);
  return TableHeaderCell;
}(_react.Component);

TableHeaderCell.displayName = 'TableHeaderCell';
TableHeaderCell.propTypes = {
  column: _propTypes["default"].object.isRequired
};
TableHeaderCell.contextType = _TableContext["default"];
(0, _tslib.__decorate)([_mobx.observable], TableHeaderCell.prototype, "overflow", void 0);
(0, _tslib.__decorate)([_autobind["default"]], TableHeaderCell.prototype, "saveElement", null);
(0, _tslib.__decorate)([_autobind["default"]], TableHeaderCell.prototype, "handleClick", null);
(0, _tslib.__decorate)([_autobind["default"]], TableHeaderCell.prototype, "handleLeftResize", null);
(0, _tslib.__decorate)([_autobind["default"]], TableHeaderCell.prototype, "handleStopResize", null);
(0, _tslib.__decorate)([_autobind["default"]], TableHeaderCell.prototype, "handleRightResize", null);
(0, _tslib.__decorate)([_autobind["default"]], TableHeaderCell.prototype, "handleLeftDoubleClick", null);
(0, _tslib.__decorate)([_autobind["default"]], TableHeaderCell.prototype, "handleRightDoubleClick", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], TableHeaderCell.prototype, "resizeDoubleClick", null);
(0, _tslib.__decorate)([_mobx.action], TableHeaderCell.prototype, "resizeStart", null);
(0, _tslib.__decorate)([_autobind["default"]], TableHeaderCell.prototype, "resize", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], TableHeaderCell.prototype, "resizeEnd", null);
(0, _tslib.__decorate)([_mobx.action], TableHeaderCell.prototype, "setSplitLinePosition", null);
(0, _tslib.__decorate)([_autobind["default"]], TableHeaderCell.prototype, "handleResize", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], TableHeaderCell.prototype, "syncSize", null);
TableHeaderCell = (0, _tslib.__decorate)([_mobxReact.observer], TableHeaderCell);
var _default = TableHeaderCell;
exports["default"] = _default;
//# sourceMappingURL=TableHeaderCell.js.map