@oceanbase/design/lib/tooltip/MouseTooltip.js

The Design System of OceanBase

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/tooltip/MouseTooltip.tsx
var MouseTooltip_exports = {};
__export(MouseTooltip_exports, {
  default: () => MouseTooltip_default
});
module.exports = __toCommonJS(MouseTooltip_exports);
var import_ahooks = require("ahooks");
var import_react = __toESM(require("react"));
var import_ReactStickyMouseTooltip = __toESM(require("./ReactStickyMouseTooltip"));
var import_theme = __toESM(require("../theme"));
var MouseTooltip = ({
  children,
  title,
  color: backgroundColor,
  visible: outerVisible = true,
  open: outerOpen = true,
  onOpenChange,
  onVisibleChange,
  overlayInnerStyle,
  mouseEnterDelay = 0.1,
  mouseLeaveDelay = 0.1,
  ...restProps
}) => {
  var _a, _b;
  const { token } = import_theme.default.useToken();
  const [visible, setVisible] = (0, import_react.useState)(false);
  const { color: textColor, ...restOverlayInnerStyle } = overlayInnerStyle || {};
  const handleVisibleChange = (value) => {
    setVisible(value);
    onOpenChange == null ? void 0 : onOpenChange(value);
    onVisibleChange == null ? void 0 : onVisibleChange(value);
  };
  const mouseInfo = (0, import_ahooks.useMouse)();
  const clientX = (mouseInfo == null ? void 0 : mouseInfo.clientX) || 0;
  const clientY = (mouseInfo == null ? void 0 : mouseInfo.clientY) || 0;
  const ref = (0, import_react.useRef)(null);
  const size = (0, import_ahooks.useSize)(ref);
  const tooltipWidth = ((size == null ? void 0 : size.width) || 0) + 16;
  const tooltipHeight = ((size == null ? void 0 : size.height) || 0) + 12;
  const pageWidth = document.body.clientWidth || 0;
  const pageHeight = document.body.clientHeight || 0;
  const isOverWidth = clientX + tooltipWidth + 8 > pageWidth;
  const isOverHeight = clientY + tooltipHeight + 8 > pageHeight;
  const offset = 8;
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
    "span",
    {
      onMouseEnter: () => {
        if (outerOpen || outerVisible) {
          setTimeout(() => {
            handleVisibleChange(true);
          }, mouseEnterDelay * 1e3);
        }
      },
      onMouseLeave: () => {
        setTimeout(() => {
          handleVisibleChange(false);
        }, mouseLeaveDelay * 1e3);
      }
    },
    children
  ), title && /* @__PURE__ */ import_react.default.createElement(
    import_ReactStickyMouseTooltip.default,
    {
      visible,
      style: {
        // 需要大于 Popover 的 1030 zIndex 值，否则会被遮挡
        zIndex: 1100,
        padding: "6px 8px",
        boxShadow: token.boxShadowSecondary,
        borderRadius: token.borderRadius,
        // @ts-ignore
        color: textColor || ((_a = token.Tooltip) == null ? void 0 : _a.colorTextLightSolid) || token.colorTextLightSolid,
        backgroundColor: (
          // @ts-ignore
          backgroundColor || ((_b = token.Tooltip) == null ? void 0 : _b.colorBgSpotlight) || token.colorBgSpotlight
        ),
        left: isOverWidth ? clientX - tooltipWidth - offset : clientX + offset,
        top: isOverHeight ? clientY - tooltipHeight - offset : clientY + offset,
        ...restOverlayInnerStyle
      },
      ...restProps
    },
    /* @__PURE__ */ import_react.default.createElement("div", { ref }, typeof title === "function" ? title() : title)
  ));
};
if (process.env.NODE_ENV !== "production") {
  MouseTooltip.displayName = "MouseTooltip";
}
var MouseTooltip_default = MouseTooltip;