@alicloud/cloud-charts/lib/common/Tooltip/index.js


"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _constants = require("../../constants");
var _ellipsisLabel = require("../ellipsisLabel");
require("./index.css");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var prefix = _constants.PrefixName + "-tooltip";
/** 监听文字，过长省略时显示tooltip */
var WidgetsTooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
  var _ref$current4, _ref$current5, _ref$current10, _rect$left, _document, _document$documentEle, _rect$top, _ref$current$offsetWi, _ref$current11;
  var content = _ref.content,
    offset = _ref.offset,
    _ref$position = _ref.position,
    position = _ref$position === void 0 ? 'bottom' : _ref$position;
  // 是否hover在label上
  var _useState = (0, _react.useState)(false),
    visible = _useState[0],
    setVisible = _useState[1];

  // label是否超过宽度，需要使用tooltip
  var _useState2 = (0, _react.useState)(false),
    showTooltip = _useState2[0],
    setShowTooltip = _useState2[1];

  // 判断label是否超过宽度
  (0, _react.useEffect)(function () {
    if (typeof content === 'string') {
      var _ref$current;
      // 计算宽度
      var textWidth = (0, _ellipsisLabel.calcTextWidth)(content);
      setShowTooltip(textWidth > ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth));
    } else {
      var _ref$current2, _ref$current3;
      setShowTooltip(((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetWidth) < ((_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.scrollWidth));
    }
  }, [(_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.offsetWidth, (_ref$current5 = ref.current) === null || _ref$current5 === void 0 ? void 0 : _ref$current5.scrollWidth, content]);
  (0, _react.useEffect)(function () {
    var _ref$current6, _ref$current7;
    if (!(ref !== null && ref !== void 0 && ref.current)) {
      return;
    }
    var handleMouseEnter = function handleMouseEnter() {
      if (showTooltip) {
        setVisible(true);
      }
    };
    var handleMouseLeave = function handleMouseLeave() {
      setVisible(false);
    };
    ref === null || ref === void 0 ? void 0 : (_ref$current6 = ref.current) === null || _ref$current6 === void 0 ? void 0 : _ref$current6.addEventListener('mouseenter', handleMouseEnter);
    ref === null || ref === void 0 ? void 0 : (_ref$current7 = ref.current) === null || _ref$current7 === void 0 ? void 0 : _ref$current7.addEventListener('mouseleave', handleMouseLeave);
    return function () {
      var _ref$current8, _ref$current9;
      ref === null || ref === void 0 ? void 0 : (_ref$current8 = ref.current) === null || _ref$current8 === void 0 ? void 0 : _ref$current8.removeEventListener('mouseenter', handleMouseEnter);
      ref === null || ref === void 0 ? void 0 : (_ref$current9 = ref.current) === null || _ref$current9 === void 0 ? void 0 : _ref$current9.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, [ref === null || ref === void 0 ? void 0 : ref.current, showTooltip]);

  // 计算位置
  var pos = {
    x: 0,
    y: 0
  };
  var rect = (_ref$current10 = ref.current) === null || _ref$current10 === void 0 ? void 0 : _ref$current10.getBoundingClientRect();
  pos.x = ((_rect$left = rect === null || rect === void 0 ? void 0 : rect.left) !== null && _rect$left !== void 0 ? _rect$left : 0) + ((_document = document) === null || _document === void 0 ? void 0 : (_document$documentEle = _document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.scrollLeft);
  pos.y = ((_rect$top = rect === null || rect === void 0 ? void 0 : rect.top) !== null && _rect$top !== void 0 ? _rect$top : 0) + document.documentElement.scrollTop;
  pos.x += ((_ref$current$offsetWi = (_ref$current11 = ref.current) === null || _ref$current11 === void 0 ? void 0 : _ref$current11.offsetWidth) !== null && _ref$current$offsetWi !== void 0 ? _ref$current$offsetWi : 0) / 2;
  return /*#__PURE__*/_reactDom["default"].createPortal(visible && /*#__PURE__*/_react["default"].createElement("div", {
    className: _constants.FullCrossName + " " + prefix + "-container",
    style: {
      position: 'absolute',
      top: pos.y + ((offset === null || offset === void 0 ? void 0 : offset.y) || 0) + (position === 'bottom' ? 20 : -10),
      left: pos.x + ((offset === null || offset === void 0 ? void 0 : offset.x) || 0),
      transform: position === 'bottom' ? 'translate(-50%, 0)' : 'translate(-50%, -100%)'
    }
  }, position === 'bottom' && /*#__PURE__*/_react["default"].createElement("div", {
    className: prefix + "-arrow " + prefix + "-arrow-bottom",
    style: {
      position: 'absolute'
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: prefix + "-arrow-content " + prefix + "-arrow-content-bottom",
    style: {
      position: 'absolute'
    }
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: prefix + "-content"
  }, content || ''), position === 'top' && /*#__PURE__*/_react["default"].createElement("div", {
    className: prefix + "-arrow " + prefix + "-arrow-top",
    style: {
      position: 'absolute'
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: prefix + "-arrow-content " + prefix + "-arrow-content-top",
    style: {
      position: 'absolute'
    }
  }))), document.body);
});
var _default = exports["default"] = WidgetsTooltip;