@heycar-uikit/core/header/modern/hooks/useLangList.js

The React UI library from HeyCar

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

const CLOSE_TIMEOUT = 300;
const useLangList = () => {
    const timer = useRef(undefined);
    const [isHovering, setIsHovering] = useState(undefined);
    const [isFocused, setIsFocused] = useState(undefined);
    const [isKeyboardToggle, setIsKeyboardToggle] = useState(false);
    const [isLangListOpen, setIsLangListOpen] = useState(false);
    useEffect(() => {
        if (isHovering === false || isFocused === false) {
            timer.current = setTimeout(() => {
                setIsLangListOpen(false);
            }, CLOSE_TIMEOUT);
        }
        if (isHovering) {
            setIsLangListOpen(true);
            if (timer.current)
                clearTimeout(timer.current);
        }
        if (isFocused && timer.current) {
            clearTimeout(timer.current);
        }
        return () => {
            if (timer.current)
                clearTimeout(timer.current);
        };
    }, [isFocused, isHovering]);
    useEffect(() => {
        if (timer.current)
            clearTimeout(timer.current);
        setIsLangListOpen(isKeyboardToggle);
    }, [isKeyboardToggle]);
    const keyboardOpen = (e) => {
        if (e.code === 'Space') {
            e.preventDefault();
            setIsKeyboardToggle(!isKeyboardToggle);
        }
    };
    return {
        isLangListOpen,
        keyboardOpen,
        setIsHovering,
        setIsFocused,
        setIsLangListOpen,
    };
};

export { useLangList };