| [a762898] | 1 | "use strict";
|
|---|
| 2 |
|
|---|
| 3 | Object.defineProperty(exports, "__esModule", {
|
|---|
| 4 | value: true
|
|---|
| 5 | });
|
|---|
| 6 | exports.externalEventsMiddleware = exports.externalEventAction = void 0;
|
|---|
| 7 | var _toolkit = require("@reduxjs/toolkit");
|
|---|
| 8 | var _tooltipSelectors = require("./selectors/tooltipSelectors");
|
|---|
| 9 | var externalEventAction = exports.externalEventAction = (0, _toolkit.createAction)('externalEvent');
|
|---|
| 10 | var externalEventsMiddleware = exports.externalEventsMiddleware = (0, _toolkit.createListenerMiddleware)();
|
|---|
| 11 |
|
|---|
| 12 | /*
|
|---|
| 13 | * We need a Map keyed by event type because this middleware handles MULTIPLE different event types
|
|---|
| 14 | * (click, mouseenter, mouseleave, mousedown, mouseup, contextmenu, dblclick, touchstart, touchmove, touchend)
|
|---|
| 15 | * from the same DOM element. Different event types should NOT cancel each other's animation frames.
|
|---|
| 16 | * For example, a click event and a mousemove event can happen in quick succession and both should be processed.
|
|---|
| 17 | * This is different from mouseMoveMiddleware which only handles one event type and uses a single rafId.
|
|---|
| 18 | */
|
|---|
| 19 | var rafIdMap = new Map();
|
|---|
| 20 | externalEventsMiddleware.startListening({
|
|---|
| 21 | actionCreator: externalEventAction,
|
|---|
| 22 | effect: (action, listenerApi) => {
|
|---|
| 23 | var {
|
|---|
| 24 | handler,
|
|---|
| 25 | reactEvent
|
|---|
| 26 | } = action.payload;
|
|---|
| 27 | if (handler == null) {
|
|---|
| 28 | return;
|
|---|
| 29 | }
|
|---|
| 30 | reactEvent.persist();
|
|---|
| 31 | var eventType = reactEvent.type;
|
|---|
| 32 |
|
|---|
| 33 | // Cancel any pending animation frame for this event type
|
|---|
| 34 | var existingRafId = rafIdMap.get(eventType);
|
|---|
| 35 | if (existingRafId !== undefined) {
|
|---|
| 36 | cancelAnimationFrame(existingRafId);
|
|---|
| 37 | }
|
|---|
| 38 | var rafId = requestAnimationFrame(() => {
|
|---|
| 39 | try {
|
|---|
| 40 | /*
|
|---|
| 41 | * Here it is important that we get the latest state inside the animation frame callback,
|
|---|
| 42 | * not from the outer scope, because there may have been other actions dispatched
|
|---|
| 43 | * between the time the event was fired and the animation frame callback is executed.
|
|---|
| 44 | * One of those actions is the one that actually sets the active tooltip state!
|
|---|
| 45 | */
|
|---|
| 46 | var state = listenerApi.getState();
|
|---|
| 47 | var nextState = {
|
|---|
| 48 | activeCoordinate: (0, _tooltipSelectors.selectActiveTooltipCoordinate)(state),
|
|---|
| 49 | activeDataKey: (0, _tooltipSelectors.selectActiveTooltipDataKey)(state),
|
|---|
| 50 | activeIndex: (0, _tooltipSelectors.selectActiveTooltipIndex)(state),
|
|---|
| 51 | activeLabel: (0, _tooltipSelectors.selectActiveLabel)(state),
|
|---|
| 52 | activeTooltipIndex: (0, _tooltipSelectors.selectActiveTooltipIndex)(state),
|
|---|
| 53 | isTooltipActive: (0, _tooltipSelectors.selectIsTooltipActive)(state)
|
|---|
| 54 | };
|
|---|
| 55 | handler(nextState, reactEvent);
|
|---|
| 56 | } finally {
|
|---|
| 57 | rafIdMap.delete(eventType);
|
|---|
| 58 | }
|
|---|
| 59 | });
|
|---|
| 60 | rafIdMap.set(eventType, rafId);
|
|---|
| 61 | }
|
|---|
| 62 | }); |
|---|