@sinchsmb/ui-kit/src/components/Table/hooks/useTableKeyboardNavigation.ts

UI kit for SinchSMB frontend

import { KeyboardEventHandler, useCallback } from 'react';

import { useTableFastActiveItemContext } from '../contexts/TableFastActiveItemContex';
import { useTablePropsContext } from '../contexts/TablePropsContext';

/** Hook that controls table keyboard navigation. */
export function useTableKeyboardNavigation(): KeyboardEventHandler {
  const { loading } = useTablePropsContext();
  const { changeActiveItem } = useTableFastActiveItemContext();

  return useCallback(
    (event) => {
      if (loading) {
        return;
      }

      switch (event.key) {
        case 'ArrowDown':
          changeActiveItem(1, 0);
          break;
        case 'ArrowUp':
          changeActiveItem(-1, 0);
          break;
        case 'ArrowRight':
          changeActiveItem(0, 1);
          break;
        case 'ArrowLeft':
          changeActiveItem(0, -1);
          break;
        /* istanbul ignore next */
        default:
        // no-default
      }
    },
    [changeActiveItem, loading],
  );
}