Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(utils): Slightly better tooltip behavior after clicking somewhere…
… on the page
  • Loading branch information
mlaursen committed Jun 10, 2021
1 parent 8c65df6 commit 4d3fc16
Showing 1 changed file with 30 additions and 16 deletions.
46 changes: 30 additions & 16 deletions packages/utils/src/hover/useHoverMode.ts
Expand Up @@ -9,7 +9,7 @@ import {
useState,
} from "react";

import { useIsUserInteractionMode } from "../mode";
import { useUserInteractionMode } from "../mode";
import { useOnUnmount } from "../useOnUnmount";
import { DEFAULT_HOVER_MODE_STICKY_EXIT_TIME } from "./constants";
import { HoverModeActions, useHoverModeContext } from "./useHoverModeContext";
Expand Down Expand Up @@ -226,11 +226,12 @@ export function useHoverMode<E extends HTMLElement>({
defaultVisible = false,
exitVisibilityDelay = sticky ? DEFAULT_HOVER_MODE_STICKY_EXIT_TIME : 0,
}: HoverModeOptions<E> = {}): HoverModeReturnValue<E> {
const isTouch = useIsUserInteractionMode("touch");
const mode = useUserInteractionMode();
const isTouch = mode === "touch";
const [visible, setVisible] = useState(defaultVisible);
const [stuck, setStuck] = useState(false);
const enterTimeoutRef = useRef<number>();
const exitTimeoutRef = useRef<number>();
const timeoutRef = useRef<number>();
const skipReset = useRef(defaultVisible);
const {
visibleInTime,
enableHoverMode,
Expand All @@ -246,15 +247,31 @@ export function useHoverMode<E extends HTMLElement>({
}, [visible, sticky]);

useOnUnmount(() => {
window.clearTimeout(enterTimeoutRef.current);
window.clearTimeout(exitTimeoutRef.current);
window.clearTimeout(timeoutRef.current);
});

useEffect(() => {
if (isTouch || disabled) {
if (disabled) {
return;
}

const reset = (): void => {
setVisible(false);
disableHoverMode();
window.clearTimeout(timeoutRef.current);
};

// this is just used so the `defaultOption` can be used
if (!skipReset.current) {
reset();
}
}, [disableHoverMode, isTouch, disabled]);
skipReset.current = false;

window.addEventListener("mousedown", reset);
return () => {
window.removeEventListener("mousedown", reset);
};
}, [disableHoverMode, mode, disabled]);

const onMouseEnter = useCallback(
(event: MouseEvent<E>) => {
Expand All @@ -263,15 +280,14 @@ export function useHoverMode<E extends HTMLElement>({
return;
}

window.clearTimeout(enterTimeoutRef.current);
window.clearTimeout(exitTimeoutRef.current);
window.clearTimeout(timeoutRef.current);
if (visibleInTime === 0) {
enableHoverMode();
setVisible(true);
return;
}

enterTimeoutRef.current = window.setTimeout(() => {
timeoutRef.current = window.setTimeout(() => {
enableHoverMode();
setVisible(true);
}, visibleInTime);
Expand All @@ -287,14 +303,13 @@ export function useHoverMode<E extends HTMLElement>({
}

startDisableTimer();
window.clearTimeout(enterTimeoutRef.current);
window.clearTimeout(exitTimeoutRef.current);
window.clearTimeout(timeoutRef.current);
if (exitVisibilityDelay === 0) {
setVisible(false);
return;
}

exitTimeoutRef.current = window.setTimeout(() => {
timeoutRef.current = window.setTimeout(() => {
setVisible(false);
}, exitVisibilityDelay);
},
Expand All @@ -316,8 +331,7 @@ export function useHoverMode<E extends HTMLElement>({
}

startDisableTimer();
window.clearTimeout(enterTimeoutRef.current);
window.clearTimeout(exitTimeoutRef.current);
window.clearTimeout(timeoutRef.current);
},
[disabled, propOnClick, startDisableTimer]
);
Expand Down

0 comments on commit 4d3fc16

Please sign in to comment.