@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 "./index.css";
var prefix = PrefixName + "-tooltip";

/** 监听文字，过长省略时显示tooltip */
var WidgetsTooltip = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var _ref$current3, _ref$current4, _ref$current9;

  var content = _ref.content,
      offset = _ref.offset;

  // 是否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 () {
    var _ref$current, _ref$current2;

    setShowTooltip((ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) !== (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth));
  }, [ref === null || ref === void 0 ? void 0 : (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.offsetWidth, ref === null || ref === void 0 ? void 0 : (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.scrollWidth]);
  useEffect(function () {
    var _ref$current5, _ref$current6;

    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$current5 = ref.current) === null || _ref$current5 === void 0 ? void 0 : _ref$current5.addEventListener('mouseenter', handleMouseEnter);
    ref === null || ref === void 0 ? void 0 : (_ref$current6 = ref.current) === null || _ref$current6 === void 0 ? void 0 : _ref$current6.addEventListener('mouseleave', handleMouseLeave);
    return function () {
      var _ref$current7, _ref$current8;

      ref === null || ref === void 0 ? void 0 : (_ref$current7 = ref.current) === null || _ref$current7 === void 0 ? void 0 : _ref$current7.removeEventListener('mouseenter', handleMouseEnter);
      ref === null || ref === void 0 ? void 0 : (_ref$current8 = ref.current) === null || _ref$current8 === void 0 ? void 0 : _ref$current8.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, [ref === null || ref === void 0 ? void 0 : ref.current, showTooltip]); // 计算位置

  var pos = {
    x: 0,
    y: 0
  };
  var curElement = ref.current;

  while (curElement && curElement !== document.body) {
    pos.x += curElement.offsetLeft;
    pos.y += curElement.offsetTop;
    curElement = curElement.offsetParent;
  } // 减去scroll的宽高


  curElement = ref.current;

  while (curElement && curElement !== document.body) {
    pos.x -= curElement.scrollLeft;
    pos.y -= curElement.scrollTop;
    curElement = curElement.parentElement;
  }

  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),
      left: pos.x + ((_ref$current9 = ref.current) === null || _ref$current9 === void 0 ? void 0 : _ref$current9.offsetWidth) / 2 + ((offset === null || offset === void 0 ? void 0 : offset.x) || 0)
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + "-arrow",
    style: {
      position: 'absolute'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + "-arrow-content",
    style: {
      position: 'absolute'
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: prefix + "-content"
  }, content || '')) : /*#__PURE__*/React.createElement("div", null), document.body);
});
export default WidgetsTooltip;