Entrada y mapas de teclas
Navega por los despliegues con el teclado y añade una capa de ayuda con ?.
En este capítulo
- `useInput`
- Mapas de teclas
- La capa de ayuda
- Foco
Las pulsaciones de teclas llegan a tu app a través de un campo de entrada oculto en la página, por lo que la página necesita tener el foco. Por eso, todas las apps de Text.js te piden que primero hagas clic en la página. Una vez que tiene el foco, cada tecla que pulsas se envía a React.
useInput
useInput es el hook de bajo nivel que has usado hasta ahora. Recibe un KeyEvent con una key normalizada ("up", "return", "escape"), el carácter escrito en input, y ctrl, alt, shift y meta.
useInput((e) => { if (e.ctrl && e.key === "k") openPalette();});Llama a e.stopPropagation() para impedir que una tecla llegue a los manejadores situados más abajo en el árbol.
Mapas de teclas
Cuando una pantalla tenga más de un par de teclas, descríbelas con useKeymap. Las asignaciones son cadenas: "up, k" es cualquiera de las dos teclas, "g g" es una secuencia y "ctrl+k" una combinación simultánea. Las asignaciones con etiqueta también aparecen en <KeyHelp>, <KeyHints> y la paleta de comandos.
Añadido: import { useState } from "react";Añadido: import { Box, KeyHelp, Text, useKeymap } from "@textjs/app";Añadido: import { DEPLOYMENTS } from "../../lib/deployments";Añadido: Añadido: export default function DeploymentsPage() {Añadido: const [index, setIndex] = useState(0);Añadido: const [open, setOpen] = useState(false);Añadido: const move = (by: number) => setIndex((i) => Math.max(0, Math.min(DEPLOYMENTS.length - 1, i + by)));Añadido: Añadido: useKeymap({Añadido: "up, k": { label: "Previous deployment", run: () => move(-1) },Añadido: "down, j": { label: "Next deployment", run: () => move(1) },Añadido: enter: { label: "Toggle details", run: () => setOpen((o) => !o) },Añadido: "g g": { label: "First deployment", run: () => setIndex(0) },Añadido: });Añadido: Añadido: return (Añadido: <Box className="flex-row grow p-1 gap-2">Añadido: <Box className="flex-col grow">Añadido: {DEPLOYMENTS.map((d, i) => (Añadido: <Box key={d.id} className="flex-row h-1 gap-2 px-1" backgroundColor={i === index ? "selection" : undefined}>Añadido: <Text>{i === index ? "›" : " "}</Text>Añadido: <Text bold={i === index} wrap="truncate-end">{d.commit}</Text>Añadido: </Box>Añadido: ))}Añadido: </Box>Añadido: {open && <Details deployment={DEPLOYMENTS[index]} />}Añadido: <KeyHelp />Añadido: </Box>Añadido: );Añadido: }Por ahora, DEPLOYMENTS es un array normal en lib/deployments.ts. En el capítulo 6, pasa a estar detrás de un manejador de ruta.
La capa de ayuda
<KeyHelp /> escucha ? y abre un modal que muestra, agrupadas, todas las asignaciones con etiqueta que están activas en ese momento. Pulsa ? en la consola y luego ? o q para cerrarlo. Las asignaciones dentro de un modal retienen el foco, por lo que la lista que queda debajo deja de responder hasta que se cierra.
Foco
Los componentes como <Input>, <Select> y <Table> solo reciben pulsaciones de teclas mientras tienen el foco. Tab mueve el foco entre ellos; useFocus() y useFocusManager() te permiten hacerlo por tu cuenta.
Probar
Esta es Acme Deploys al final del capítulo, ejecutándose en DevTools. Haz clic en el panel y usa las teclas de abajo.
Abrir la consola
La app se renderiza en DevTools.Primero activa «Mostrar funciones para desarrolladores web» en Configuración de Safari → Avanzado. Luego haz clic aquí y pulsa ↓.
Abrir en un equipo de escritorio
Esta app se renderiza en la consola de DevTools, que requiere un navegador de escritorio.
Cuestionario
2 preguntasResponde todas las preguntas para completar el capítulo.