recharts
Version:
React charts
80 lines (79 loc) • 3.18 kB
JavaScript
import { createAction, createListenerMiddleware } from '@reduxjs/toolkit';
import { setKeyboardInteraction } from './tooltipSlice';
import { selectTooltipAxisTicks, selectTooltipDisplayedData } from './selectors/tooltipSelectors';
import { selectCoordinateForDefaultIndex } from './selectors/selectors';
import { selectChartDirection } from './selectors/axisSelectors';
import { combineActiveTooltipIndex } from './selectors/combiners/combineActiveTooltipIndex';
export var keyDownAction = createAction('keyDown');
export var focusAction = createAction('focus');
export var keyboardEventsMiddleware = createListenerMiddleware();
keyboardEventsMiddleware.startListening({
actionCreator: keyDownAction,
effect: (action, listenerApi) => {
var state = listenerApi.getState();
var accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
if (!accessibilityLayerIsActive) {
return;
}
var {
keyboardInteraction
} = state.tooltip;
var key = action.payload;
if (key !== 'ArrowRight' && key !== 'ArrowLeft' && key !== 'Enter') {
return;
}
// TODO this is lacking index for charts that do not support numeric indexes
var currentIndex = Number(combineActiveTooltipIndex(keyboardInteraction, selectTooltipDisplayedData(state)));
var tooltipTicks = selectTooltipAxisTicks(state);
if (key === 'Enter') {
var _coordinate = selectCoordinateForDefaultIndex(state, 'axis', 'hover', String(keyboardInteraction.index));
listenerApi.dispatch(setKeyboardInteraction({
active: !keyboardInteraction.active,
activeIndex: keyboardInteraction.index,
activeDataKey: keyboardInteraction.dataKey,
activeCoordinate: _coordinate
}));
return;
}
var direction = selectChartDirection(state);
var directionMultiplier = direction === 'left-to-right' ? 1 : -1;
var movement = key === 'ArrowRight' ? 1 : -1;
var nextIndex = currentIndex + movement * directionMultiplier;
if (tooltipTicks == null || nextIndex >= tooltipTicks.length || nextIndex < 0) {
return;
}
var coordinate = selectCoordinateForDefaultIndex(state, 'axis', 'hover', String(nextIndex));
listenerApi.dispatch(setKeyboardInteraction({
active: true,
activeIndex: nextIndex.toString(),
activeDataKey: undefined,
activeCoordinate: coordinate
}));
}
});
keyboardEventsMiddleware.startListening({
actionCreator: focusAction,
effect: (_action, listenerApi) => {
var state = listenerApi.getState();
var accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
if (!accessibilityLayerIsActive) {
return;
}
var {
keyboardInteraction
} = state.tooltip;
if (keyboardInteraction.active) {
return;
}
if (keyboardInteraction.index == null) {
var nextIndex = '0';
var coordinate = selectCoordinateForDefaultIndex(state, 'axis', 'hover', String(nextIndex));
listenerApi.dispatch(setKeyboardInteraction({
activeDataKey: undefined,
active: true,
activeIndex: nextIndex,
activeCoordinate: coordinate
}));
}
}
});