idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 08:49:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): make tooltips clickable if touchscreen is present (#1427)

Browse source 
* fix(web): make tooltips clickable if touchscreen is present

* fix(web): handle visibility for click and touch

* fix(chore): add removed license header again
This commit is contained in:
martylukyy 2024-02-27 12:24:17 +01:00 • committed by GitHub
parent fdea29103d
commit 35566039d5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 15 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

33
web/src/components/tooltips/Tooltip.tsx
View file

@ -14,7 +14,6 @@ import { classNames } from "@utils";
interface TooltipProps {
label: ReactNode;
onLabelClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
title?: ReactNode;
maxWidth?: string;
requiresClick?: boolean;
@ -27,7 +26,6 @@ interface TooltipProps {
export const Tooltip = ({
label,
onLabelClick,
title,
children,
requiresClick,
@ -36,9 +34,6 @@ export const Tooltip = ({
const [isTooltipVisible, setIsTooltipVisible] = useState(false);
const [tooltipNode, setTooltipNode] = useState<HTMLDivElement | null>(null);
const [triggerNode, setTriggerNode] = useState<HTMLDivElement | null>(null);
const isTouchDevice = () => {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
};
// default tooltip placement to right
const [placement, setPlacement] = useState<Placement>('right');
@ -62,19 +57,23 @@ export const Tooltip = ({
};
}, []);
const {
getTooltipProps,
setTooltipRef: popperSetTooltipRef,
setTriggerRef: popperSetTriggerRef,
visible
} = usePopperTooltip({
trigger: isTouchDevice() ? [] : (requiresClick ? 'click' : ['click', 'hover']),
trigger: requiresClick ? 'click' : ['click', 'hover'],
interactive: true,
delayHide: 200,
placement,
});
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
e.preventDefault();
setIsTooltipVisible(!isTooltipVisible);
};
const handleTouch = (e: React.TouchEvent<HTMLDivElement>) => {
e.preventDefault();
setIsTooltipVisible(!isTooltipVisible);
@ -90,35 +89,33 @@ export const Tooltip = ({
setTriggerNode(node);
};
const handleClickOutside = useCallback((event: TouchEvent) => {
const handleClickOutside = useCallback((event: MouseEvent | TouchEvent) => {
if (tooltipNode && !tooltipNode.contains(event.target as Node) && triggerNode && !triggerNode.contains(event.target as Node)) {
setIsTooltipVisible(false);
}
}, [tooltipNode, triggerNode]);
useEffect(() => {
document.addEventListener('touchstart', handleClickOutside, true);
document.addEventListener('touchstart', handleClickOutside as EventListener, true);
document.addEventListener('mousedown', handleClickOutside as EventListener, true);
return () => {
document.removeEventListener('touchstart', handleClickOutside, true);
document.removeEventListener('touchstart', handleClickOutside as EventListener, true);
document.removeEventListener('mousedown', handleClickOutside as EventListener, true);
};
}, [handleClickOutside, tooltipNode, triggerNode]);
}, [handleClickOutside]);
return (
<>
<div
ref={setTriggerRef}
className="truncate"
onClick={(e) => {
if (!isTouchDevice() && !visible) {
onLabelClick?.(e);
}
}}
onTouchStart={isTouchDevice() ? handleTouch : undefined}
onClick={handleClick}
onTouchStart={handleTouch}
>
{label}
</div>
<Transition
show={isTouchDevice() ? isTooltipVisible : visible}
show={isTooltipVisible || visible}
className="z-10"
enter="transition duration-200 ease-out"
enterFrom="opacity-0"