mirror of
https://github.com/makeplane/plane.git
synced 2025-12-23 15:19:37 +01:00
333a989b1a
* chore: components restructuring and minor UI improvements. * chore: minor UI improvements fro icons and member dropdown. * chore: update issue identifier. * chore: rename `Issue Extra Property` to `Issue Additional Property` * chore: fix popovers placement issue on components with overflow. * chore: add `scrollbar-xs` * chore: add `xs` size for input and textarea components. * chore: update `sortable` to return back `movedItem` in the onChange callback. * chore: minor UI adjustments for radio-select. * chore: update outside click delay to 1ms.
43 lines
1.8 KiB
TypeScript
43 lines
1.8 KiB
TypeScript
import React, { useEffect } from "react";
|
|
|
|
// TODO: move it to helpers package
|
|
const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
|
|
const handleClick = (event: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(event.target as Node)) {
|
|
// get all the element with attribute name data-prevent-outside-click
|
|
const preventOutsideClickElements = document.querySelectorAll("[data-prevent-outside-click]");
|
|
// check if the click target is any of the elements with attribute name data-prevent-outside-click
|
|
for (let i = 0; i < preventOutsideClickElements.length; i++) {
|
|
if (preventOutsideClickElements[i].contains(event.target as Node)) {
|
|
// if the click target is any of the elements with attribute name data-prevent-outside-click, return
|
|
return;
|
|
}
|
|
}
|
|
// get all the element with attribute name data-delay-outside-click
|
|
const delayOutsideClickElements = document.querySelectorAll("[data-delay-outside-click]");
|
|
// check if the click target is any of the elements with attribute name data-delay-outside-click
|
|
for (let i = 0; i < delayOutsideClickElements.length; i++) {
|
|
if (delayOutsideClickElements[i].contains(event.target as Node)) {
|
|
// if the click target is any of the elements with attribute name data-delay-outside-click, delay the callback
|
|
setTimeout(() => {
|
|
callback();
|
|
}, 1);
|
|
return;
|
|
}
|
|
}
|
|
// else, call the callback immediately
|
|
callback();
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
document.addEventListener("mousedown", handleClick);
|
|
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClick);
|
|
};
|
|
});
|
|
};
|
|
|
|
export default useOutsideClickDetector;
|