admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Implemented useListenClickOutside V2 (#3507)

Browse Source 
* Implemented useListenClickOutside V2

* Removed lock and implemented a toggle instead
This commit is contained in:
Lucas Bordeau
2024-01-17 16:22:22 +01:00
committed by GitHub
parent 808100fdd5
commit bbfe62df9a
10 changed files with 303 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordOnClickOutsideEffect.tsx
View File

@ -1,4 +1,8 @@
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useEffect } from 'react';
import { MULTI_OBJECT_RECORD_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordClickOutsideListenerId';
import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
export const MultipleObjectRecordOnClickOutsideEffect = ({
containerRef,
@ -7,6 +11,21 @@ export const MultipleObjectRecordOnClickOutsideEffect = ({
containerRef: React.RefObject<HTMLDivElement>;
onClickOutside: () => void;
}) => {
const { useListenClickOutside } = useClickOutsideListener(
MULTI_OBJECT_RECORD_CLICK_OUTSIDE_LISTENER_ID,
);
const { toggleClickOutsideListener: toggleRightDrawerClickOustideListener } =
useClickOutsideListener(RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID);
useEffect(() => {
toggleRightDrawerClickOustideListener(false);
return () => {
toggleRightDrawerClickOustideListener(true);
};
}, [toggleRightDrawerClickOustideListener]);
useListenClickOutside({
refs: [containerRef],
callback: (event) => {

2
packages/twenty-front/src/modules/object-record/relation-picker/constants/MultiObjectRecordClickOutsideListenerId.ts Normal file
View File

@ -0,0 +1,2 @@
export const MULTI_OBJECT_RECORD_CLICK_OUTSIDE_LISTENER_ID =
'multi-object-record-click-outside-listener';