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

Demo new onclick behavior

Browse Source
This commit is contained in:
Charles Bochet
2024-11-28 14:17:01 +01:00
parent 812ed6ed69
commit 8aab063da3
2 changed files with 34 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
View File

@ -32,7 +32,7 @@ import { SelectableItem } from '@/ui/layout/selectable-list/components/Selectabl
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -414,9 +414,11 @@ export const CommandMenu = () => {
cmd.scope === CommandScope.Global,
);
useListenClickOutside({
useListenClickOutsideV2({
refs: [commandMenuRef],
callback: closeCommandMenu,
listenerId: 'COMMAND_MENU_LISTENER_ID',
hotkeyScope: AppHotkeyScope.CommandMenuOpen,
});
const isCopilotEnabled = useIsFeatureEnabled('IS_COPILOT_ENABLED');

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

@ -1,6 +1,7 @@
import React, { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { internalHotkeysEnabledScopesState } from '@/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
export enum ClickOutsideMode {
@ -14,6 +15,7 @@ export type ClickOutsideListenerProps<T extends Element> = {
callback: (event: MouseEvent | TouchEvent) => void;
mode?: ClickOutsideMode;
listenerId: string;
hotkeyScope?: string;
enabled?: boolean;
};
@ -23,6 +25,7 @@ export const useListenClickOutsideV2 = <T extends Element>({
callback,
mode = ClickOutsideMode.compareHTMLRef,
listenerId,
hotkeyScope,
enabled = true,
}: ClickOutsideListenerProps<T>) => {
const {
@ -40,7 +43,18 @@ export const useListenClickOutsideV2 = <T extends Element>({
set(getClickOutsideListenerMouseDownHappenedState, true);
const isListening = clickOutsideListenerIsActivated && enabled;
const currentHotkeyScopes = snapshot
.getLoadable(internalHotkeysEnabledScopesState)
.getValue();
const isListeningBasedOnHotkeyScope = hotkeyScope
? currentHotkeyScopes.includes(hotkeyScope)
: true;
const isListening =
clickOutsideListenerIsActivated &&
enabled &&
isListeningBasedOnHotkeyScope;
if (!isListening) {
return;
@ -96,11 +110,12 @@ export const useListenClickOutsideV2 = <T extends Element>({
},
[
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerMouseDownHappenedState,
hotkeyScope,
enabled,
mode,
refs,
getClickOutsideListenerIsMouseDownInsideState,
getClickOutsideListenerMouseDownHappenedState,
],
);
@ -111,7 +126,18 @@ export const useListenClickOutsideV2 = <T extends Element>({
.getLoadable(getClickOutsideListenerIsActivatedState)
.getValue();
const isListening = clickOutsideListenerIsActivated && enabled;
const currentHotkeyScopes = snapshot
.getLoadable(internalHotkeysEnabledScopesState)
.getValue();
const isListeningBasedOnHotkeyScope = hotkeyScope
? currentHotkeyScopes.includes(hotkeyScope)
: true;
const isListening =
clickOutsideListenerIsActivated &&
enabled &&
isListeningBasedOnHotkeyScope;
const isMouseDownInside = snapshot
.getLoadable(getClickOutsideListenerIsMouseDownInsideState)
@ -199,6 +225,7 @@ export const useListenClickOutsideV2 = <T extends Element>({
},
[
getClickOutsideListenerIsActivatedState,
hotkeyScope,
enabled,
getClickOutsideListenerIsMouseDownInsideState,
getClickOutsideListenerMouseDownHappenedState,