twenty/packages/twenty-docs/l/el/developers/frontend-development/hotkeys.mdx

---
title: Συντομεύσεις πληκτρολογίου
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

## Εισαγωγή

Όταν χρειάζεται να ακούσετε μια συντόμευση πληκτρολογίου, κανονικά θα χρησιμοποιούσατε τον ακροατή συμβάντων `onKeyDown`.

Στο `twenty-front`, ωστόσο, μπορεί να υπάρχουν συγκρούσεις μεταξύ των ίδιων συντομεύσεων που χρησιμοποιούνται σε διαφορετικά στοιχεία, τοποθετημένα ταυτόχρονα.

Για παράδειγμα, αν έχετε μια σελίδα που ακούει το πλήκτρο Enter και ένα παράθυρο διαλόγου που ακούει το πλήκτρο Enter, με ένα στοιχείο Select μέσα σε αυτό το παράθυρο διαλόγου που ακούει το πλήκτρο Enter, μπορεί να έχετε μια σύγκρουση όταν όλα τα στοιχεία είναι τοποθετημένα ταυτόχρονα.

## Η συνάρτηση `useScopedHotkeys`

Για να χειριστούμε αυτό το πρόβλημα, έχουμε μια προσαρμοσμένη συνάρτηση που επιτρέπει την ακρόαση συντομεύσεων χωρίς καμία σύγκρουση.

Το τοποθετείτε σε ένα στοιχείο και θα ακούει τις συντομεύσεις πληκτρολογίου μόνο όταν το στοιχείο είναι τοποθετημένο ΚΑΙ όταν είναι ενεργό το συγκεκριμένο **πεδίο εφαρμογής συντομεύσεων**.

## Πώς να ακούτε τις συντομεύσεις πληκτρολογίου στην πράξη;

Υπάρχουν δύο βήματα στην ρύθμιση της ακρόασης συντομεύσεων πληκτρολογίου :

1. Ορίστε το [πεδίο εφαρμογής συντομεύσεων](#what-is-a-hotkey-scope-) που θα ακούει τις συντομεύσεις πληκτρολογίου
2. Χρησιμοποιήστε τη συνάρτηση `useScopedHotkeys` για να ακούσετε τις συντομεύσεις πληκτρολογίου

Η ρύθμιση των πεδίων εφαρμογής συντομεύσεων είναι απαραίτητη ακόμα και σε απλές σελίδες, επειδή άλλα στοιχεία διεπαφής χρήστη, όπως το αριστερό μενού ή το μενού εντολών, μπορεί επίσης να ακούσουν τις συντομεύσεις πληκτρολογίου.

## Περιστάσεις χρήσης των συντομεύσεων πληκτρολογίου

Συνολικά, θα έχετε δύο περιστάσεις που απαιτούν συντομεύσεις πληκτρολογίου :

1. Σε μια σελίδα ή ένα στοιχείο τοποθετημένο σε μια σελίδα
2. Σε ένα στοιχείο τύπου διαλόγου που αποκτά την εστίαση λόγω κάποιας ενέργειας χρήστη

Η δεύτερη περίπτωση μπορεί να συμβεί αναδρομικά : ένα αναδυόμενο μενού σε ένα παράθυρο διαλόγου, για παράδειγμα.

### Ακρόαση συντομεύσεων πληκτρολογίου σε μια σελίδα

Παράδειγμα :

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

  // 1. Set the hotkey scope in a useEffect
  useEffect(() => {
    setHotkeyScopeAndMemorizePreviousScope(
      ExampleHotkeyScopes.ExampleEnterPage,
    );

    // Revert to the previous hotkey scope when the component is unmounted
    return () => {
      goBackToPreviousHotkeyScope();
    };
  }, [goBackToPreviousHotkeyScope, setHotkeyScopeAndMemorizePreviousScope]);

  // 2. Use the useScopedHotkeys hook
  useScopedHotkeys(
    Key.Enter,
    () => {
      // Some logic executed on this page when the user presses Enter
      // ...
    },
    ExampleHotkeyScopes.ExampleEnterPage,
  );

  return <div>My page that listens for Enter</div>;
};
```

### Ακρόαση συντομεύσεων πληκτρολογίου σε ένα στοιχείο τύπου διαλόγου

Για αυτό το παράδειγμα θα χρησιμοποιήσουμε ένα στοιχείο διαλόγου που ακούει το πλήκτρο Escape για να πει στον γονέα του να το κλείσει.

Εδώ η αλληλεπίδραση του χρήστη αλλάζει το πεδίο.

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

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

  const handleOpenModalClick = () => {
    // 1. Set the hotkey scope when user opens the modal
    setShowModal(true);
    setHotkeyScopeAndMemorizePreviousScope(
      ExampleHotkeyScopes.ExampleModal,
    );
  };

  const handleModalClose = () => {
    // 1. Revert to the previous hotkey scope when the modal is closed
    setShowModal(false);
    goBackToPreviousHotkeyScope();
  };

  return <div>
    <h1>My page with a modal</h1>
    <button onClick={handleOpenModalClick}>Open modal</button>
    {showModal && <MyModalComponent onClose={handleModalClose} />}
  </div>;
};
```

Στη συνέχεια στο στοιχείο διαλόγου :

```tsx
const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
  // 2. Use the useScopedHotkeys hook to listen for Escape.
  // Note that escape is a common hotkey that could be used by many other components
  // So it's important to use a hotkey scope to avoid conflicts
  useScopedHotkeys(
    Key.Escape,
    () => {
      onClose()
    },
    ExampleHotkeyScopes.ExampleModal,
  );

  return <div>My modal component</div>;
};
```

Είναι σημαντικό να χρησιμοποιείτε αυτό το μοτίβο όταν δεν είστε σίγουροι αν η χρήση ενός απλού useEffect κατά την τοποθέτηση/απομάκρυνση θα είναι αρκετή για να αποφευχθούν συγκρούσεις.

Αυτές οι συγκρούσεις μπορεί να είναι δύσκολο να εντοπιστούν, και μπορεί να συμβαίνουν πιο συχνά από ό,τι θα φανταζόταν με τα useEffects.

## Τι είναι ένα πεδίο εφαρμογής συντόμευσης πληκτρολογίου;

Ένα πεδίο εφαρμογής συντόμευσης πληκτρολογίου είναι μια αλφαριθμητική συμβολοσειρά που αντιπροσωπεύει ένα πλαίσιο στο οποίο είναι ενεργές οι συντομεύσεις πληκτρολογίου. Συνήθως κωδικοποιείται ως ένα enum.

Όταν αλλάζετε το πεδίο εφαρμογής συντομεύσεων πληκτρολογίου, οι συντομεύσεις που ακούνε αυτό το πεδίο θα ενεργοποιούνται και οι συντομεύσεις που ακούνε άλλα πεδία θα απενεργοποιούνται.

Μπορείτε να ορίσετε μόνο ένα πεδίο τη φορά.

Ως παράδειγμα, τα πεδία εφαρμογής συντομεύσεων πληκτρολογίου για κάθε σελίδα ορίζονται στο `PageHotkeyScope` enum:

```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',
}
```

Εσωτερικά, το επιλεγμένο πεδίο αποθηκεύεται στην κατάσταση Recoil που μοιράζεται σε όλη την εφαρμογή :

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

Αλλά αυτή η κατάσταση Recoil δεν πρέπει ποτέ να χειρίζεται χειροκίνητα ! Θα δούμε πώς να το χρησιμοποιήσετε στην επόμενη ενότητα.

## Πώς λειτουργεί εσωτερικά;

Κάναμε ένα λεπτό περιτύλιγμα πάνω από το [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro) που το καθιστά πιο αποδοτικό και αποφεύγουμε περιττές ανανεώσεις.

Δημιουργήσαμε επίσης μια κατάσταση Recoil για τη διαχείριση της κατάστασης του πεδίου εφαρμογής των συντομεύσεων πληκτρολογίου και να το καταστήσουμε διαθέσιμο παντού στην εφαρμογή.