Input e mappe dei tasti
Naviga tra i deploy con la tastiera e aggiungi un pannello di aiuto con ?.
In questo capitolo
- `useInput`
- Mappe dei tasti
- La guida in sovrimpressione
- Focus
I tasti premuti raggiungono la tua app tramite un input nascosto nella pagina, quindi la pagina deve avere il focus. Per questo ogni app Text.js ti chiede prima di fare clic sulla pagina. Una volta che la pagina ha il focus, ogni tasto che premi viene trasmesso a React.
useInput
useInput è l’hook di basso livello che hai usato finora. Riceve un KeyEvent con un key normalizzato ("up", "return", "escape"), il carattere digitato in input e ctrl, alt, shift e meta.
useInput((e) => { if (e.ctrl && e.key === "k") openPalette();});Chiama e.stopPropagation() per impedire che un tasto raggiunga gli handler più in basso nell’albero.
Mappe dei tasti
Quando una schermata ha più di un paio di tasti, descrivili con useKeymap. Le associazioni sono stringhe: "up, k" indica uno dei due tasti, "g g" è una sequenza, "ctrl+k" una combinazione simultanea. Le associazioni con etichetta compaiono anche in <KeyHelp>, <KeyHints> e nella palette dei comandi.
Aggiunto: import { useState } from "react";Aggiunto: import { Box, KeyHelp, Text, useKeymap } from "@textjs/app";Aggiunto: import { DEPLOYMENTS } from "../../lib/deployments";Aggiunto: Aggiunto: export default function DeploymentsPage() {Aggiunto: const [index, setIndex] = useState(0);Aggiunto: const [open, setOpen] = useState(false);Aggiunto: const move = (by: number) => setIndex((i) => Math.max(0, Math.min(DEPLOYMENTS.length - 1, i + by)));Aggiunto: Aggiunto: useKeymap({Aggiunto: "up, k": { label: "Previous deployment", run: () => move(-1) },Aggiunto: "down, j": { label: "Next deployment", run: () => move(1) },Aggiunto: enter: { label: "Toggle details", run: () => setOpen((o) => !o) },Aggiunto: "g g": { label: "First deployment", run: () => setIndex(0) },Aggiunto: });Aggiunto: Aggiunto: return (Aggiunto: <Box className="flex-row grow p-1 gap-2">Aggiunto: <Box className="flex-col grow">Aggiunto: {DEPLOYMENTS.map((d, i) => (Aggiunto: <Box key={d.id} className="flex-row h-1 gap-2 px-1" backgroundColor={i === index ? "selection" : undefined}>Aggiunto: <Text>{i === index ? "›" : " "}</Text>Aggiunto: <Text bold={i === index} wrap="truncate-end">{d.commit}</Text>Aggiunto: </Box>Aggiunto: ))}Aggiunto: </Box>Aggiunto: {open && <Details deployment={DEPLOYMENTS[index]} />}Aggiunto: <KeyHelp />Aggiunto: </Box>Aggiunto: );Aggiunto: }Per ora DEPLOYMENTS è un normale array in lib/deployments.ts. Il capitolo 6 lo sposta dietro un route handler.
La guida in sovrimpressione
<KeyHelp /> resta in ascolto di ? e apre una finestra modale con l’elenco raggruppato di tutte le associazioni con etichetta attualmente attive. Premi ? nella console, poi ? o q per chiuderla. Le associazioni all’interno di una finestra modale trattengono il focus, quindi l’elenco sottostante smette di reagire finché la finestra non si chiude.
Focus
I componenti come <Input>, <Select> e <Table> ricevono i tasti solo quando hanno il focus. Tab sposta il focus tra questi componenti; useFocus() e useFocusManager() ti permettono di gestirlo direttamente.
Provala
Questa è Acme Deploys alla fine del capitolo, in esecuzione in DevTools. Fai clic sul pannello del focus, poi usa i tasti qui sotto.
Apri la console
L’app viene renderizzata in DevTools.Prima attiva «Mostra funzionalità per sviluppatori web» in Safari Impostazioni → Avanzate. Poi fai clic qui e premi ↓.
Aprire su desktop
Questa app viene renderizzata nella console DevTools, che richiede un browser desktop.
Quiz
2 domandeRispondi a tutte le domande per completare il capitolo.