@kubit-ui-web/react-components/dist/esm/hooks/useRoveFocus/useRoveFocus.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { useCallback, useEffect, useRef, useState } from 'react';
import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, PAGE_DOWN, PAGE_UP, TAB, } from '../../constants/keyboardKeys/keyboardKeys';
export const useRoveFocus = ({ size, keyDownMove = 1, keyUpMove = -1, keyRightMove = 1, keyLeftMove = -1, keyTabMove = 1, keyPageDownMove = 1, keyPageUpMove = -1, currentFocusSelected = 0, }) => {
    const [currentFocus, setCurrentFocus] = useState(currentFocusSelected);
    const listEl = 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 = useCallback((e) => {
        switch (e.key) {
            case ARROW_DOWN.code:
                moveDown(e);
                break;
            case ARROW_UP.code:
                moveUp(e);
                break;
            case ARROW_LEFT.code:
                moveLeft(e);
                break;
            case ARROW_RIGHT.code:
                moveRight(e);
                break;
            case TAB.code:
                moveTab(e);
                break;
            case PAGE_DOWN.code:
                movePageDown(e);
                break;
            case PAGE_UP.code:
                movePageUp(e);
                break;
            default:
                (() => null)();
        }
    }, [
        size,
        setCurrentFocus,
        keyDownMove,
        keyUpMove,
        keyLeftMove,
        keyRightMove,
        keyTabMove,
        keyPageUpMove,
        keyPageDownMove,
    ]);
    useEffect(() => {
        const element = listEl.current;
        if (element) {
            element.addEventListener('keydown', handleKeyDown, false);
        }
        return () => {
            element?.removeEventListener('keydown', handleKeyDown, false);
        };
    }, [handleKeyDown, listEl]);
    return [currentFocus, setCurrentFocus, listEl];
};
//# sourceMappingURL=useRoveFocus.js.map