37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import type React from "react";
|
|
import { useEffect } from "react";
|
|
|
|
export const useOutsideClickDetector = (
|
|
ref: React.RefObject<HTMLElement> | any,
|
|
callback: () => void,
|
|
useCapture = false
|
|
) => {
|
|
const handleClick = (event: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(event.target as any)) {
|
|
// check for the closest element with attribute name data-prevent-outside-click
|
|
const preventOutsideClickElement = (event.target as unknown as HTMLElement | undefined)?.closest(
|
|
"[data-prevent-outside-click]"
|
|
);
|
|
// if the closest element with attribute name data-prevent-outside-click is found, return
|
|
if (preventOutsideClickElement) {
|
|
return;
|
|
}
|
|
// else call the callback
|
|
callback();
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
document.addEventListener("mousedown", handleClick, useCapture);
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClick, useCapture);
|
|
};
|
|
});
|
|
};
|