@ozen-ui/kit
Version:
React component library
36 lines (35 loc) • 1.47 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useFocusList = useFocusList;
var react_1 = require("react");
var getNextIndex_1 = require("../../utils/getNextIndex");
var getPrevIndex_1 = require("../../utils/getPrevIndex");
var isKey_1 = require("../../utils/isKey");
var isKeys_1 = require("../../utils/isKeys");
var useUniqueId_1 = require("../useUniqueId");
function useFocusList() {
var name = (0, useUniqueId_1.useUniqueId)();
var onKeyDown = (0, react_1.useCallback)(function (event) {
if (!(0, isKeys_1.isKeys)(event, ['ArrowUp', 'ArrowDown', 'Home', 'End'])) {
return;
}
event.preventDefault();
var items = document.querySelectorAll("[data-focus-list=\"".concat(name, "\"]"));
if ((0, isKey_1.isKey)(event, 'Home')) {
items.item(0).focus();
return;
}
if ((0, isKey_1.isKey)(event, 'Home')) {
items.item(items.length - 1).focus();
return;
}
var currentEl = event.target;
var currentIndex = Array.from(items).indexOf(currentEl);
var newIndex = (0, isKey_1.isKey)(event, 'ArrowUp')
? (0, getPrevIndex_1.getPrevIndex)(currentIndex, items.length)
: (0, getNextIndex_1.getNextIndex)(currentIndex, items.length);
var newEl = items.item(newIndex);
newEl.focus();
}, []);
return { 'data-focus-list': name, onKeyDown: onKeyDown };
}