mirror of
https://github.com/makeplane/plane.git
synced 2025-12-21 14:19:38 +01:00
3436c4f1f5
* [WEB-5501] refactor: optimize component structures and improve hooks - Updated type definitions in AppProvider to use React.ReactNode for children. - Enhanced HomePeekOverviewsRoot by using MobX observer and integrating issue detail hook. - Optimized ContentOverflowWrapper to prevent unnecessary re-renders by adjusting useEffect dependencies. - Updated DashboardQuickLinks to include necessary dependencies in useCallback. - Refactored GlobalShortcutsProvider to utilize refs for context and handler management, improving performance. - Changed useCurrentTime to update every minute instead of every second. - Refactored outside click hooks to use useCallback for better performance. - Improved IntercomProvider and PostHogProvider to prevent multiple initializations using refs. * refactor: simplify conditional rendering in HomePeekOverviewsRoot component * refactor: improve outside click detection in sidebar and peek overview hooks * refactor: enhance IntercomProvider and PostHogProvider with hydration state management
53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import type React from "react";
|
|
import { useEffect, useCallback } from "react";
|
|
|
|
const useExtendedSidebarOutsideClickDetector = (
|
|
ref: React.RefObject<HTMLElement>,
|
|
callback: () => void,
|
|
targetId: string
|
|
) => {
|
|
const handleClick = useCallback(
|
|
(event: MouseEvent) => {
|
|
if (!(event.target instanceof HTMLElement)) return;
|
|
if (ref.current && !ref.current.contains(event.target)) {
|
|
// check for the closest element with attribute name data-prevent-outside-click
|
|
const preventOutsideClickElement = event.target.closest("[data-prevent-outside-click]");
|
|
// if the closest element with attribute name data-prevent-outside-click is found, return
|
|
if (preventOutsideClickElement) {
|
|
return;
|
|
}
|
|
// check if the click target is the current issue element or its children
|
|
let targetElement: HTMLElement | null = event.target;
|
|
while (targetElement) {
|
|
if (targetElement.id === targetId) {
|
|
// if the click target is the current issue element, return
|
|
return;
|
|
}
|
|
targetElement = targetElement.parentElement;
|
|
}
|
|
const delayOutsideClickElement = event.target.closest("[data-delay-outside-click]");
|
|
if (delayOutsideClickElement) {
|
|
// if the click target is the closest element with attribute name data-delay-outside-click, delay the callback
|
|
setTimeout(() => {
|
|
callback();
|
|
}, 0);
|
|
return;
|
|
}
|
|
// else, call the callback immediately
|
|
callback();
|
|
}
|
|
},
|
|
[ref, callback, targetId]
|
|
);
|
|
|
|
useEffect(() => {
|
|
document.addEventListener("mousedown", handleClick);
|
|
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClick);
|
|
};
|
|
}, [handleClick]);
|
|
};
|
|
|
|
export default useExtendedSidebarOutsideClickDetector;
|