useKeyboardNavigable.tsx raw

   1  import {
   2    TItemMeta,
   3    TNavigationColumn,
   4    useKeyboardNavigation
   5  } from '@/providers/KeyboardNavigationProvider'
   6  import { useEffect, useRef } from 'react'
   7  
   8  export function useKeyboardNavigable(
   9    column: TNavigationColumn,
  10    index: number,
  11    options?: {
  12      meta?: TItemMeta
  13    }
  14  ) {
  15    const ref = useRef<HTMLDivElement>(null)
  16    const { registerItem, unregisterItem, isItemSelected } = useKeyboardNavigation()
  17  
  18    useEffect(() => {
  19      registerItem(column, index, ref as React.RefObject<HTMLElement>, options?.meta)
  20      return () => unregisterItem(column, index)
  21    }, [column, index, registerItem, unregisterItem, options?.meta])
  22  
  23    const isSelected = isItemSelected(column, index)
  24  
  25    return {
  26      ref,
  27      isSelected,
  28      navProps: {
  29        'data-nav-column': column,
  30        'data-nav-index': index,
  31        'data-nav-selected': isSelected || undefined
  32      }
  33    }
  34  }
  35