Ввод и раскладки клавиш
Перемещайтесь по развёртываниям с клавиатуры и добавьте справку поверх экрана по клавише ?.
В этой главе
- `useInput`
- Раскладки клавиш
- Окно справки
- Фокус
Нажатия клавиш поступают в приложение через скрытое поле ввода на странице, поэтому странице нужен фокус. Поэтому каждое приложение Text.js просит сначала щёлкнуть по странице. Когда она получает фокус, каждое нажатие клавиши передаётся в React.
useInput
useInput — низкоуровневый хук, которым вы пользовались до этого. Он получает KeyEvent с нормализованным значением key ("up", "return", "escape"), введённым символом в input и полями ctrl, alt, shift и meta.
useInput((e) => { if (e.ctrl && e.key === "k") openPalette();});Вызовите e.stopPropagation(), чтобы нажатие клавиши не дошло до обработчиков дальше по дереву.
Раскладки клавиш
Когда на экране используется больше пары клавиш, опишите их через useKeymap. Привязки задаются строками: "up, k" означает любую из двух клавиш, "g g" — последовательность, "ctrl+k" — одновременное нажатие. Привязки с подписями отображаются и в <KeyHelp>, <KeyHints> и палитре команд.
Добавлено: import { useState } from "react";Добавлено: import { Box, KeyHelp, Text, useKeymap } from "@textjs/app";Добавлено: import { DEPLOYMENTS } from "../../lib/deployments";Добавлено: Добавлено: export default function DeploymentsPage() {Добавлено: const [index, setIndex] = useState(0);Добавлено: const [open, setOpen] = useState(false);Добавлено: const move = (by: number) => setIndex((i) => Math.max(0, Math.min(DEPLOYMENTS.length - 1, i + by)));Добавлено: Добавлено: useKeymap({Добавлено: "up, k": { label: "Previous deployment", run: () => move(-1) },Добавлено: "down, j": { label: "Next deployment", run: () => move(1) },Добавлено: enter: { label: "Toggle details", run: () => setOpen((o) => !o) },Добавлено: "g g": { label: "First deployment", run: () => setIndex(0) },Добавлено: });Добавлено: Добавлено: return (Добавлено: <Box className="flex-row grow p-1 gap-2">Добавлено: <Box className="flex-col grow">Добавлено: {DEPLOYMENTS.map((d, i) => (Добавлено: <Box key={d.id} className="flex-row h-1 gap-2 px-1" backgroundColor={i === index ? "selection" : undefined}>Добавлено: <Text>{i === index ? "›" : " "}</Text>Добавлено: <Text bold={i === index} wrap="truncate-end">{d.commit}</Text>Добавлено: </Box>Добавлено: ))}Добавлено: </Box>Добавлено: {open && <Details deployment={DEPLOYMENTS[index]} />}Добавлено: <KeyHelp />Добавлено: </Box>Добавлено: );Добавлено: }Пока DEPLOYMENTS — обычный массив в lib/deployments.ts. В главе 6 доступ к нему переносится в обработчик маршрута.
Окно справки
<KeyHelp /> отслеживает нажатие ? и открывает модальное окно со сгруппированным списком всех активных привязок с подписями. Нажмите ? в консоли, затем ? или q, чтобы закрыть окно. Привязки внутри модального окна удерживают фокус, поэтому список под ним перестаёт реагировать до закрытия окна.
Фокус
Компоненты вроде <Input>, <Select> и <Table> принимают нажатия клавиш, только когда находятся в фокусе. Tab перемещает фокус между ними; useFocus() и useFocusManager() позволяют управлять им самостоятельно.
Попробовать
Это Acme Deploys в конце главы, работающее в DevTools. Нажмите на панель, затем используйте клавиши ниже.
Открыть консоль
Приложение рендерится в DevTools.Сначала включите «Показывать функции для веб-разработчиков» в Safari: «Настройки» → «Дополнения». Затем щёлкните здесь и нажмите ↓.
Открыть на компьютере
Это приложение рендерится в консоли DevTools, для которой нужен браузер на компьютере.
Тест
2 вопросаОтветьте на все вопросы, чтобы завершить главу.