Command menu refactoring (#9257)

Refactored the `CommandMenu` component to make it more readable and
easier to refactor.
The file was way too big so I introduced a few hooks and eliminated code
duplication.

Introduced:
- `useMatchCommands` hook to match commands with the search
- `useCommandMenuCommands` which returns all command menu commands
- `useMatchingCommandMenuCommands` to return the commands matched with
the search
- `CommandMenuContainer` to simplify the `DefaultLayout`

- Unmounted the `CommandMenu` when it wasn't opened to improve
performances

I also introduced a new behavior: Automatically select the first item
when opening the command menu:

https://github.com/user-attachments/assets/4b683d49-570e-47c9-8939-99f42ed8691c
This commit is contained in:
Raphaël Bosi
2024-12-30 15:22:49 +01:00
committed by GitHub
parent 0fa59d7718
commit 1091bc657d
24 changed files with 827 additions and 980 deletions

View File

@ -1,23 +0,0 @@
import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { Command } from '@/command-menu/types/Command';
import { computeCommandMenuCommands } from '@/command-menu/utils/computeCommandMenuCommands';
import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
export const commandMenuCommandsComponentSelector = createComponentSelectorV2<
Command[]
>({
key: 'commandMenuCommandsComponentSelector',
componentInstanceContext: ActionMenuComponentInstanceContext,
get:
({ instanceId }) =>
({ get }) => {
const actionMenuEntries = get(
actionMenuEntriesComponentSelector.selectorFamily({
instanceId,
}),
);
return computeCommandMenuCommands(actionMenuEntries);
},
});