Spaces:
Running
Running
File size: 2,817 Bytes
227c43a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
import { useEffect, useCallback } from 'react';
export const useKeyboardNavigation = (options = {}) => {
const {
onEscape,
onEnter,
onArrowUp,
onArrowDown,
onArrowLeft,
onArrowRight,
onTab,
enabled = true,
preventDefault = true,
} = options;
const handleKeyDown = useCallback((event) => {
if (!enabled) return;
const { key, ctrlKey, metaKey, shiftKey } = event;
// Handle different key combinations
switch (key) {
case 'Escape':
if (onEscape) {
if (preventDefault) event.preventDefault();
onEscape(event);
}
break;
case 'Enter':
if (onEnter) {
if (preventDefault) event.preventDefault();
onEnter(event);
}
break;
case 'ArrowUp':
if (onArrowUp) {
if (preventDefault) event.preventDefault();
onArrowUp(event);
}
break;
case 'ArrowDown':
if (onArrowDown) {
if (preventDefault) event.preventDefault();
onArrowDown(event);
}
break;
case 'ArrowLeft':
if (onArrowLeft) {
if (preventDefault) event.preventDefault();
onArrowLeft(event);
}
break;
case 'ArrowRight':
if (onArrowRight) {
if (preventDefault) event.preventDefault();
onArrowRight(event);
}
break;
case 'Tab':
if (onTab) {
if (preventDefault) event.preventDefault();
onTab(event, shiftKey);
}
break;
default:
break;
}
// Handle common shortcuts
if (ctrlKey || metaKey) {
switch (key) {
case 'k':
case 'K':
// Command palette shortcut
if (options.onCommandPalette) {
event.preventDefault();
options.onCommandPalette(event);
}
break;
case '/':
// Search shortcut
if (options.onSearch) {
event.preventDefault();
options.onSearch(event);
}
break;
default:
break;
}
}
}, [
enabled,
preventDefault,
onEscape,
onEnter,
onArrowUp,
onArrowDown,
onArrowLeft,
onArrowRight,
onTab,
options.onCommandPalette,
options.onSearch,
]);
useEffect(() => {
if (enabled) {
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}
}, [enabled, handleKeyDown]);
return { handleKeyDown };
};
export default useKeyboardNavigation;
|