From f827912cb3b3cd71b8962917e40e1268828a2f2f Mon Sep 17 00:00:00 2001 From: Afnan A Date: Fri, 29 Dec 2023 13:54:01 +0500 Subject: [PATCH] Issue#3150 - Esc and click outside is working to close searchbox (#3168) * Issue#3150 - Esc and clickOutside will close Searchbox * Font size, margin + 'esc' only Font size changed to theme specific, have a handsome margin to the top right of search box for text "Esc to cancel". Passing 'esc' only to escape. --- .../command-menu/components/CommandMenu.tsx | 33 +++++++++++++++++-- .../hotkey/hooks/useSetHotkeyScope.ts | 6 ++++ .../utilities/hotkey/types/AppHotkeyScope.ts | 1 + .../hotkey/types/CustomHotkeyScope.ts | 1 + 4 files changed, 38 insertions(+), 3 deletions(-) diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx index be10a6079..38a8b6c19 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx @@ -1,4 +1,4 @@ -import { useMemo, useState } from 'react'; +import { useMemo, useRef, useState } from 'react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; @@ -13,6 +13,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 { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { Avatar } from '@/users/components/Avatar'; @@ -61,6 +62,16 @@ export const StyledInput = styled.input` } `; +const StyledCancelText = styled.span` + color: ${({ theme }) => theme.font.color.tertiary}; + font-size: ${({ theme }) => theme.font.size.sm}; + margin-right: 12px; + margin-top: 6px; + position: absolute; + right: 0; + top: 0; +`; + export const StyledList = styled.div` background: ${({ theme }) => theme.background.secondary}; height: 400px; @@ -86,7 +97,8 @@ export const StyledEmpty = styled.div` `; export const CommandMenu = () => { - const { toggleCommandMenu, onItemClick } = useCommandMenu(); + const { toggleCommandMenu, onItemClick, closeCommandMenu } = useCommandMenu(); + const commandMenuRef = useRef(null); const openActivityRightDrawer = useOpenActivityRightDrawer(); const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState); @@ -109,6 +121,15 @@ export const CommandMenu = () => { [toggleCommandMenu, setSearch], ); + useScopedHotkeys( + 'esc', + () => { + closeCommandMenu(); + }, + AppHotkeyScope.CommandMenuOpen, + [closeCommandMenu], + ); + const { records: people } = useFindManyRecords({ skip: !isCommandMenuOpened, objectNameSingular: 'person', @@ -208,6 +229,11 @@ export const CommandMenu = () => { : true) && cmd.type === CommandType.Create, ); + useListenClickOutside({ + refs: [commandMenuRef], + callback: closeCommandMenu, + }); + const selectableItemIds = matchingCreateCommand .map((cmd) => cmd.id) .concat(matchingNavigateCommand.map((cmd) => cmd.id)) @@ -218,12 +244,13 @@ export const CommandMenu = () => { return ( <> {isCommandMenuOpened && ( - + + Esc to cancel diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts index beaf9715c..6d31897b5 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts @@ -15,6 +15,7 @@ const isCustomScopesEqual = ( ) => { return ( customScopesA?.commandMenu === customScopesB?.commandMenu && + customScopesA?.commandMenuOpen === customScopesB?.commandMenuOpen && customScopesA?.goto === customScopesB?.goto && customScopesA?.keyboardShortcutMenu === customScopesB?.keyboardShortcutMenu ); @@ -54,6 +55,7 @@ export const useSetHotkeyScope = () => scope: hotkeyScopeToSet, customScopes: { commandMenu: customScopes?.commandMenu ?? true, + commandMenuOpen: customScopes?.commandMenuOpen ?? true, goto: customScopes?.goto ?? false, keyboardShortcutMenu: customScopes?.keyboardShortcutMenu ?? false, }, @@ -65,6 +67,10 @@ export const useSetHotkeyScope = () => scopesToSet.push(AppHotkeyScope.CommandMenu); } + if (newHotkeyScope.customScopes?.commandMenuOpen) { + scopesToSet.push(AppHotkeyScope.CommandMenuOpen); + } + if (newHotkeyScope?.customScopes?.goto) { scopesToSet.push(AppHotkeyScope.Goto); } diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/types/AppHotkeyScope.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/types/AppHotkeyScope.ts index 29a2f3255..cd063563e 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/types/AppHotkeyScope.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/types/AppHotkeyScope.ts @@ -2,5 +2,6 @@ export enum AppHotkeyScope { App = 'app', Goto = 'goto', CommandMenu = 'command-menu', + CommandMenuOpen = 'command-menu-open', KeyboardShortcutMenu = 'keyboard-shortcut-menu', } diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/types/CustomHotkeyScope.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/types/CustomHotkeyScope.ts index 0630b0710..f3b143049 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/types/CustomHotkeyScope.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/types/CustomHotkeyScope.ts @@ -1,5 +1,6 @@ export type CustomHotkeyScopes = { goto?: boolean; commandMenu?: boolean; + commandMenuOpen?: boolean; keyboardShortcutMenu?: boolean; };