| 1 | import { createAction, createListenerMiddleware } from '@reduxjs/toolkit';
|
|---|
| 2 | import { setKeyboardInteraction } from './tooltipSlice';
|
|---|
| 3 | import { selectTooltipAxisDomain, selectTooltipAxisTicks, selectTooltipDisplayedData } from './selectors/tooltipSelectors';
|
|---|
| 4 | import { selectCoordinateForDefaultIndex } from './selectors/selectors';
|
|---|
| 5 | import { selectChartDirection, selectTooltipAxisDataKey } from './selectors/axisSelectors';
|
|---|
| 6 | import { combineActiveTooltipIndex } from './selectors/combiners/combineActiveTooltipIndex';
|
|---|
| 7 | export var keyDownAction = createAction('keyDown');
|
|---|
| 8 | export var focusAction = createAction('focus');
|
|---|
| 9 | export var keyboardEventsMiddleware = createListenerMiddleware();
|
|---|
| 10 | keyboardEventsMiddleware.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 | });
|
|---|
| 57 | keyboardEventsMiddleware.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 | }); |
|---|