ayongui/es/ayongui/components/tooltip/index.mjs

import { j as c } from "../../../react/jsx-runtime.mjs";
import { useState as f, useEffect as g, useRef as Y, useMemo as b } from "react";
import n from "./tooltip.module.less.mjs";
const R = (w) => {
  const {
    children: $,
    style: r,
    title: i,
    open: s = !1,
    color: t = "var(--ayong-bolck)",
    arrow: y = !0,
    className: C = "",
    disabled: T,
    whiteSpace: e = "nowrap",
    width: o = "max-width",
    placement: l = "top",
    onOpenChange: k = () => {
    }
  } = w, v = `${n.tooltipContainer}  ${T && n.notAllowed} ${C} `, [u, p] = f(s), X = () => {
    p(!0);
  }, j = () => {
    p(!1);
  };
  g(() => {
    p(s), k(s);
  }, [s]);
  const a = Y(null), [m, M] = f(36), [d, N] = f(36);
  g(() => {
    a.current && (M(a.current.offsetHeight), N(a.current.offsetWidth));
  }, [a, u]);
  const h = b(() => -40 - (m - 36) + "px", [m]), x = b(() => -d - 10 + "px", [d]), S = () => {
    switch (l) {
      case "top":
        return {
          //   ...(ellipsis && textStyle),
          width: o,
          whiteSpace: e,
          background: t,
          top: h,
          left: "50%",
          transform: "translateX(-50%)",
          ...r
        };
      case "bottom":
        return {
          //   ...(ellipsis && textStyle),
          width: o,
          whiteSpace: e,
          background: t,
          bottom: h,
          left: "50%",
          transform: "translateX(-50%)",
          ...r
        };
      case "left":
        return {
          //   ...(ellipsis && textStyle),
          width: o,
          whiteSpace: e,
          background: t,
          top: "50%",
          left: x,
          transform: "translateY(-50%)",
          ...r
        };
      case "right":
        return {
          //   ...(ellipsis && textStyle),
          width: o,
          whiteSpace: e,
          background: t,
          top: "50%",
          right: x,
          transform: "translateY(-50%)",
          ...r
        };
      default:
        return {
          //   ...(ellipsis && textStyle),
          width: o,
          whiteSpace: e,
          background: t,
          top: "-30px",
          left: "50%",
          transform: "translateX(-50%)",
          ...r
        };
    }
  }, E = () => {
    switch (l) {
      case "top":
        return {
          borderColor: `${t} transparent transparent transparent`,
          bottom: "-8px",
          left: "50%",
          transform: "translateX(-50%)"
        };
      case "bottom":
        return {
          borderColor: ` transparent transparent ${t} transparent`,
          top: "-8px",
          left: "50%",
          transform: "translateX(-50%)"
        };
      case "left":
        return {
          borderColor: ` transparent transparent  transparent ${t}`,
          top: "50%",
          right: "-8px",
          transform: "translateY(-50%)"
        };
      case "right":
        return {
          borderColor: ` transparent ${t} transparent  transparent `,
          top: "50%",
          left: "-8px",
          transform: "translateY(-50%)"
        };
      default:
        return {
          borderColor: ` transparent ${t} transparent  transparent `,
          bottom: "-8px",
          left: "50%",
          transform: "translateX(-50%)"
        };
    }
  };
  return /* @__PURE__ */ c.jsxs(
    "div",
    {
      className: v,
      onMouseEnter: X,
      onMouseLeave: j,
      children: [
        $,
        i && u && /* @__PURE__ */ c.jsxs(
          "div",
          {
            ref: a,
            className: `${n.tooltip} `,
            style: S(),
            children: [
              y && /* @__PURE__ */ c.jsx(
                "div",
                {
                  className: `${n.tooltipArrow} ${n[l]} `,
                  style: E()
                }
              ),
              i
            ]
          }
        )
      ]
    }
  );
};
export {
  R as default
};