twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-09-11 23:37:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix command menu keyboard navigation (#2908)

Browse Source 
* Fix CommandMenu

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
gitstart-twenty 2023-12-13 23:39:03 +08:00 committed by GitHub
parent bded46444d
commit e08790c344
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { useState } from 'react';
import { useMemo, useState } from 'react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
@ -85,7 +85,7 @@ export const StyledEmpty = styled.div`
`;
export const CommandMenu = () => {
const { toggleCommandMenu } = useCommandMenu();
const { toggleCommandMenu, onItemClick } = useCommandMenu();
const openActivityRightDrawer = useOpenActivityRightDrawer();
const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
@ -141,6 +141,45 @@ export const CommandMenu = () => {
limit: 3,
});
const peopleCommands = useMemo(
() =>
people.map(({ id, name: { firstName, lastName } }) => ({
id,
label: `${firstName} ${lastName}`,
to: `object/person/${id}`,
})),
[people],
);
const companyCommands = useMemo(
() =>
companies.map(({ id, name }) => ({
id,
label: name ?? '',
to: `object/company/${id}`,
})),
[companies],
);
const activityCommands = useMemo(
() =>
activities.map(({ id, title }) => ({
id,
label: title ?? '',
to: '',
onCommandClick: () => openActivityRightDrawer(id),
})),
[activities, openActivityRightDrawer],
);
const otherCommands = useMemo(() => {
return [
...peopleCommands,
...companyCommands,
...activityCommands,
] as Command[];
}, [peopleCommands, companyCommands, activityCommands]);
const checkInShortcuts = (cmd: Command, search: string) => {
return (cmd.firstHotKey + (cmd.secondHotKey ?? ''))
.toLowerCase()
@ -191,7 +230,17 @@ export const CommandMenu = () => {
selectableListId="command-menu-list"
selectableItemIds={[selectableItemIds]}
hotkeyScope={AppHotkeyScope.CommandMenu}
onEnter={(_itemId) => {}}
onEnter={(itemId) => {
const command = [
...commandMenuCommands,
...otherCommands,
].find((cmd) => cmd.id === itemId);
if (command) {
const { to, onCommandClick } = command;
onItemClick(onCommandClick, to);
}
}}
>
{!matchingCreateCommand.length &&
!matchingNavigateCommand.length &&