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

2495 fix cmdk removal and added toggle functionality (#2528)

Browse Source 
* 2495-fix(front): cmdk removed; custom styles added

* 2495-fix(front): search issue fixed

* 2495-feat(front): Menu toggle funct added

* 2495-fix(front): onclick handler added

* 2495-fix(front): Focus with ArrowKeys added; cmdk removed

* Remove cmdk

* Introduce Selectable list

* Improve api

* Improve api

* Complete refactoring

* Fix ui regressions

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Kanav Arora
2023-11-28 23:20:23 +05:30
committed by GitHub
parent 784db18347
commit 74e2464939
27 changed files with 619 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/modules/command-menu/components/CommandMenuItem.tsx
View File

@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom';
import { IconArrowUpRight } from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { MenuItemCommand } from '@/ui/navigation/menu-item/components/MenuItemCommand';
import { useCommandMenu } from '../hooks/useCommandMenu';
@ -9,7 +10,7 @@ import { useCommandMenu } from '../hooks/useCommandMenu';
export type CommandMenuItemProps = {
label: string;
to?: string;
key: string;
id: string;
onClick?: () => void;
Icon?: IconComponent;
firstHotKey?: string;
@ -19,20 +20,23 @@ export type CommandMenuItemProps = {
export const CommandMenuItem = ({
label,
to,
id,
onClick,
Icon,
firstHotKey,
secondHotKey,
}: CommandMenuItemProps) => {
const navigate = useNavigate();
const { closeCommandMenu } = useCommandMenu();
const { toggleCommandMenu } = useCommandMenu();
if (to && !Icon) {
Icon = IconArrowUpRight;
}
const { isSelectedItemId } = useSelectableList({ itemId: id });
const onItemClick = () => {
closeCommandMenu();
toggleCommandMenu();
if (onClick) {
onClick();
@ -51,6 +55,7 @@ export const CommandMenuItem = ({
firstHotKey={firstHotKey}
secondHotKey={secondHotKey}
onClick={onItemClick}
isSelected={isSelectedItemId}
/>
);
};