@glodon-aiot/react-components
Version:
aiot react components
55 lines (54 loc) • 1.54 kB
JavaScript
import { jsx as a } from "react/jsx-runtime";
import { useRef as d, useState as f, useEffect as p } from "react";
import "./style.less.mjs";
import { placementStringToArr as O, getPlacementPosition as S, getOffsetX as T, getOffsetY as w } from "./utils.mjs";
const V = (t) => {
var u;
const {
children: b,
defaultPosition: g,
forElement: E,
placement: x = "right-bottom",
curserPosition: y,
className: h,
style: L
} = t, P = d(null), n = d(null), e = E || document.body, o = O(x), i = S(o, (u = n.current) == null ? void 0 : u.getBoundingClientRect(), y), [$, s] = f(t.visible || !0), [r, N] = f(g || {
x: -2e3,
y: -2e3
});
p(() => (e.addEventListener("mouseenter", m), e.addEventListener("mousemove", c), e.addEventListener("mouseleave", l), () => {
e.removeEventListener("mouseenter", m), e.removeEventListener("mousemove", c), e.removeEventListener("mouseleave", l);
}), [e]), p(() => {
s(t.visible || !0);
}, [t.visible]);
const m = () => {
s(!0);
}, l = () => {
s(!1);
}, c = (v) => {
let R = T(v) + i.x;
const j = w(v) + i.y;
N({
x: R,
y: j
});
};
return /* @__PURE__ */ a("div", {
className: `g-mouse-tip ${o.join(" ")}`,
ref: P,
style: {
left: `${r.x}px`,
top: `${r.y}px`,
visibility: `${$ ? "visible" : "hidden"}`
},
children: /* @__PURE__ */ a("div", {
className: `g-mouse-tip-content ${h}`,
style: L,
ref: n,
children: b
})
});
};
export {
V as MouseTip
};