39 lines
No EOL
1.5 KiB
TypeScript
39 lines
No EOL
1.5 KiB
TypeScript
import { Ref, RefObject, useEffect, useState } from "react";
|
|
import { useFocusEventListener } from "../scripts/spatialNavigation";
|
|
import useActiveControl from "../scripts/gamepads";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
export default function FocusTooltip (data: { parentRef: RefObject<any>; visible?: boolean; })
|
|
{
|
|
const [hoverText, setHoverText] = useState<string | undefined>(undefined);
|
|
const [hoverTextType, setHoverTextType] = useState<string>('accent');
|
|
|
|
const handleTooltipSet = (e: HTMLElement) =>
|
|
{
|
|
const dataTooltip = e.getAttribute('data-tooltip');
|
|
setHoverText(dataTooltip ?? undefined);
|
|
setHoverTextType(e.getAttribute('data-tooltip-type') ?? 'accent');
|
|
};
|
|
|
|
const { isPointer } = useActiveControl();
|
|
|
|
useFocusEventListener('focuschanged', (e) =>
|
|
{
|
|
if (e.target instanceof HTMLElement)
|
|
{
|
|
handleTooltipSet(e.target);
|
|
}
|
|
|
|
}, data.parentRef);
|
|
|
|
const tooltipStyles = {
|
|
base: 'bg-base-100 text-base-content',
|
|
accent: 'bg-accent text-accent-content',
|
|
error: 'bg-error text-error-content',
|
|
warning: 'bg-warning text-warning-content',
|
|
info: 'bg-info text-info-content',
|
|
success: 'bg-success text-success-content'
|
|
};
|
|
|
|
return !!hoverText && (data.visible ?? true) && !isPointer && <p className={twMerge("flex sm:hidden md:inline py-1 md:py-2 md:px-4 rounded-4xl text-wrap wrap-anywhere text-base", (tooltipStyles as any)[hoverTextType])}>{hoverText}</p>;
|
|
} |