foxit-component 1.0.4-alpha.4 → 1.0.4-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Tooltip/Tooltip.js +13 -5
- package/package.json +1 -1
package/es/Tooltip/Tooltip.js
CHANGED
|
@@ -8,9 +8,15 @@ var Tooltip = function (_a) {
|
|
|
8
8
|
var title = _a.title, children = _a.children, _b = _a.whiteGround, whiteGround = _b === void 0 ? false : _b, className = _a.className;
|
|
9
9
|
var childRef = useRef(null);
|
|
10
10
|
var tooltipRef = useRef(null);
|
|
11
|
-
var _c = useState({
|
|
11
|
+
var _c = useState({
|
|
12
|
+
visibility: 'hidden',
|
|
13
|
+
position: 'absolute',
|
|
14
|
+
top: '0',
|
|
15
|
+
left: '0'
|
|
16
|
+
}), tooltipStyle = _c[0], setTooltipStyle = _c[1];
|
|
12
17
|
var isVisibleRef = useRef(false);
|
|
13
18
|
var _d = useState('50%'), arrowLeft = _d[0], setArrowLeft = _d[1];
|
|
19
|
+
var _e = useState(false), mounted = _e[0], setMounted = _e[1];
|
|
14
20
|
var calculateTooltipPosition = function () {
|
|
15
21
|
if (childRef.current && tooltipRef.current && isVisibleRef.current) {
|
|
16
22
|
var childRect = childRef.current.getBoundingClientRect();
|
|
@@ -53,16 +59,18 @@ var Tooltip = function (_a) {
|
|
|
53
59
|
window.removeEventListener('resize', calculateTooltipPosition); // 移除窗口大小变化监听
|
|
54
60
|
};
|
|
55
61
|
useEffect(function () {
|
|
62
|
+
setMounted(true);
|
|
56
63
|
return function () {
|
|
57
64
|
// 清理事件监听器，防止内存泄漏
|
|
58
65
|
window.removeEventListener('scroll', calculateTooltipPosition);
|
|
59
66
|
window.removeEventListener('resize', calculateTooltipPosition);
|
|
60
67
|
};
|
|
61
68
|
}, []);
|
|
62
|
-
return (jsxs(Fragment, { children: [jsx("div", __assign({ className: "foxit-tooltip-container", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: childRef }, { children: children })),
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
69
|
+
return (jsxs(Fragment, { children: [jsx("div", __assign({ className: "foxit-tooltip-container", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: childRef }, { children: children })), mounted &&
|
|
70
|
+
ReactDOM.createPortal(jsxs("div", __assign({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, className: classNames('foxit-tooltip-content', {
|
|
71
|
+
'foxit-tooltip-white': whiteGround
|
|
72
|
+
}, className), style: tooltipStyle, ref: tooltipRef }, { children: [title, jsx("div", { className: "foxit-tooltip-arrow", style: { left: arrowLeft } })] })), document.body // 直接挂载到 body，避免层叠上下文限制
|
|
73
|
+
)] }));
|
|
66
74
|
};
|
|
67
75
|
|
|
68
76
|
export { Tooltip as default };
|