@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
85 lines • 3.75 kB
JavaScript
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
* @deprecated Use the equivalent from momentum.design (NPM: `@momentum-design/components/dist/react`)
*/
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