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

UI Components Library for React.js

'use strict';

var React = require('react');
var usePopper = require('./usePopper.js');
var isRTL = require('../utils/isRTL.js');

const useDropdownWithPopper = (popperConfig) => {
    const dropdownRefElement = React.useRef(null);
    const dropdownMenuElement = React.useRef(null);
    const [isOpen, setIsOpen] = React.useState(false);
    const { popper, initPopper, destroyPopper } = usePopper.usePopper();
    const _popperConfig = Object.assign({ placement: (isRTL.default(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);
    };
    React.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,
    };
};

exports.useDropdownWithPopper = useDropdownWithPopper;
//# sourceMappingURL=useDropdownWithPopper.js.map