32 lines
971 B
TypeScript
32 lines
971 B
TypeScript
/**
|
|
* Reports the cmdk highlight to the palette.
|
|
*
|
|
* cmdk calls the root `onValueChange` only in controlled mode (when the
|
|
* `value` prop is set). This palette is uncontrolled, so that prop never
|
|
* fires. This watcher subscribes to the cmdk store with `useCommandState`,
|
|
* which works in both modes, and reports each highlight change.
|
|
*/
|
|
|
|
import { useCommandState } from 'cmdk'
|
|
import { useEffect, useRef } from 'react'
|
|
|
|
interface HighlightWatcherProps {
|
|
/** Receives the cmdk value of each newly highlighted row. */
|
|
onValue: (value: string) => void
|
|
}
|
|
|
|
export function HighlightWatcher({ onValue }: HighlightWatcherProps): null {
|
|
const value = useCommandState(state => state.value)
|
|
|
|
// Pin the callback so the effect fires on highlight changes only. The
|
|
// parent passes a fresh closure on every render.
|
|
const onValueRef = useRef(onValue)
|
|
onValueRef.current = onValue
|
|
|
|
useEffect(() => {
|
|
onValueRef.current(value)
|
|
}, [value])
|
|
|
|
return null
|
|
}
|