@ozen-ui/kit
Version:
React component library
36 lines (35 loc) • 1.46 kB
JavaScript
import { useCallback, useEffect, useRef } from 'react';
import { getNextIndex } from '../../utils/getNextIndex';
import { getPrevIndex } from '../../utils/getPrevIndex';
import { isKey } from '../../utils/isKey';
import { isKeys } from '../../utils/isKeys';
export function useMenuFocusList(nodes) {
var savedNodes = useRef(nodes);
useEffect(function () {
savedNodes.current = nodes;
}, [nodes]);
var onKeyDown = useCallback(function (event) {
var _a, _b;
if (!isKeys(event, ['ArrowUp', 'ArrowDown', 'Home', 'End'])) {
return;
}
event.preventDefault();
var items = savedNodes.current;
if (isKey(event, 'Home')) {
(_a = items === null || items === void 0 ? void 0 : items[0]) === null || _a === void 0 ? void 0 : _a.focus();
return;
}
if (isKey(event, 'End')) {
(_b = items === null || items === void 0 ? void 0 : items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.focus();
return;
}
var currentEl = event.target;
var currentIndex = items.indexOf(currentEl);
var newIndex = isKey(event, 'ArrowUp')
? getPrevIndex(currentIndex, items.length)
: getNextIndex(currentIndex, items.length);
var newEl = items[newIndex];
newEl === null || newEl === void 0 ? void 0 : newEl.focus();
}, []);
return { onKeyDown: onKeyDown };
}