130 lines
3.6 KiB
TypeScript
130 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef, useEffect, useCallback } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { useHelpMode } from "@/stores/helpModeStore";
|
|
|
|
interface HelpTooltipProps {
|
|
text: string;
|
|
children: React.ReactNode;
|
|
/** Use block=true for full-width elements so the ? sits to the right without breaking layout */
|
|
block?: boolean;
|
|
/** Set hidden=true to suppress the ? badge (e.g. collapsed sidebar items) */
|
|
hidden?: boolean;
|
|
}
|
|
|
|
export default function HelpTooltip({ text, children, block = false, hidden = false }: HelpTooltipProps) {
|
|
const helpMode = useHelpMode();
|
|
const [open, setOpen] = useState(false);
|
|
const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
|
|
const btnRef = useRef<HTMLButtonElement>(null);
|
|
const flyoutRef = useRef<HTMLDivElement>(null);
|
|
const touchHandled = useRef(false);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => { setMounted(true); }, []);
|
|
|
|
useEffect(() => {
|
|
if (!helpMode) setOpen(false);
|
|
}, [helpMode]);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const close = (e: MouseEvent | TouchEvent) => {
|
|
const target = e.target as Node;
|
|
if (!btnRef.current?.contains(target) && !flyoutRef.current?.contains(target)) {
|
|
setOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener("mousedown", close);
|
|
document.addEventListener("touchstart", close, { passive: true });
|
|
return () => {
|
|
document.removeEventListener("mousedown", close);
|
|
document.removeEventListener("touchstart", close);
|
|
};
|
|
}, [open]);
|
|
|
|
const calcPos = useCallback(() => {
|
|
if (!btnRef.current) return;
|
|
const rect = btnRef.current.getBoundingClientRect();
|
|
const flyW = 210;
|
|
const x = rect.right + 8 + flyW > window.innerWidth
|
|
? Math.max(4, rect.left - flyW - 8)
|
|
: rect.right + 8;
|
|
const y = Math.min(rect.top - 4, window.innerHeight - 130);
|
|
setPos({ x, y });
|
|
}, []);
|
|
|
|
const handleClick = useCallback((e: React.MouseEvent) => {
|
|
if (touchHandled.current) { touchHandled.current = false; return; }
|
|
e.stopPropagation();
|
|
calcPos();
|
|
setOpen((v) => !v);
|
|
}, [calcPos]);
|
|
|
|
const handleTouchEnd = useCallback((e: React.TouchEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
touchHandled.current = true;
|
|
calcPos();
|
|
setOpen((v) => !v);
|
|
}, [calcPos]);
|
|
|
|
if (!helpMode || hidden) return <>{children}</>;
|
|
|
|
const qBtn = (
|
|
<button
|
|
ref={btnRef}
|
|
onClick={handleClick}
|
|
onTouchEnd={handleTouchEnd}
|
|
aria-label="Help"
|
|
style={{
|
|
display: "inline-flex", alignItems: "center", justifyContent: "center",
|
|
width: 14, height: 14, borderRadius: "50%", flexShrink: 0,
|
|
border: "1px solid var(--color-blue)",
|
|
background: "color-mix(in srgb, var(--color-blue) 15%, transparent)",
|
|
color: "var(--color-blue)",
|
|
fontSize: 9, fontWeight: 700, lineHeight: 1,
|
|
cursor: "pointer", padding: 0,
|
|
}}
|
|
>
|
|
?
|
|
</button>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{block ? (
|
|
<div style={{ display: "flex", alignItems: "center", gap: 4 }}>
|
|
<div style={{ flex: 1, minWidth: 0 }}>{children}</div>
|
|
{qBtn}
|
|
</div>
|
|
) : (
|
|
<span style={{ display: "inline-flex", alignItems: "center", gap: 3 }}>
|
|
{children}
|
|
{qBtn}
|
|
</span>
|
|
)}
|
|
{open && mounted && pos && createPortal(
|
|
<div
|
|
ref={flyoutRef}
|
|
style={{
|
|
position: "fixed", left: pos.x, top: pos.y, zIndex: 9999,
|
|
width: 210,
|
|
background: "var(--color-primary)",
|
|
border: "1px solid var(--color-secondary)",
|
|
borderRadius: 10,
|
|
padding: "10px 12px",
|
|
fontSize: 12,
|
|
color: "var(--color-foreground)",
|
|
lineHeight: 1.55,
|
|
boxShadow: "0 8px 24px rgba(0,0,0,0.18)",
|
|
}}
|
|
>
|
|
{text}
|
|
</div>,
|
|
document.body
|
|
)}
|
|
</>
|
|
);
|
|
}
|