@redocly/theme/src/core/hooks/search/use-feedback-tooltip.ts

Shared UI components lib

import { useState } from 'react';

import { useControl } from '../use-control';

type UseFeedbackTooltipReturn = {
  isOpen: boolean;
  showTooltip: () => void;
};

const DEFAULT_TOOLTIP_DURATION = 1500;

export function useFeedbackTooltip(): UseFeedbackTooltipReturn {
  const [closeTooltipTimeout, setCloseTooltipTimeout] = useState<NodeJS.Timeout | null>(null);
  const tooltipControl = useControl();

  const showTooltip = () => {
    tooltipControl.handleOpen();
    if (closeTooltipTimeout) {
      clearTimeout(closeTooltipTimeout);
    }
    const newCloseTooltipTimeout = setTimeout(() => {
      tooltipControl.handleClose();
      setCloseTooltipTimeout(null);
    }, DEFAULT_TOOLTIP_DURATION);
    setCloseTooltipTimeout(newCloseTooltipTimeout);
  };

  return {
    isOpen: tooltipControl.isOpened,
    showTooltip,
  };
}