terriajs
Version:
Geospatial data visualization platform.
58 lines • 2.13 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useEffect, useRef } from "react";
export const OutsideClickHandler = ({ children, disabled = false, onOutsideClick }) => {
const removeMouseUp = useRef(null);
const removeMouseDown = useRef(null);
const ref = useRef(null);
const onMouseUp = useCallback((e) => {
const element = ref.current;
if (!element || !e.target) {
return;
}
const isDescendantOfRoot = element.contains(e.target);
if (removeMouseUp.current) {
removeMouseUp.current();
removeMouseUp.current = null;
}
if (!isDescendantOfRoot) {
onOutsideClick(e);
}
}, [onOutsideClick]);
const onMouseDown = useCallback((e) => {
const element = ref.current;
if (!element || !e.target) {
return;
}
const isDescendantOfRoot = element.contains(e.target);
if (!isDescendantOfRoot) {
if (removeMouseUp.current) {
removeMouseUp.current();
removeMouseUp.current = null;
}
document.addEventListener("mouseup", onMouseUp, { capture: true });
removeMouseUp.current = () => {
document.removeEventListener("mouseup", onMouseUp, { capture: true });
};
}
}, [onMouseUp]);
useEffect(() => {
const element = ref.current;
if (disabled || !element) {
return () => { };
}
document.addEventListener("mousedown", onMouseDown, { capture: true });
removeMouseDown.current = () => {
document.removeEventListener("mousedown", onMouseDown, { capture: true });
};
return () => {
if (removeMouseUp.current) {
removeMouseUp.current();
}
if (removeMouseDown.current) {
removeMouseDown.current();
}
};
}, [disabled, onMouseDown, onMouseUp]);
return _jsx("div", { ref: ref, children: children });
};
//# sourceMappingURL=OutsideClickHandler.js.map