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


import React, { useEffect, useState, forwardRef } from 'react';
import ReactDOM from 'react-dom';
import { PrefixName, FullCrossName } from '../../constants';
import { calcTextWidth } from '../ellipsisLabel';
import "./index.css";
var prefix = PrefixName + "-tooltip";
/** 监听文字，过长省略时显示tooltip */
var WidgetsTooltip = /*#__PURE__*/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 = useState(false),
    visible = _useState[0],
    setVisible = _useState[1];

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

  // 判断label是否超过宽度
  useEffect(function () {
    if (typeof content === 'string') {
      var _ref$current;
      // 计算宽度
      var textWidth = 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]);
  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.createPortal(visible && /*#__PURE__*/React.createElement("div", {
    className: 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.createElement("div", {
    className: prefix + "-arrow " + prefix + "-arrow-bottom",
    style: {
      position: 'absolute'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + "-arrow-content " + prefix + "-arrow-content-bottom",
    style: {
      position: 'absolute'
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: prefix + "-content"
  }, content || ''), position === 'top' && /*#__PURE__*/React.createElement("div", {
    className: prefix + "-arrow " + prefix + "-arrow-top",
    style: {
      position: 'absolute'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + "-arrow-content " + prefix + "-arrow-content-top",
    style: {
      position: 'absolute'
    }
  }))), document.body);
});
export default WidgetsTooltip;