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


"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports["default"] = void 0;

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

var _reactDom = _interopRequireDefault(require("react-dom"));

var _constants = require("../../constants");

require("./index.css");

var prefix = _constants.PrefixName + "-tooltip";

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

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

  // 是否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 () {
    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]);
  (0, _react.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["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),
      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["default"].createElement("div", {
    className: prefix + "-arrow",
    style: {
      position: 'absolute'
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: prefix + "-arrow-content",
    style: {
      position: 'absolute'
    }
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: prefix + "-content"
  }, content || '')) : /*#__PURE__*/_react["default"].createElement("div", null), document.body);
});
var _default = WidgetsTooltip;
exports["default"] = _default;