Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 6x 6x 137x 136x 136x 136x 136x 136x 15x 6x 6x 136x 136x 136x 136x 6x | import React, { useEffect, useRef } from "react";
import { ClickAwayListenerProps } from "./ClickAwayListener.types";
const ClickAwayListener: React.FC<ClickAwayListenerProps> = ({
children,
onClickAway,
"data-testid": dataTestId,
}) => {
const clickAwayListenerRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const handleClickAway = (e: MouseEvent) => {
if (
clickAwayListenerRef.current &&
!clickAwayListenerRef.current.contains(e.target as Node)
) {
if (onClickAway) {
onClickAway(e);
}
}
};
window.addEventListener("click", handleClickAway, true);
return () => {
window.removeEventListener("click", handleClickAway, true);
}
},[children, onClickAway]);
return <div data-testid={dataTestId} ref={clickAwayListenerRef}>{children}</div>;
};
export default ClickAwayListener;
|