source: node_modules/recharts/es6/state/keyboardEventsMiddleware.js@ a762898

Last change on this file since a762898 was a762898, checked in by istevanoska <ilinastevanoska@…>, 5 months ago

Added visualizations

  • Property mode set to 100644
File size: 3.2 KB
Line 
1import { createAction, createListenerMiddleware } from '@reduxjs/toolkit';
2import { setKeyboardInteraction } from './tooltipSlice';
3import { selectTooltipAxisDomain, selectTooltipAxisTicks, selectTooltipDisplayedData } from './selectors/tooltipSelectors';
4import { selectCoordinateForDefaultIndex } from './selectors/selectors';
5import { selectChartDirection, selectTooltipAxisDataKey } from './selectors/axisSelectors';
6import { combineActiveTooltipIndex } from './selectors/combiners/combineActiveTooltipIndex';
7export var keyDownAction = createAction('keyDown');
8export var focusAction = createAction('focus');
9export var keyboardEventsMiddleware = createListenerMiddleware();
10keyboardEventsMiddleware.startListening({
11 actionCreator: keyDownAction,
12 effect: (action, listenerApi) => {
13 var state = listenerApi.getState();
14 var accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
15 if (!accessibilityLayerIsActive) {
16 return;
17 }
18 var {
19 keyboardInteraction
20 } = state.tooltip;
21 var key = action.payload;
22 if (key !== 'ArrowRight' && key !== 'ArrowLeft' && key !== 'Enter') {
23 return;
24 }
25
26 // TODO this is lacking index for charts that do not support numeric indexes
27 var resolvedIndex = combineActiveTooltipIndex(keyboardInteraction, selectTooltipDisplayedData(state), selectTooltipAxisDataKey(state), selectTooltipAxisDomain(state));
28 var currentIndex = resolvedIndex == null ? -1 : Number(resolvedIndex);
29 if (!Number.isFinite(currentIndex) || currentIndex < 0) {
30 return;
31 }
32 var tooltipTicks = selectTooltipAxisTicks(state);
33 if (key === 'Enter') {
34 var _coordinate = selectCoordinateForDefaultIndex(state, 'axis', 'hover', String(keyboardInteraction.index));
35 listenerApi.dispatch(setKeyboardInteraction({
36 active: !keyboardInteraction.active,
37 activeIndex: keyboardInteraction.index,
38 activeCoordinate: _coordinate
39 }));
40 return;
41 }
42 var direction = selectChartDirection(state);
43 var directionMultiplier = direction === 'left-to-right' ? 1 : -1;
44 var movement = key === 'ArrowRight' ? 1 : -1;
45 var nextIndex = currentIndex + movement * directionMultiplier;
46 if (tooltipTicks == null || nextIndex >= tooltipTicks.length || nextIndex < 0) {
47 return;
48 }
49 var coordinate = selectCoordinateForDefaultIndex(state, 'axis', 'hover', String(nextIndex));
50 listenerApi.dispatch(setKeyboardInteraction({
51 active: true,
52 activeIndex: nextIndex.toString(),
53 activeCoordinate: coordinate
54 }));
55 }
56});
57keyboardEventsMiddleware.startListening({
58 actionCreator: focusAction,
59 effect: (_action, listenerApi) => {
60 var state = listenerApi.getState();
61 var accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
62 if (!accessibilityLayerIsActive) {
63 return;
64 }
65 var {
66 keyboardInteraction
67 } = state.tooltip;
68 if (keyboardInteraction.active) {
69 return;
70 }
71 if (keyboardInteraction.index == null) {
72 var nextIndex = '0';
73 var coordinate = selectCoordinateForDefaultIndex(state, 'axis', 'hover', String(nextIndex));
74 listenerApi.dispatch(setKeyboardInteraction({
75 active: true,
76 activeIndex: nextIndex,
77 activeCoordinate: coordinate
78 }));
79 }
80 }
81});
Note: See TracBrowser for help on using the repository browser.