@mui/x-charts
Version:
The community edition of MUI X Charts components.
88 lines (87 loc) • 3.55 kB
JavaScript
;
'use client';
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useChartKeyboardNavigation = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
const useChartKeyboardNavigation = ({
params,
store,
svgRef
}) => {
const removeFocus = (0, _useEventCallback.default)(function removeFocus() {
if (store.state.keyboardNavigation.item !== null) {
store.set('keyboardNavigation', (0, _extends2.default)({}, store.state.keyboardNavigation, {
item: null
}));
}
});
React.useEffect(() => {
const element = svgRef.current;
if (!element || !params.enableKeyboardNavigation) {
return undefined;
}
function keyboardHandler(event) {
let newFocusedItem = store.state.keyboardNavigation.item;
let seriesType = newFocusedItem?.type;
if (!seriesType) {
seriesType = Object.keys((0, _useChartSeries.selectorChartDefaultizedSeries)(store.state)).find(key => store.state.series.seriesConfig[key] !== undefined);
if (seriesType === undefined) {
return;
}
}
const calculateFocusedItem = store.state.series.seriesConfig[seriesType]?.keyboardFocusHandler?.(event);
if (!calculateFocusedItem) {
return;
}
newFocusedItem = calculateFocusedItem(newFocusedItem, store.state);
if (newFocusedItem !== store.state.keyboardNavigation.item) {
event.preventDefault();
store.update((0, _extends2.default)({}, store.state.highlight && {
highlight: (0, _extends2.default)({}, store.state.highlight, {
lastUpdate: 'keyboard'
})
}, store.state.interaction && {
interaction: (0, _extends2.default)({}, store.state.interaction, {
lastUpdate: 'keyboard'
})
}, {
keyboardNavigation: (0, _extends2.default)({}, store.state.keyboardNavigation, {
item: newFocusedItem
})
}));
}
}
element.addEventListener('keydown', keyboardHandler);
element.addEventListener('blur', removeFocus);
return () => {
element.removeEventListener('keydown', keyboardHandler);
element.removeEventListener('blur', removeFocus);
};
}, [svgRef, removeFocus, params.enableKeyboardNavigation, store]);
(0, _useEnhancedEffect.default)(() => {
if (store.state.keyboardNavigation.enableKeyboardNavigation !== params.enableKeyboardNavigation) {
store.set('keyboardNavigation', (0, _extends2.default)({}, store.state.keyboardNavigation, {
enableKeyboardNavigation: !!params.enableKeyboardNavigation
}));
}
}, [store, params.enableKeyboardNavigation]);
return {};
};
exports.useChartKeyboardNavigation = useChartKeyboardNavigation;
useChartKeyboardNavigation.getInitialState = params => ({
keyboardNavigation: {
item: null,
enableKeyboardNavigation: !!params.enableKeyboardNavigation
}
});
useChartKeyboardNavigation.params = {
enableKeyboardNavigation: true
};