@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
143 lines • 4.98 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useRoveFocus = void 0;
const react_1 = require("react");
const keyboardKeys_1 = require("../../constants/keyboardKeys/keyboardKeys");
const useRoveFocus = ({ size, keyDownMove = 1, keyUpMove = -1, keyRightMove = 1, keyLeftMove = -1, keyTabMove = 1, keyPageDownMove = 1, keyPageUpMove = -1, currentFocusSelected = 0, }) => {
const [currentFocus, setCurrentFocus] = (0, react_1.useState)(currentFocusSelected);
const listEl = (0, react_1.useRef)(null);
const moveDown = (e) => {
if (keyDownMove !== null) {
e.preventDefault();
if (typeof keyDownMove === 'function') {
setCurrentFocus(prevValue => keyDownMove(prevValue, e));
}
else {
setCurrentFocus(previous => (previous === size - 1 ? 0 : previous + keyDownMove));
}
}
};
const moveUp = (e) => {
if (keyUpMove !== null) {
e.preventDefault();
if (typeof keyUpMove === 'function') {
setCurrentFocus(prevValue => keyUpMove(prevValue, e));
}
else {
setCurrentFocus(previous => (previous === 0 ? size - 1 : previous + keyUpMove));
}
}
};
const moveLeft = (e) => {
if (keyLeftMove !== null) {
e.preventDefault();
if (typeof keyLeftMove === 'function') {
setCurrentFocus(prevValue => keyLeftMove(prevValue, e));
}
else {
setCurrentFocus(previous => (previous === 0 ? size - 1 : previous + keyLeftMove));
}
}
};
const moveRight = (e) => {
if (keyRightMove !== null) {
e.preventDefault();
if (typeof keyRightMove === 'function') {
setCurrentFocus(prevValue => keyRightMove(prevValue, e));
}
else {
setCurrentFocus(previous => (previous === size - 1 ? 0 : previous + keyRightMove));
}
}
};
const moveTab = (e) => {
if (keyTabMove !== null) {
if (typeof keyTabMove === 'function') {
setCurrentFocus(prevValue => keyTabMove(prevValue, e));
}
else {
setCurrentFocus(previous => {
if (previous === size - 1) {
return previous;
}
e.preventDefault();
if (previous === 0) {
return previous + keyTabMove + 1;
}
return previous + keyTabMove;
});
}
}
};
const movePageDown = (e) => {
if (keyPageDownMove !== null) {
e.preventDefault();
if (typeof keyPageDownMove === 'function') {
setCurrentFocus(prevValue => keyPageDownMove(prevValue, e));
}
else {
setCurrentFocus(previous => previous + keyPageDownMove);
}
}
};
const movePageUp = (e) => {
if (keyPageUpMove !== null) {
e.preventDefault();
if (typeof keyPageUpMove === 'function') {
setCurrentFocus(prevValue => keyPageUpMove(prevValue, e));
}
else {
setCurrentFocus(previous => previous + keyPageUpMove);
}
}
};
const handleKeyDown = (0, react_1.useCallback)((e) => {
switch (e.key) {
case keyboardKeys_1.ARROW_DOWN.code:
moveDown(e);
break;
case keyboardKeys_1.ARROW_UP.code:
moveUp(e);
break;
case keyboardKeys_1.ARROW_LEFT.code:
moveLeft(e);
break;
case keyboardKeys_1.ARROW_RIGHT.code:
moveRight(e);
break;
case keyboardKeys_1.TAB.code:
moveTab(e);
break;
case keyboardKeys_1.PAGE_DOWN.code:
movePageDown(e);
break;
case keyboardKeys_1.PAGE_UP.code:
movePageUp(e);
break;
default:
(() => null)();
}
}, [
size,
setCurrentFocus,
keyDownMove,
keyUpMove,
keyLeftMove,
keyRightMove,
keyTabMove,
keyPageUpMove,
keyPageDownMove,
]);
(0, react_1.useEffect)(() => {
const element = listEl.current;
if (element) {
element.addEventListener('keydown', handleKeyDown, false);
}
return () => {
element?.removeEventListener('keydown', handleKeyDown, false);
};
}, [handleKeyDown, listEl]);
return [currentFocus, setCurrentFocus, listEl];
};
exports.useRoveFocus = useRoveFocus;
//# sourceMappingURL=useRoveFocus.js.map