@redocly/theme/src/core/hooks/use-control.ts

Shared UI components lib

import { useState, useCallback, useRef } from 'react';

const DEFAULT_CONTROL_OPEN_DELAY = 300;

export type UseControlReturnType = {
  isOpened: boolean;
  handleOpen: () => void;
  handleClose: () => void;
};

export const useControl = (initialVal = false): UseControlReturnType => {
  const [isOpened, setIsOpened] = useState<boolean>(initialVal);
  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const clearOpenTimer = useCallback(() => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
  }, []);

  const handleOpen = useCallback(() => {
    clearOpenTimer();
    timeoutRef.current = setTimeout(() => {
      setIsOpened(true);
    }, DEFAULT_CONTROL_OPEN_DELAY);
  }, [clearOpenTimer]);

  const handleClose = useCallback(() => {
    clearOpenTimer();
    setIsOpened(false);
  }, [clearOpenTimer]);

  return {
    isOpened,
    handleOpen,
    handleClose,
  };
};