55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { RefObject } from 'react';
|
|
import { useState, useCallback, useEffect } from '../lib/teact/teact';
|
|
|
|
export default (
|
|
elementRef: RefObject<HTMLElement>,
|
|
isOpen: boolean,
|
|
onSelectWithEnter?: () => void,
|
|
) => {
|
|
const [focusedIndex, setFocusedIndex] = useState(-1);
|
|
|
|
useEffect(() => {
|
|
setFocusedIndex(-1);
|
|
}, [isOpen]);
|
|
|
|
const handleKeyDown = useCallback((e: React.KeyboardEvent<any>) => {
|
|
const element = elementRef.current;
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
if (e.keyCode === 13 && onSelectWithEnter) {
|
|
onSelectWithEnter();
|
|
return;
|
|
}
|
|
|
|
if (e.keyCode !== 38 && e.keyCode !== 40) {
|
|
return;
|
|
}
|
|
|
|
const focusedElement = document.activeElement;
|
|
const elementChildren = Array.from(element.children);
|
|
|
|
let newIndex = (focusedElement && elementChildren.indexOf(focusedElement)) || focusedIndex;
|
|
|
|
if (e.keyCode === 38 && newIndex > 0) {
|
|
newIndex--;
|
|
} else if (e.keyCode === 40 && newIndex < elementChildren.length - 1) {
|
|
newIndex++;
|
|
} else if (elementChildren.length === 1) {
|
|
newIndex = 0;
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
const item = elementChildren[newIndex] as HTMLElement;
|
|
if (item) {
|
|
setFocusedIndex(newIndex);
|
|
item.focus();
|
|
}
|
|
}, [focusedIndex, elementRef, onSelectWithEnter]);
|
|
|
|
return handleKeyDown;
|
|
};
|