Input & keymap
Navigasikan deployment dengan keyboard dan tambahkan overlay bantuan ?.
Dalam bab ini
- `useInput`
- Keymap
- Overlay bantuan
- Fokus
Penekanan tombol mencapai aplikasi Anda melalui input tersembunyi di halaman, jadi halaman memerlukan fokus. Itulah sebabnya setiap aplikasi Text.js meminta Anda mengeklik halaman terlebih dahulu. Setelah halaman mendapat fokus, setiap tombol yang Anda tekan diteruskan ke React.
useInput
useInput adalah hook tingkat rendah yang telah Anda gunakan sejauh ini. Hook ini menerima KeyEvent dengan key yang dinormalisasi ("up", "return", "escape"), karakter yang diketik dalam input, serta ctrl, alt, shift dan meta.
useInput((e) => { if (e.ctrl && e.key === "k") openPalette();});Panggil e.stopPropagation() agar tombol tidak mencapai handler lebih jauh di bawah dalam pohon komponen.
Keymap
Setelah sebuah layar menggunakan lebih dari beberapa tombol, deskripsikan tombol tersebut dengan useKeymap. Binding berupa string: "up, k" berarti salah satu tombol, "g g" berarti urutan, "ctrl+k" berarti kombinasi tombol. Binding berlabel juga muncul di <KeyHelp>, <KeyHints> dan palet perintah.
Ditambahkan: import { useState } from "react";Ditambahkan: import { Box, KeyHelp, Text, useKeymap } from "@textjs/app";Ditambahkan: import { DEPLOYMENTS } from "../../lib/deployments";Ditambahkan: Ditambahkan: export default function DeploymentsPage() {Ditambahkan: const [index, setIndex] = useState(0);Ditambahkan: const [open, setOpen] = useState(false);Ditambahkan: const move = (by: number) => setIndex((i) => Math.max(0, Math.min(DEPLOYMENTS.length - 1, i + by)));Ditambahkan: Ditambahkan: useKeymap({Ditambahkan: "up, k": { label: "Previous deployment", run: () => move(-1) },Ditambahkan: "down, j": { label: "Next deployment", run: () => move(1) },Ditambahkan: enter: { label: "Toggle details", run: () => setOpen((o) => !o) },Ditambahkan: "g g": { label: "First deployment", run: () => setIndex(0) },Ditambahkan: });Ditambahkan: Ditambahkan: return (Ditambahkan: <Box className="flex-row grow p-1 gap-2">Ditambahkan: <Box className="flex-col grow">Ditambahkan: {DEPLOYMENTS.map((d, i) => (Ditambahkan: <Box key={d.id} className="flex-row h-1 gap-2 px-1" backgroundColor={i === index ? "selection" : undefined}>Ditambahkan: <Text>{i === index ? "›" : " "}</Text>Ditambahkan: <Text bold={i === index} wrap="truncate-end">{d.commit}</Text>Ditambahkan: </Box>Ditambahkan: ))}Ditambahkan: </Box>Ditambahkan: {open && <Details deployment={DEPLOYMENTS[index]} />}Ditambahkan: <KeyHelp />Ditambahkan: </Box>Ditambahkan: );Ditambahkan: }Untuk saat ini, DEPLOYMENTS berupa array biasa di lib/deployments.ts. Bab 6 memindahkannya ke balik route handler.
Overlay bantuan
<KeyHelp /> mendengarkan ? dan membuka modal yang menampilkan semua binding berlabel yang sedang aktif, dalam kelompok. Tekan ? di konsol, lalu ? atau q untuk menutupnya. Binding di dalam modal mengunci fokus, sehingga daftar di bawahnya berhenti merespons hingga modal ditutup.
Fokus
Komponen seperti <Input>, <Select> dan <Table> hanya menerima tombol saat memiliki fokus. Tab memindahkan fokus di antaranya; useFocus() dan useFocusManager() memungkinkan Anda memindahkannya sendiri.
Coba
Ini Acme Deploys di akhir bab, berjalan di DevTools. Klik pad, lalu gunakan tombol di bawah.
Buka konsol
Aplikasi ini di-render di DevTools.Aktifkan dahulu “Tampilkan fitur untuk pengembang web” di Setelan Safari → Lanjutan. Lalu klik di sini dan tekan ↓.
Buka di desktop
Aplikasi ini di-render di konsol DevTools, yang memerlukan browser desktop.
Kuis
2 pertanyaanJawab semua pertanyaan untuk menyelesaikan bab.