From 3d3f4e0735252015995b756d87189b92b52fcdc7 Mon Sep 17 00:00:00 2001
From: Seungwoo Hong <qksn1541@gmail.com>
Date: Mon, 23 Oct 2023 03:14:32 +0900
Subject: [PATCH] type cast

---
 src/chart/generateCategoricalChart.tsx | 27 +++++++-------------------
 1 file changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/chart/generateCategoricalChart.tsx b/src/chart/generateCategoricalChart.tsx
index b3da65610e..8c321949a9 100644
--- a/src/chart/generateCategoricalChart.tsx
+++ b/src/chart/generateCategoricalChart.tsx
@@ -1094,6 +1094,8 @@ export const generateCategoricalChart = ({
 
     accessibilityManager = new AccessibilityManager();
 
+    throttleTriggeredAfterMouseMove: DebouncedFunc<typeof CategoricalChartWrapper.prototype.triggeredAfterMouseMove>;
+
     // todo join specific chart propTypes
     static defaultProps: CategoricalChartProps = {
       layout: 'horizontal',
@@ -1114,7 +1116,7 @@ export const generateCategoricalChart = ({
       this.clipPathId = `${props.id ?? uniqueId('recharts')}-clip`;
 
       // trigger 60fps
-      this.triggeredAfterMouseMove = _.throttle(this.triggeredAfterMouseMove, props.throttleDelay ?? 1000 / 60);
+      this.throttleTriggeredAfterMouseMove = _.throttle(this.triggeredAfterMouseMove, props.throttleDelay ?? 1000 / 60);
 
       this.state = {};
     }
@@ -1129,7 +1131,7 @@ export const generateCategoricalChart = ({
           top: this.props.margin.top ?? 0,
         },
         coordinateList: this.state.tooltipTicks,
-        mouseHandlerCallback: this.accessibilityMouseHandler,
+        mouseHandlerCallback: this.triggeredAfterMouseMove,
         layout: this.props.layout,
       });
     }
@@ -1279,9 +1281,7 @@ export const generateCategoricalChart = ({
 
     componentWillUnmount() {
       this.removeListener();
-      (
-        this.triggeredAfterMouseMove as DebouncedFunc<typeof CategoricalChartWrapper.prototype.triggeredAfterMouseMove>
-      ).cancel();
+      this.throttleTriggeredAfterMouseMove.cancel();
     }
 
     getTooltipEventType() {
@@ -1500,19 +1500,6 @@ export const generateCategoricalChart = ({
       }
     };
 
-    accessibilityMouseHandler = (e: MousePointer) => {
-      const mouse = this.getMouseInfo(e);
-      const nextState: CategoricalChartState = mouse ? { ...mouse, isTooltipActive: true } : { isTooltipActive: false };
-      this.setState(nextState);
-      this.triggerSyncEvent(nextState);
-
-      // I don't understand why it is receiving keyboard or focus events and triggering mouse events
-      const { onMouseMove } = this.props;
-      if (_.isFunction(onMouseMove)) {
-        onMouseMove(nextState, e);
-      }
-    };
-
     /**
      * The handler of mouse entering a scatter
      * @param {Object} el The active scatter
@@ -1544,7 +1531,7 @@ export const generateCategoricalChart = ({
      */
     handleMouseMove = (e: MousePointer & Partial<Omit<React.MouseEvent, keyof MousePointer>>): void => {
       e.persist();
-      this.triggeredAfterMouseMove(e);
+      this.throttleTriggeredAfterMouseMove(e);
     };
 
     /**
@@ -1613,7 +1600,7 @@ export const generateCategoricalChart = ({
 
     handleTouchMove = (e: React.TouchEvent) => {
       if (e.changedTouches != null && e.changedTouches.length > 0) {
-        this.triggeredAfterMouseMove(e.changedTouches[0]);
+        this.throttleTriggeredAfterMouseMove(e.changedTouches[0]);
       }
     };