Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 1x 1x 1x 1x 1x 1x 27x 27x 27x 27x 27x 18x 15x 15x 27x 27x 1x 1x 27x 1x 1x 27x 27x 27x 27x 27x 27x 27x | import { useAppContext } from '@/context';
import { delayAction } from '@/helpers/utils';
import { useEffect, useState } from 'react';
/**
* Hook to manage help tooltip visibility with customizable timing.
* Consolidates the help tooltip logic used across multiple components.
*
* @param delay - Delay before showing tooltip (default: 500ms)
* @param duration - Duration to show tooltip (default: 2000ms)
* @returns Tooltip state and handlers
*
* @example
* ```tsx
* const { showHelp, handleTooltipClose, handleTooltipOpen } = useHelpTooltip(1000, 3000);
*
* <Tooltip
* open={showHelp}
* onClose={handleTooltipClose}
* onOpen={handleTooltipOpen}
* >
* <Button>Help Button</Button>
* </Tooltip>
* ```
* @source
*/
export function useHelpTooltip(delay = 500, duration = 2000) {
const appContext = useAppContext();
const [showHelp, setShowHelp] = useState(false);
/**
* Effect hook to show and hide help tooltip based on settings.
* Shows help tooltip after delay and hides it after duration if showHelp is enabled.
* @source
*/
useEffect(() => {
if (appContext.userSettings.showHelp === false) return;
delayAction(delay, () => setShowHelp(true));
delayAction(duration, () => setShowHelp(false));
}, [delay, duration, appContext.userSettings.showHelp]);
const handleTooltipClose = () => {
setShowHelp(false);
};
const handleTooltipOpen = () => {
setShowHelp(true);
};
return {
showHelp,
setShowHelp,
handleTooltipClose,
handleTooltipOpen,
};
}
|