Sha256: d6d3a90151060211c2b4d88e4c223569c67f32e482ddcfa5fc76aaa292d8d278
Contents?: true
Size: 1.41 KB
Versions: 3
Compression:
Stored size: 1.41 KB
Contents
import React, { useContext } from "react";
import DropdownContext from "../context";
export const useHandleOnKeyDown = () => {
const {
autocomplete,
focusedOptionIndex,
filteredOptions,
setFocusedOptionIndex,
handleOptionClick,
setIsDropDownClosed,
handleBackspace,
selected,
}= useContext(DropdownContext)
return (e: React.KeyboardEvent) => {
if (e.key !== "Tab" && autocomplete && selected && selected.label) {
handleBackspace();
}
switch (e.key) {
case "Backspace":
case "Delete":
if (autocomplete) {
handleBackspace();
}
break;
case "ArrowDown": {
e.preventDefault();
setIsDropDownClosed(false);
const nextIndex = (focusedOptionIndex + 1) % filteredOptions.length;
setFocusedOptionIndex(nextIndex);
break;
}
case "ArrowUp": {
e.preventDefault();
const nextIndexUp =
(focusedOptionIndex - 1 + filteredOptions.length) %
filteredOptions.length;
setFocusedOptionIndex(nextIndexUp);
break;
}
case "Enter":
if (focusedOptionIndex !== -1) {
e.preventDefault();
handleOptionClick(filteredOptions[focusedOptionIndex]);
setFocusedOptionIndex(-1)
} else if (focusedOptionIndex === -1) {
setIsDropDownClosed(false)
}
break;
case "Tab":
setIsDropDownClosed(true);
setFocusedOptionIndex(-1)
break;
}
}
};
Version data entries
3 entries across 3 versions & 1 rubygems