Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | import { KeyboardEvent } from "react";
import { store } from "../../store/index.ts";
import {
addSelected,
removeSelected,
searchSelector,
setHighlightedIndex,
setIsOpen,
setValue,
} from "../../store/features/search/searchSlice.ts";
export const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
const dispatch = store.dispatch;
const { value, filteredOptions, selected, highlightedIndex } = searchSelector(
store.getState(),
);
switch (e.key) {
case "Backspace":
Iif (value.trim().length === 0 && selected.length > 0) {
dispatch(removeSelected(selected[selected.length - 1].label));
}
break;
case "ArrowDown":
Iif (filteredOptions.length > 0) {
dispatch(
setHighlightedIndex((highlightedIndex + 1) % filteredOptions.length),
);
}
break;
case "ArrowUp":
Iif (filteredOptions.length > 0) {
dispatch(
setHighlightedIndex(
(highlightedIndex - 1 + filteredOptions.length) %
filteredOptions.length,
),
);
}
break;
case "Enter":
Iif (filteredOptions.length > 0) {
dispatch(addSelected(filteredOptions[highlightedIndex]));
dispatch(setValue(""));
dispatch(setIsOpen(false));
}
break;
default:
break;
}
};
|