twenty/packages/twenty-docs/l/it/developers/contribute/capabilities/frontend-development/hotkeys.mdx

---
title: Tasti di scelta rapida
---

## Introduzione

Quando hai bisogno di ascoltare un tasto di scelta rapida, normalmente useresti l'evento `onKeyDown`.

In `twenty-front`, tuttavia, potresti avere conflitti tra gli stessi tasti di scelta rapida che sono utilizzati in componenti diversi, montati nello stesso momento.

Ad esempio, se hai una pagina che ascolta il tasto Invio, e una modale che ascolta lo stesso tasto, con un componente Select all'interno della modale che ascolta il tasto Invio, potresti avere un conflitto quando tutti sono montati contemporaneamente.

## L'hook `useScopedHotkeys`

Per gestire questo problema, abbiamo un hook personalizzato che rende possibile ascoltare i tasti di scelta rapida senza alcun conflitto.

Lo posizioni in un componente, e ascolterà i tasti solo quando il componente è montato E quando l'**ambito del tasto di scelta rapida** specificato è attivo.

## Come ascoltare i tasti di scelta rapida nella pratica?

Sono coinvolti due passaggi nell'impostazione dell'ascolto dei tasti di scelta rapida:

1. Imposta l'[ambito del tasto di scelta rapida](#what-is-a-hotkey-scope-) che ascolterà i tasti di scelta rapida
2. Usa l'hook `useScopedHotkeys` per ascoltare i tasti di scelta rapida

Configurare gli ambiti dei tasti di scelta rapida è necessario anche in pagine semplici, perché altri elementi dell'interfaccia utente come il menu a sinistra o il menu dei comandi potrebbero anch'essi ascoltare i tasti di scelta rapida.

## Casi d'uso per i tasti di scelta rapida

In generale, avrai due casi d'uso che richiedono tasti di scelta rapida:

1. In una pagina o un componente montato in una pagina
2. In un componente di tipo modale che prende il focus a causa di un'azione dell'utente

Il secondo caso d'uso può verificarsi in modo ricorsivo: ad esempio, un menu a tendina in una modale.

### Ascoltare i tasti di scelta rapida in una pagina

Esempio:

```tsx
const PageListeningEnter = () => {
  const {
    setHotkeyScopeAndMemorizePreviousScope,
    goBackToPreviousHotkeyScope,
  } = usePreviousHotkeyScope();

  // 1. Imposta l'ambito del tasto di scelta rapida in un useEffect
  useEffect(() => {
    setHotkeyScopeAndMemorizePreviousScope(
      ExampleHotkeyScopes.ExampleEnterPage,
    );

    // Torna all'ambito del tasto di scelta rapida precedente quando il componente viene smontato
    return () => {
      goBackToPreviousHotkeyScope();
    };
  }, [goBackToPreviousHotkeyScope, setHotkeyScopeAndMemorizePreviousScope]);

  // 2. Usa l'hook useScopedHotkeys
  useScopedHotkeys(
    Key.Enter,
    () => {
      // Alcuna logica eseguita in questa pagina quando l'utente preme Invio
      // ...
    },
    ExampleHotkeyScopes.ExampleEnterPage,
  );

  return <div>La mia pagina che ascolta per Invio</div>;
};
```

### Ascoltare i tasti di scelta rapida in un componente di tipo modale

Per questo esempio utilizzeremo un componente modale che ascolta il tasto Esc per segnalare al suo genitore di chiuderlo.

Qui l'interazione dell'utente sta cambiando l'ambito.

```tsx
const ExamplePageWithModal = () => {
  const [showModal, setShowModal] = useState(false);

  const {
    setHotkeyScopeAndMemorizePreviousScope,
    goBackToPreviousHotkeyScope,
  } = usePreviousHotkeyScope();

  const handleOpenModalClick = () => {
    // 1. Imposta l'ambito del tasto di scelta rapida quando l'utente apre la modale
    setShowModal(true);
    setHotkeyScopeAndMemorizePreviousScope(
      ExampleHotkeyScopes.ExampleModal,
    );
  };

  const handleModalClose = () => {
    // 1. Torna all'ambito del tasto di scelta rapida precedente quando la modale viene chiusa
    setShowModal(false);
    goBackToPreviousHotkeyScope();
  };

  return <div>
    <h1>La mia pagina con una modale</h1>
    <button onClick={handleOpenModalClick}>Apri modale</button>
    {showModal && <MyModalComponent onClose={handleModalClose} />}
  </div>;
};
```

Poi nel componente modale:

```tsx
const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
  // 2. Usa l'hook useScopedHotkeys per ascoltare per Esc.
  // Nota che esc è un tasto di scelta rapida comune che potrebbe essere utilizzato da molti altri componenti
  // Quindi è importante utilizzare un ambito di tasto di scelta rapida per evitare conflitti
  useScopedHotkeys(
    Key.Escape,
    () => {
      onClose()
    },
    ExampleHotkeyScopes.ExampleModal,
  );

  return <div>Il mio componente modale</div>;
};
```

È importante utilizzare questo schema quando non sei sicuro che l'utilizzo di useEffect con mount/unmount sarà sufficiente per evitare conflitti.

Quei conflitti possono essere difficili da debug, e potrebbe accadere più spesso che no con useEffects.

## Che cos'è un ambito del tasto di scelta rapida?

Un ambito del tasto di scelta rapida è una stringa che rappresenta un contesto in cui i tasti di scelta rapida sono attivi. È generalmente codificato come un enum.

Quando cambi l'ambito del tasto di scelta rapida, i tasti di scelta rapida che ascoltano questo ambito saranno abilitati e i tasti che ascoltano altri ambiti saranno disabilitati.

Puoi impostare solo un ambito alla volta.

Ad esempio, gli ambiti dei tasti di scelta rapida per ogni pagina sono definiti nell'enum `PageHotkeyScope`:

```tsx
export enum PageHotkeyScope {
  Settings = 'settings',
  CreateWorkspace = 'create-workspace',
  SignInUp = 'sign-in-up',
  CreateProfile = 'create-profile',
  PlanRequired = 'plan-required',
  ShowPage = 'show-page',
  PersonShowPage = 'person-show-page',
  CompanyShowPage = 'company-show-page',
  CompaniesPage = 'companies-page',
  PeoplePage = 'people-page',
  OpportunitiesPage = 'opportunities-page',
  ProfilePage = 'profile-page',
  WorkspaceMemberPage = 'workspace-member-page',
  TaskPage = 'task-page',
}
```

Internamente, l'ambito selezionato attualmente viene memorizzato in uno stato Recoil condiviso in tutta l'applicazione:

```tsx
export const currentHotkeyScopeState = createState<HotkeyScope>({
  key: 'currentHotkeyScopeState',
  defaultValue: INITIAL_HOTKEYS_SCOPE,
});
```

Ma questo stato Recoil non dovrebbe mai essere gestito manualmente! Vedremo come usarlo nella sezione successiva.

## Come funziona internamente?

Abbiamo creato un sottile wrapper su [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro) che lo rende più performante ed evita rendering non necessari.

Abbiamo anche creato uno stato Recoil per gestire lo stato dell'ambito del tasto di scelta rapida e renderlo disponibile ovunque nell'applicazione.