useHistoryKeys.ts46 lines · main

1	'use client'
2
3	import { useCallback, useEffect, useState } from 'react'
4
5	import { useSetQuery } from './queryHooks'
6
7	interface UseHistoryKeysOptions {
8	stack: string[]
9	enable?: boolean
10	}
11
12	/**
13	* Enables shell-style message history when hitting up/down on the keyboard
14	*/
15	function useHistoryKeys({ stack, enable = true }: UseHistoryKeysOptions) {
16	const [idx, setIdx] = useState(0)
17	const setQuery = useSetQuery()
18
19	const navigateIdx = useCallback((newIdx: number) => {
20	if (!enable) return
21
22	setQuery(stack[newIdx] ?? '')
23	setIdx(newIdx)
24	}, [])
25
26	useEffect(() => {
27	function onKeyDown(e: KeyboardEvent) {
28	switch (e.key) {
29	case 'ArrowUp':
30	return navigateIdx(Math.max(idx - 1, 0))
31	case 'ArrowDown':
32	return navigateIdx(Math.min(idx + 1, stack.length - 1))
33	default:
34	return
35	}
36	}
37
38	window.addEventListener('keydown', onKeyDown)
39
40	return () => {
41	window.removeEventListener('keydown', onKeyDown)
42	}
43	}, [navigateIdx, stack])
44	}
45
46	export { useHistoryKeys }