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

---
title: Klávesové zkratky
---

## Úvod

Pokud potřebujete poslouchat klávesovou zkratku, obvykle použijete posluchač událostí `onKeyDown`.

Ve `twenty-front` však můžete mít konflikty mezi stejnými klávesovými zkratkami, které jsou použity v různých komponentách, nasazených současně.

Například, pokud máte stránku, která poslouchá klávesu Enter, a modal, který poslouchá klávesu Enter, s komponentou Select uvnitř tohoto modalu, která poslouchá klávesu Enter, můžete mít konflikt, když jsou všechny nasazeny současně.

## Funkce hook `useScopedHotkeys`

K řešení tohoto problému máme vlastní hook, který umožňuje poslouchat klávesové zkratky bez jakéhokoliv konfliktu.

Umístíte ho do komponenty a bude poslouchat klávesové zkratky pouze když je komponenta nasazena A když je aktivní specifikovaný **hotkey scope**.

## Jak v praxi poslouchat klávesové zkratky?

Jsou potřebné dva kroky k nastavení poslouchání klávesových zkratek :

1. Nastavte [hotkey scope](#what-is-a-hotkey-scope-), který bude poslouchat klávesové zkratky
2. Použijte hook `useScopedHotkeys` k poslouchání klávesových zkratek

Nastavení oblastí klávesových zkratek je potřebné i na jednoduchých stránkách, protože jiné UI prvky jako levé menu nebo příkazové menu mohou také poslouchat klávesové zkratky.

## Použití klávesových zkratek

Obecně budete mít dva případy použití, které vyžadují klávesové zkratky :

1. Na stránce nebo v komponentě nasazené na stránce
2. V komponentě typu modal, která přebírá fokus kvůli akci uživatele

Druhý případ použití se může stát rekurzivně: například rozbalovací seznam v modalu.

### Poslouchání klávesových zkratek na stránce

Příklad :

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

  // 1. Nastavte rozsah klávesových zkratek v useEffect
  useEffect(() => {
    setHotkeyScopeAndMemorizePreviousScope(
      ExampleHotkeyScopes.ExampleEnterPage,
    );

    // Vraťte se k předchozímu rozsahu klávesových zkratek, když se komponenta odpojí
    return () => {
      goBackToPreviousHotkeyScope();
    };
  }, [goBackToPreviousHotkeyScope, setHotkeyScopeAndMemorizePreviousScope]);

  // 2. Použijte hook useScopedHotkeys
  useScopedHotkeys(
    Key.Enter,
    () => {
      // Nějaká logika vykonaná na této stránce, když uživatel stiskne Enter
      // ...
    },
    ExampleHotkeyScopes.ExampleEnterPage,
  );

  return <div>Moje stránka, která poslouchá Enter</div>;
};
```

### Poslouchání klávesových zkratek v komponentě typu modal

V tomto příkladu použijeme komponentu typu modal, která poslouchá klávesu Escape, aby svému nadřazenému komponentu řekla, že se má zavřít.

Zde interakce uživatele mění rozsah.

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

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

  const handleOpenModalClick = () => {
    // 1. Nastavte rozsah klávesových zkratek, když uživatel otevře modal
    setShowModal(true);
    setHotkeyScopeAndMemorizePreviousScope(
      ExampleHotkeyScopes.ExampleModal,
    );
  };

  const handleModalClose = () => {
    // 1. Vraťte se k předchozímu rozsahu klávesových zkratek, když se modal zavře
    setShowModal(false);
    goBackToPreviousHotkeyScope();
  };

  return <div>
    <h1>Moje stránka s modálem</h1>
    <button onClick={handleOpenModalClick}>Otevřít modal</button>
    {showModal && <MyModalComponent onClose={handleModalClose} />}
  </div>;
};
```

Pak v komponentě modalu :

```tsx
const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
  // 2. Použijte hook useScopedHotkeys k poslouchání Escape.
  // Všimněte si, že escape je běžná klávesová zkratka, kterou může použít mnoho jiných komponent
  // Je tedy důležité používat rozsah klávesových zkratek, aby se předešlo konfliktům
  useScopedHotkeys(
    Key.Escape,
    () => {
      onClose()
    },
    ExampleHotkeyScopes.ExampleModal,
  );

  return <div>Moje komponenta modalu</div>;
};
```

Je důležité používat tento vzor, když si nejste jisti, že samotné použití useEffect pro nastavení a odebrání bude dostatečné k zabránění konfliktům.

Tyto konflikty mohou být těžké ladit a mohou se vyskytovat častěji než ne u useEffects.

## Co je to hotkey scope?

Rozsah klávesových zkratek je řetězec, který představuje kontext, ve kterém jsou klávesové zkratky aktivní. Obecně je kódován jako enum.

Když změníte rozsah klávesových zkratek, klávesové zkratky, které poslouchají tento rozsah, budou povolené a klávesové zkratky, které poslouchají jiné rozsahy, budou zakázané.

Můžete nastavit pouze jeden rozsah najednou.

Například rozsahy klávesových zkratek pro každou stránku jsou definovány v `PageHotkeyScope` enumu:

```tsx
export enum PageHotkeyScope {
  Nastavení = 'settings',
  VytvořitPracovníProstor = 'create-workspace',
  PřihlášeníRegistrace = 'sign-in-up',
  VytvořitProfil = 'create-profile',
  PožadovánoPlán = 'plan-required',
  ZobrazitStránku = 'show-page',
  OsobníZobrazitStránku = 'person-show-page',
  FiremníZobrazitStránku = 'company-show-page',
  FirmyStránka = 'companies-page',
  LidéStránka = 'people-page',
  PříležitostiStránka = 'opportunities-page',
  ProfilStránka = 'profile-page',
  ČlenPracovníhoProstoruStránka = 'workspace-member-page',
  ÚkolStránka = 'task-page',
}
```

Interně je aktuálně vybraný rozsah uložen v Recoil stavu, který je sdílen napříč aplikací :

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

Ale tento Recoil stav by neměl být nikdy řízen ručně! Ukážeme si, jak jej používat v příští sekci.

## Jak to funguje interně?

Vytvořili jsme tenkou vrstvu nad [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro), která je výkonnější a vyhýbá se zbytečným překreslením.

Také jsme vytvořili Recoil stav, abychom mohli řídit stav rozsahu klávesových zkratek a učinit jej dostupným kdekoli v aplikaci.