Saisie et keymaps
Naviguez dans les déploiements au clavier et ajoutez un panneau d’aide ?.
Dans ce chapitre
- `useInput`
- Keymaps
- La fenêtre d’aide
- Focus
Les frappes clavier parviennent à votre application via un champ de saisie masqué sur la page ; la page doit donc avoir le focus. C’est pourquoi chaque application Text.js vous demande de cliquer d’abord sur la page. Une fois qu’elle a le focus, chaque touche sur laquelle vous appuyez est transmise à React.
useInput
useInput est le hook de bas niveau que vous avez utilisé jusqu’ici. Il reçoit un KeyEvent contenant une key normalisée ("up", "return", "escape"), le caractère saisi dans input, ainsi que ctrl, alt, shift et meta.
useInput((e) => { if (e.ctrl && e.key === "k") openPalette();});Appelez e.stopPropagation() pour empêcher une touche d’atteindre les gestionnaires situés plus bas dans l’arbre.
Keymaps
Dès qu’un écran utilise plus de quelques touches, décrivez-les avec useKeymap. Les associations sont des chaînes : "up, k" désigne l’une ou l’autre touche, "g g" une séquence, "ctrl+k" une combinaison. Les associations dotées d’un libellé apparaissent aussi dans <KeyHelp>, <KeyHints> et la palette de commandes.
Ajouté : import { useState } from "react";Ajouté : import { Box, KeyHelp, Text, useKeymap } from "@textjs/app";Ajouté : import { DEPLOYMENTS } from "../../lib/deployments";Ajouté : Ajouté : export default function DeploymentsPage() {Ajouté : const [index, setIndex] = useState(0);Ajouté : const [open, setOpen] = useState(false);Ajouté : const move = (by: number) => setIndex((i) => Math.max(0, Math.min(DEPLOYMENTS.length - 1, i + by)));Ajouté : Ajouté : useKeymap({Ajouté : "up, k": { label: "Previous deployment", run: () => move(-1) },Ajouté : "down, j": { label: "Next deployment", run: () => move(1) },Ajouté : enter: { label: "Toggle details", run: () => setOpen((o) => !o) },Ajouté : "g g": { label: "First deployment", run: () => setIndex(0) },Ajouté : });Ajouté : Ajouté : return (Ajouté : <Box className="flex-row grow p-1 gap-2">Ajouté : <Box className="flex-col grow">Ajouté : {DEPLOYMENTS.map((d, i) => (Ajouté : <Box key={d.id} className="flex-row h-1 gap-2 px-1" backgroundColor={i === index ? "selection" : undefined}>Ajouté : <Text>{i === index ? "›" : " "}</Text>Ajouté : <Text bold={i === index} wrap="truncate-end">{d.commit}</Text>Ajouté : </Box>Ajouté : ))}Ajouté : </Box>Ajouté : {open && <Details deployment={DEPLOYMENTS[index]} />}Ajouté : <KeyHelp />Ajouté : </Box>Ajouté : );Ajouté : }Pour l’instant, DEPLOYMENTS est un simple tableau dans lib/deployments.ts. Le chapitre 6 le place derrière un gestionnaire de route.
La fenêtre d’aide
<KeyHelp /> écoute la touche ? et ouvre une fenêtre modale qui présente, par groupes, toutes les associations dotées d’un libellé actuellement actives. Appuyez sur ? dans la console, puis sur ? ou q pour la fermer. Les associations à l’intérieur d’une fenêtre modale y retiennent le focus, si bien que la liste en dessous cesse de réagir jusqu’à sa fermeture.
Focus
Les composants comme <Input>, <Select> et <Table> ne reçoivent les touches que lorsqu’ils ont le focus. Tab déplace le focus entre eux ; useFocus() et useFocusManager() vous donnent le contrôle de ce déplacement.
Essayer
Voici Acme Deploys en fin de chapitre, en cours d’exécution dans DevTools. Cliquez sur le pavé, puis utilisez les touches ci-dessous.
Ouvrir la console
L’application s’affiche dans DevTools.Activez d’abord « Afficher les fonctionnalités pour les développeurs web » dans Safari Réglages → Avancés. Puis cliquez ici et appuyez sur ↓.
Ouvrir sur ordinateur
Cette application s’affiche dans la console DevTools, qui nécessite un navigateur sur ordinateur.
Quiz
2 questionsRépondez à toutes les questions pour terminer le chapitre.