react-detect-click-outside/dist/index.js

Detects clicks outside React components, and also handles keypresses.

Object.defineProperty(exports, '__esModule', { value: true });

var react = require('react');

/**
 * Hook used to detect clicks outside a component (or an escape key press). onTriggered function is triggered on `click`, `touch` or escape `keyup` event.
 *
 */
function useDetectClickOutside(_a) {
    var onTriggered = _a.onTriggered, disableClick = _a.disableClick, disableTouch = _a.disableTouch, disableKeys = _a.disableKeys, allowAnyKey = _a.allowAnyKey, triggerKeys = _a.triggerKeys;
    var ref = react.useRef(null);
    var keyListener = react.useCallback(function (e) {
        if (allowAnyKey) {
            onTriggered(e);
        }
        else if (triggerKeys) {
            if (triggerKeys.includes(e.key)) {
                onTriggered(e);
            }
        }
        else {
            if (e.key === 'Escape') {
                onTriggered(e);
            }
        }
    }, [allowAnyKey, triggerKeys, onTriggered]);
    var clickOrTouchListener = react.useCallback(function (e) {
        if (ref && ref.current) {
            if (!ref.current.contains(e.target)) {
                onTriggered === null || onTriggered === void 0 ? void 0 : onTriggered(e);
            }
        }
    }, [ref.current, onTriggered]);
    var eventsConfig = react.useMemo(function () { return [
        [disableClick, 'click', clickOrTouchListener],
        [disableTouch, 'touchstart', clickOrTouchListener],
        [disableKeys, 'keyup', keyListener],
    ]; }, [disableClick, disableTouch, disableKeys, clickOrTouchListener, keyListener]);
    react.useEffect(function () {
        eventsConfig.map(function (eventConfigItem) {
            var isDisabled = eventConfigItem[0], eventName = eventConfigItem[1], listener = eventConfigItem[2];
            if (!isDisabled) {
                document.addEventListener(eventName, listener);
            }
        });
        return function () {
            eventsConfig.map(function (eventConfigItem) {
                var isDisabled = eventConfigItem[0], eventName = eventConfigItem[1], listener = eventConfigItem[2];
                if (!isDisabled) {
                    document.removeEventListener(eventName, listener);
                }
            });
        };
    }, [eventsConfig]);
    return ref;
}

exports.useDetectClickOutside = useDetectClickOutside;
//# sourceMappingURL=index.js.map