design-system-simplefi
Version:
Design System for SimpleFi Applications
34 lines • 1.35 kB
JavaScript
import { useEffect, useRef } from 'react';
import { isNotNull } from 'ramda-adjunct';
export var useOuterClick = function (callback) {
var innerRef = useRef(null);
var callbackRef = useRef(null);
var isListenersAdded = useRef(false);
// read most recent callback and innerRef dom node from refs
var handleClick = function (e) {
if (innerRef.current &&
callbackRef.current &&
!innerRef.current.contains(e.target)) {
callbackRef.current(e);
}
};
// set current callback in ref, before second useEffect uses it
useEffect(function () {
// useEffect wrapper to be safe for concurrent mode
callbackRef.current = callback;
});
useEffect(function () {
if (isListenersAdded.current && isNotNull(callbackRef.current)) {
window.removeEventListener('scroll', handleClick);
isListenersAdded.current = false;
}
document.addEventListener('click', handleClick);
isListenersAdded.current = true;
return function () {
document.removeEventListener('click', handleClick);
isListenersAdded.current = false;
};
}, []); // no need for callback + innerRef dep
return innerRef; // return ref; client can omit `useRef`
};
//# sourceMappingURL=useOuterCallback.js.map