@momentum-ui/react-collaboration/dist/cjs/components/SpatialNavigationProvider/SpatialNavigationProvider.js

Cisco Momentum UI Framework for React Collaboration Applications

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
/* eslint-disable react/prop-types */
import React, { useEffect, useMemo } from 'react';
import { SpatialNavigationContext } from './SpatialNavigationProvider.utils';
import { DEFAULTS } from './SpatialNavigationProvider.constants';
import { setupHideOnPlugin } from '../Popover/tippy-plugins/hideOnEscPlugin';
import { SpatialNavigation } from './SpatialNavigation';
/**
 * Spatial Navigation Provider
 */
var SpatialNavigationProvider = function (_a) {
    var children = _a.children, onGoBack = _a.onGoBack, _b = _a.navigationKeyMapping, navigationKeyMapping = _b === void 0 ? DEFAULTS.SPATIAL_NAVIGATION_KEY_MAPPING : _b;
    var spatial = useMemo(function () { return new SpatialNavigation(onGoBack); }, [onGoBack]);
    var value = useMemo(function () { return (__assign(__assign({}, navigationKeyMapping), { directionKeys: [
            navigationKeyMapping.up,
            navigationKeyMapping.down,
            navigationKeyMapping.left,
            navigationKeyMapping.right,
        ] })); }, [navigationKeyMapping]);
    // Initialize and dispose the spatial navigation
    useEffect(function () {
        spatial.initActiveElement();
        return function () { return spatial.dispose(); };
    }, [spatial]);
    /**
     * Setup other components
     */
    useEffect(function () {
        setupHideOnPlugin({ hideKeys: [navigationKeyMapping.back], stopEventPropagation: true });
    });
    useEffect(function () {
        var validKeys = [
            navigationKeyMapping.up,
            navigationKeyMapping.down,
            navigationKeyMapping.left,
            navigationKeyMapping.right,
            navigationKeyMapping.back,
        ];
        var handleKeyDown = function (evt) {
            if (evt.shiftKey || evt.ctrlKey || evt.altKey || evt.metaKey || !validKeys.includes(evt.key))
                return;
            if (evt.target instanceof HTMLElement) {
                spatial.setActiveElement(evt.target);
            }
            switch (evt.key) {
                case navigationKeyMapping.up:
                    return spatial.focusNext('up');
                case navigationKeyMapping.down:
                    return spatial.focusNext('down');
                case navigationKeyMapping.left:
                    return spatial.focusNext('left');
                case navigationKeyMapping.right:
                    return spatial.focusNext('right');
                case navigationKeyMapping.back:
                    return spatial.goBack();
            }
        };
        var handleFocus = function (evt) {
            if (evt.target instanceof HTMLElement) {
                spatial.setActiveElement(evt.target);
            }
        };
        document.addEventListener('keydown', handleKeyDown);
        document.addEventListener('focus', handleFocus);
        // Clean up
        return function () {
            document.removeEventListener('keydown', handleKeyDown);
            document.removeEventListener('focus', handleFocus);
        };
    }, [navigationKeyMapping, spatial, value.back, value.directionKeys]);
    return (React.createElement(SpatialNavigationContext.Provider, { value: value }, children));
};
export default SpatialNavigationProvider;
//# sourceMappingURL=SpatialNavigationProvider.js.map