@coreui/react-pro/dist/esm/hooks/useDropdownWithPopper.js

UI Components Library for React.js

import { useRef, useState, useEffect } from 'react';
import { usePopper } from './usePopper.js';
import isRTL from '../utils/isRTL.js';

const useDropdownWithPopper = (popperConfig) => {
    const dropdownRefElement = useRef(null);
    const dropdownMenuElement = useRef(null);
    const [isOpen, setIsOpen] = useState(false);
    const { popper, initPopper, destroyPopper } = usePopper();
    const _popperConfig = Object.assign({ placement: (isRTL(dropdownRefElement.current) ? 'bottom-end' : 'bottom-start'), modifiers: [
            {
                name: 'preventOverflow',
                options: {
                    boundary: 'clippingParents',
                },
            },
            {
                name: 'offset',
                options: {
                    offset: [0, 2],
                },
            },
        ] }, popperConfig);
    const closeDropdown = () => {
        setIsOpen(false);
    };
    const openDropdown = () => {
        setIsOpen(true);
    };
    const toggleDropdown = () => {
        setIsOpen((prev) => !prev);
    };
    const updatePopper = () => {
        if (popper) {
            popper.update();
        }
    };
    const handleKeyUp = (event) => {
        if (event.key === 'Escape') {
            setIsOpen(false);
            return;
        }
        if (event.key === 'Tab') {
            if (dropdownRefElement.current &&
                dropdownRefElement.current.contains(document.activeElement)) {
                return;
            }
            if (dropdownMenuElement.current &&
                dropdownMenuElement.current.contains(document.activeElement)) {
                return;
            }
            setIsOpen(false);
        }
    };
    const handleMouseUp = (event) => {
        if ((dropdownMenuElement.current &&
            dropdownMenuElement.current.contains(event.target)) ||
            (dropdownRefElement.current &&
                dropdownRefElement.current.contains(event.target))) {
            return;
        }
        setIsOpen(false);
    };
    useEffect(() => {
        if (isOpen) {
            window.addEventListener('mouseup', handleMouseUp);
            window.addEventListener('keyup', handleKeyUp);
            if (dropdownRefElement.current && dropdownMenuElement.current) {
                initPopper(dropdownRefElement.current, dropdownMenuElement.current, _popperConfig);
            }
        }
        else {
            window.removeEventListener('mouseup', handleMouseUp);
            window.removeEventListener('keyup', handleKeyUp);
            destroyPopper();
        }
        return () => {
            window.removeEventListener('mouseup', handleMouseUp);
            window.removeEventListener('keyup', handleKeyUp);
            destroyPopper();
        };
    }, [isOpen]);
    return {
        dropdownMenuElement,
        dropdownRefElement,
        isOpen,
        closeDropdown,
        openDropdown,
        toggleDropdown,
        updatePopper,
    };
};

export { useDropdownWithPopper };
//# sourceMappingURL=useDropdownWithPopper.js.map