@rxflow/base/cjs/components/Tooltip/index.js

BaseFlow - 核心 Flow 组件库

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Tooltip = Tooltip;
var _react = require("@xyflow/react");
var _ahooks = require("ahooks");
var _antd = require("antd");
var _react2 = _interopRequireWildcard(require("react"));
var _useNodeDragging = require("../../hooks/node/useNodeDragging");
var _getPopupContainer = require("../../utils/getPopupContainer");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
/**
 * @author: yanxianliang
 * @date: 2025-06-27 09:35
 * @desc: 自定义Tooltip享元模式
 *
 * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
 */

function Tooltip({
  children,
  canTooltipShow,
  title,
  trigger = 'hover',
  ...rest
}) {
  const isNodeDragging = (0, _useNodeDragging.useNodeDragging)();
  const [open, setOpen] = (0, _ahooks.useControllableValue)(rest, {
    valuePropName: 'open',
    defaultValue: false,
    trigger: 'onOpenChange'
  });
  const showFirstRef = (0, _react2.useRef)(false); // 是否首次渲染过

  (0, _react2.useMemo)(() => {
    if (open) {
      showFirstRef.current = true; // 初始化之后就不销毁了
    }
  }, [open]);
  (0, _react2.useEffect)(() => {
    if (!title) {
      setOpen(false);
    }
  }, [title]);
  const _onMouseEnter = (0, _ahooks.useMemoizedFn)(event => {
    if (!showFirstRef.current) {
      const canShow = canTooltipShow?.(event) ?? true;
      if (canShow && title) {
        setOpen(true);
      }
    }
    children?.props?.onMouseEnter?.(event);
  });
  const _onMouseLeave = (0, _ahooks.useMemoizedFn)(event => {
    setOpen(false);
    children?.props?.onMouseLeave?.(event);
  });
  const triggerActions = (0, _react2.useMemo)(() => {
    return {
      click: trigger === 'click' || trigger && Array.from(trigger) && trigger.indexOf('click') !== -1,
      hover: trigger === 'hover' || trigger && Array.from(trigger) && trigger.indexOf('hover') !== -1
    };
  }, []);
  const _onClick = (0, _ahooks.useMemoizedFn)(event => {
    if (!showFirstRef.current) {
      setOpen(beforeOpen => !beforeOpen);
    }
    children?.props?.onClick?.(event);
  });
  const tooltipRef = (0, _react2.useRef)(null);
  const {
    x,
    y
  } = (0, _react.useViewport)();
  (0, _react2.useEffect)(() => {
    if (triggerActions.hover) {
      setOpen(false); // viewport 移动, 自动关闭，fix
    }
  }, [x, y]);
  (0, _react2.useEffect)(() => {
    if (open) {
      setOpen(false);
    }
  }, [isNodeDragging]);
  const cloneChildren = (0, _react2.useMemo)(() => {
    return /*#__PURE__*/_react2.default.cloneElement(children, {
      ...children.props,
      ...(triggerActions.hover ? {
        onMouseEnter: _onMouseEnter,
        onMouseLeave: _onMouseLeave
      } : {}),
      ...(triggerActions.click ? {
        onClick: _onClick
      } : {})
    });
  }, [children]);
  if (open || showFirstRef.current) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
      ref: tooltipRef,
      destroyOnHidden: true,
      title: title,
      getPopupContainer: _getPopupContainer.getPopupContainer,
      ...rest,
      trigger: trigger,
      open: open,
      onOpenChange: setOpen,
      children: children
    });
  }
  return cloneChildren;
}