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

refacto clickoutside componentv2 (#11644)

Browse Source 
Switch to ComponentV2

Friday morning refacto & chill with @charles

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Guillim
2025-04-18 17:48:30 +02:00
committed by GitHub
parent cf5649a1df
commit 8512904c0a
25 changed files with 151 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx
View File

@ -22,6 +22,7 @@ interface BlockEditorProps {
readonly?: boolean;
}
// eslint-disable-next-line @nx/workspace-no-hardcoded-colors
const StyledEditor = styled.div`
width: 100%;

15
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useClickOutsideListener.test.tsx
View File

@ -1,8 +1,9 @@
import { act, renderHook } from '@testing-library/react';
import { RecoilRoot, useRecoilValue } from 'recoil';
import { RecoilRoot } from 'recoil';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
const componentId = 'componentId';
@ -10,12 +11,12 @@ describe('useClickOutsideListener', () => {
it('should toggle the click outside listener activation state', async () => {
const { result } = renderHook(
() => {
const { getClickOutsideListenerIsActivatedState } =
useClickOustideListenerStates(componentId);
return {
useClickOutside: useClickOutsideListener(componentId),
isActivated: useRecoilValue(getClickOutsideListenerIsActivatedState),
isActivated: useRecoilComponentValueV2(
clickOutsideListenerIsActivatedComponentState,
componentId,
),
};
},
{
@ -23,7 +24,7 @@ describe('useClickOutsideListener', () => {
},
);
const toggle = result.current.useClickOutside.toggleClickOutsideListener;
const toggle = result.current.useClickOutside.toggleClickOutside;
act(() => {
toggle(true);

29
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts
View File

@ -1,29 +0,0 @@
import { clickOutsideListenerCallbacksComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState';
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { clickOutsideListenerIsMouseDownInsideComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState';
import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
export const useClickOustideListenerStates = (componentId: string) => {
const scopeId = componentId;
return {
scopeId,
getClickOutsideListenerCallbacksState: extractComponentState(
clickOutsideListenerCallbacksComponentState,
scopeId,
),
getClickOutsideListenerIsMouseDownInsideState: extractComponentState(
clickOutsideListenerIsMouseDownInsideComponentState,
scopeId,
),
getClickOutsideListenerIsActivatedState: extractComponentState(
clickOutsideListenerIsActivatedComponentState,
scopeId,
),
getClickOutsideListenerMouseDownHappenedState: extractComponentState(
clickOutsideListenerMouseDownHappenedComponentState,
scopeId,
),
};
};

128
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOutsideListener.ts
View File

@ -1,126 +1,38 @@
import { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { ClickOutsideListenerCallback } from '@/ui/utilities/pointer-event/types/ClickOutsideListenerCallback';
import { toSpliced } from '~/utils/array/toSpliced';
import { isDefined } from 'twenty-shared/utils';
export const useClickOutsideListener = (instanceId: string) => {
const clickOutsideListenerIsActivatedState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerIsActivatedComponentState,
instanceId,
);
export const useClickOutsideListener = (componentId: string) => {
const {
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerCallbacksState,
getClickOutsideListenerMouseDownHappenedState,
} = useClickOustideListenerStates(componentId);
const clickOutsideListenerMouseDownHappenedState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerMouseDownHappenedComponentState,
instanceId,
);
const toggleClickOutsideListener = useRecoilCallback(
const toggleClickOutside = useRecoilCallback(
({ set }) =>
(activated: boolean) => {
set(getClickOutsideListenerIsActivatedState, activated);
set(clickOutsideListenerIsActivatedState, activated);
if (!activated) {
set(getClickOutsideListenerMouseDownHappenedState, false);
set(clickOutsideListenerMouseDownHappenedState, false);
}
},
[
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerMouseDownHappenedState,
clickOutsideListenerIsActivatedState,
clickOutsideListenerMouseDownHappenedState,
],
);
const registerOnClickOutsideCallback = useRecoilCallback(
({ set, snapshot }) =>
({ callbackFunction, callbackId }: ClickOutsideListenerCallback) => {
const existingCallbacks = snapshot
.getLoadable(getClickOutsideListenerCallbacksState)
.getValue();
const existingCallbackWithSameId = existingCallbacks.find(
(callback) => callback.callbackId === callbackId,
);
if (!isDefined(existingCallbackWithSameId)) {
const existingCallbacksWithNewCallback = existingCallbacks.concat({
callbackId,
callbackFunction,
});
set(
getClickOutsideListenerCallbacksState,
existingCallbacksWithNewCallback,
);
} else {
const existingCallbacksWithOverwrittenCallback = [
...existingCallbacks,
];
const indexOfExistingCallbackWithSameId =
existingCallbacksWithOverwrittenCallback.findIndex(
(callback) => callback.callbackId === callbackId,
);
existingCallbacksWithOverwrittenCallback[
indexOfExistingCallbackWithSameId
] = {
callbackId,
callbackFunction,
};
set(
getClickOutsideListenerCallbacksState,
existingCallbacksWithOverwrittenCallback,
);
}
},
[getClickOutsideListenerCallbacksState],
);
const unregisterOnClickOutsideCallback = useRecoilCallback(
({ set, snapshot }) =>
({ callbackId }: { callbackId: string }) => {
const existingCallbacks = snapshot
.getLoadable(getClickOutsideListenerCallbacksState)
.getValue();
const indexOfCallbackToUnsubscribe = existingCallbacks.findIndex(
(callback) => callback.callbackId === callbackId,
);
const callbackToUnsubscribeIsFound = indexOfCallbackToUnsubscribe > -1;
if (callbackToUnsubscribeIsFound) {
const newCallbacksWithoutCallbackToUnsubscribe = toSpliced(
existingCallbacks,
indexOfCallbackToUnsubscribe,
1,
);
set(
getClickOutsideListenerCallbacksState,
newCallbacksWithoutCallbackToUnsubscribe,
);
}
},
[getClickOutsideListenerCallbacksState],
);
const useRegisterClickOutsideListenerCallback = (
callback: ClickOutsideListenerCallback,
) => {
useEffect(() => {
registerOnClickOutsideCallback(callback);
return () => {
unregisterOnClickOutsideCallback({
callbackId: callback.callbackId,
});
};
}, [callback]);
};
return {
toggleClickOutsideListener,
useRegisterClickOutsideListenerCallback,
toggleClickOutside,
};
};

52
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts
View File

@ -1,8 +1,10 @@
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { clickOutsideListenerIsMouseDownInsideComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState';
import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import React, { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
const CLICK_OUTSIDE_DEBUG_MODE = false;
export enum ClickOutsideMode {
@ -27,20 +29,30 @@ export const useListenClickOutside = <T extends Element>({
listenerId,
enabled = true,
}: ClickOutsideListenerProps<T>) => {
const {
getClickOutsideListenerIsMouseDownInsideState,
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerMouseDownHappenedState,
} = useClickOustideListenerStates(listenerId);
const clickOutsideListenerIsMouseDownInsideState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerIsMouseDownInsideComponentState,
listenerId,
);
const clickOutsideListenerIsActivatedState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerIsActivatedComponentState,
listenerId,
);
const clickOutsideListenerMouseDownHappenedState =
useRecoilComponentCallbackStateV2(
clickOutsideListenerMouseDownHappenedComponentState,
listenerId,
);
const handleMouseDown = useRecoilCallback(
({ snapshot, set }) =>
(event: MouseEvent | TouchEvent) => {
const clickOutsideListenerIsActivated = snapshot
.getLoadable(getClickOutsideListenerIsActivatedState)
.getLoadable(clickOutsideListenerIsActivatedState)
.getValue();
set(getClickOutsideListenerMouseDownHappenedState, true);
set(clickOutsideListenerMouseDownHappenedState, true);
const isListening = clickOutsideListenerIsActivated && enabled;
@ -55,7 +67,7 @@ export const useListenClickOutside = <T extends Element>({
.some((ref) => ref.current?.contains(event.target as Node));
set(
getClickOutsideListenerIsMouseDownInsideState,
clickOutsideListenerIsMouseDownInsideState,
clickedOnAtLeastOneRef,
);
break;
@ -93,7 +105,7 @@ export const useListenClickOutside = <T extends Element>({
});
set(
getClickOutsideListenerIsMouseDownInsideState,
clickOutsideListenerIsMouseDownInsideState,
clickedOnAtLeastOneRef,
);
break;
@ -105,12 +117,12 @@ export const useListenClickOutside = <T extends Element>({
}
},
[
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerMouseDownHappenedState,
clickOutsideListenerIsActivatedState,
clickOutsideListenerMouseDownHappenedState,
enabled,
mode,
refs,
getClickOutsideListenerIsMouseDownInsideState,
clickOutsideListenerIsMouseDownInsideState,
],
);
@ -118,17 +130,17 @@ export const useListenClickOutside = <T extends Element>({
({ snapshot }) =>
(event: MouseEvent | TouchEvent) => {
const clickOutsideListenerIsActivated = snapshot
.getLoadable(getClickOutsideListenerIsActivatedState)
.getLoadable(clickOutsideListenerIsActivatedState)
.getValue();
const isListening = clickOutsideListenerIsActivated && enabled;
const isMouseDownInside = snapshot
.getLoadable(getClickOutsideListenerIsMouseDownInsideState)
.getLoadable(clickOutsideListenerIsMouseDownInsideState)
.getValue();
const hasMouseDownHappened = snapshot
.getLoadable(getClickOutsideListenerMouseDownHappenedState)
.getLoadable(clickOutsideListenerMouseDownHappenedState)
.getValue();
const clickedElement = event.target as HTMLElement;
@ -241,10 +253,10 @@ export const useListenClickOutside = <T extends Element>({
}
},
[
getClickOutsideListenerIsActivatedState,
clickOutsideListenerIsActivatedState,
enabled,
getClickOutsideListenerIsMouseDownInsideState,
getClickOutsideListenerMouseDownHappenedState,
clickOutsideListenerIsMouseDownInsideState,
clickOutsideListenerMouseDownHappenedState,
mode,
refs,
excludeClassNames,

9
packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState.ts
View File

@ -1,9 +0,0 @@
import { ClickOutsideListenerCallback } from '@/ui/utilities/pointer-event/types/ClickOutsideListenerCallback';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const clickOutsideListenerCallbacksComponentState = createComponentState<
ClickOutsideListenerCallback[]
>({
key: 'clickOutsideListenerCallbacksComponentState',
defaultValue: [],
});

6
packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState.ts
View File

@ -1,7 +1,9 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ClickOutsideListenerComponentInstanceContext } from '@/ui/utilities/pointer-event/states/contexts/ClickOutsideListenerComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const clickOutsideListenerIsActivatedComponentState =
createComponentState<boolean>({
createComponentStateV2<boolean>({
key: 'clickOutsideListenerIsActivatedComponentState',
defaultValue: true,
componentInstanceContext: ClickOutsideListenerComponentInstanceContext,
});

6
packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState.ts
View File

@ -1,7 +1,9 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ClickOutsideListenerComponentInstanceContext } from '@/ui/utilities/pointer-event/states/contexts/ClickOutsideListenerComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const clickOutsideListenerIsMouseDownInsideComponentState =
createComponentState<boolean>({
createComponentStateV2<boolean>({
key: 'clickOutsideListenerIsMouseDownInsideComponentState',
defaultValue: false,
componentInstanceContext: ClickOutsideListenerComponentInstanceContext,
});

6
packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState.ts
View File

@ -1,7 +1,9 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ClickOutsideListenerComponentInstanceContext } from '@/ui/utilities/pointer-event/states/contexts/ClickOutsideListenerComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const clickOutsideListenerMouseDownHappenedComponentState =
createComponentState<boolean>({
createComponentStateV2<boolean>({
key: 'clickOutsideListenerMouseDownHappenedComponentState',
defaultValue: false,
componentInstanceContext: ClickOutsideListenerComponentInstanceContext,
});

4
packages/twenty-front/src/modules/ui/utilities/pointer-event/states/contexts/ClickOutsideListenerComponentInstanceContext.ts Normal file
View File

@ -0,0 +1,4 @@
import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
export const ClickOutsideListenerComponentInstanceContext =
createComponentInstanceContext();