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

UI Components Library for React.js

'use strict';

var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
var React = require('react');
var usePopper = require('./usePopper.js');
var isRTL = require('../utils/isRTL.js');

var useDropdownWithPopper = function (popperConfig) {
    var dropdownRefElement = React.useRef(null);
    var dropdownMenuElement = React.useRef(null);
    var _a = React.useState(false), isOpen = _a[0], setIsOpen = _a[1];
    var _b = usePopper.usePopper(), popper = _b.popper, initPopper = _b.initPopper, destroyPopper = _b.destroyPopper;
    var _popperConfig = tslib_es6.__assign({ placement: (isRTL.default(dropdownRefElement.current) ? 'bottom-end' : 'bottom-start'), modifiers: [
            {
                name: 'preventOverflow',
                options: {
                    boundary: 'clippingParents',
                },
            },
            {
                name: 'offset',
                options: {
                    offset: [0, 2],
                },
            },
        ] }, popperConfig);
    var closeDropdown = function () {
        setIsOpen(false);
    };
    var openDropdown = function () {
        setIsOpen(true);
    };
    var toggleDropdown = function () {
        setIsOpen(function (prev) { return !prev; });
    };
    var updatePopper = function () {
        if (popper) {
            popper.update();
        }
    };
    var handleKeyUp = function (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);
        }
    };
    var handleMouseUp = function (event) {
        if ((dropdownMenuElement.current &&
            dropdownMenuElement.current.contains(event.target)) ||
            (dropdownRefElement.current &&
                dropdownRefElement.current.contains(event.target))) {
            return;
        }
        setIsOpen(false);
    };
    React.useEffect(function () {
        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 function () {
            window.removeEventListener('mouseup', handleMouseUp);
            window.removeEventListener('keyup', handleKeyUp);
            destroyPopper();
        };
    }, [isOpen]);
    return {
        dropdownMenuElement: dropdownMenuElement,
        dropdownRefElement: dropdownRefElement,
        isOpen: isOpen,
        closeDropdown: closeDropdown,
        openDropdown: openDropdown,
        toggleDropdown: toggleDropdown,
        updatePopper: updatePopper,
    };
};

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