@easyv/charts 1.8.14 → 1.8.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.8.14",
+  "version": "1.8.15",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Carousel.tsx

@@ -5,8 +5,8 @@ import React, {
   useState,
   useCallback,
   useRef,
-} from 'react';
-import { interval as d3Interval, Timer } from 'd3v7';
+} from "react";
+import { interval as d3Interval, Timer } from "d3v7";
 type State = {
   currentIndex: number | null;
   trigger: string;
@@ -14,18 +14,18 @@ type State = {
 
 const initialState = {
   currentIndex: null,
-  trigger: '',
+  trigger: "",
 };
 
 const carouselState = {
   currentIndex: 0,
-  trigger: 'carousel',
+  trigger: "carousel",
 };
 
 const defaultAnimation = {
   on: false,
   interval: 0,
-  interactive: '',
+  interactive: "",
   canCancel: false,
   current: { heighten: 0, opacity: 100 },
 };
@@ -53,19 +53,28 @@ export default (Component: ComponentType<any>) =>
       const timer: { current: Timer | null } = useRef(null);
       const hoverState = useRef(false);
       const animationOn = on && interval && dataLength;
+      // 封装计时器停止逻辑
+      const stopTimer = useCallback(() => {
+        if (timer.current) {
+          timer.current.stop();
+          timer.current = null;
+        }
+      }, []);
 
       const carousel = useCallback(() => {
+        // 先停止之前的计时器
+        stopTimer();
         if (animationOn) {
           setState({
             currentIndex: 0,
-            trigger: 'carousel'
-          })
+            trigger: "carousel",
+          });
           timer.current = d3Interval(() => {
             setState(({ currentIndex }) => {
               const tmp = (currentIndex == null ? 0 : +currentIndex) + 1;
               return {
                 currentIndex: tmp >= dataLength ? 0 : tmp,
-                trigger: 'carousel',
+                trigger: "carousel",
               };
             });
           }, interval * 1000);
@@ -73,7 +82,7 @@ export default (Component: ComponentType<any>) =>
           timer.current = null;
           setState({
             currentIndex: null,
-            trigger: '',
+            trigger: "",
           });
         }
       }, [animationOn, interval, dataLength]);
@@ -81,50 +90,54 @@ export default (Component: ComponentType<any>) =>
       useEffect(() => {
         active && carousel && carousel();
         return () => {
-          timer.current && timer.current.stop();
+          stopTimer();
         };
-      }, [carousel, active]);
-      interface Event{
-        currentIndex:number,
-        type:string
+      }, [carousel, active, stopTimer]);
+      interface Event {
+        currentIndex: number;
+        type: string;
       }
       const onEvent = useCallback(
-        ({ currentIndex, type }:Event) => {
+        ({ currentIndex, type }: Event) => {
           switch (interactive) {
             case true:
-            case 'click':
-              if (type == 'onClick') {
-                timer.current && timer.current.stop();
+            case "click":
+              if (type == "onClick") {
+                stopTimer();
                 !hoverState.current && animationOn && carousel();
-                setState(pre => {
+                setState((pre) => {
                   return {
                     trigger: type,
-                    currentIndex:pre.currentIndex==currentIndex && canCancel?-1:currentIndex,
-                  }
+                    currentIndex:
+                      pre.currentIndex == currentIndex && canCancel
+                        ? -1
+                        : currentIndex,
+                  };
                 });
               }
               break;
-            case 'hover':
-              if (type == 'onMouseEnter') {
+            case "hover":
+              if (type == "onMouseEnter") {
                 setState({
-                  trigger:type,
+                  trigger: type,
                   currentIndex,
                 });
-                timer.current && timer.current.stop();
-              } else if (type == 'onMouseLeave') {
+                stopTimer();
+              } else if (type == "onMouseLeave") {
                 !hoverState.current && animationOn && carousel();
-                canCancel && setState(pre => {
-                  return {
-                    trigger: "onMouseEnter",
-                    currentIndex:-1,
-                  }
-                });
+                canCancel &&
+                  setState((pre) => {
+                    return {
+                      trigger: "onMouseEnter",
+                      currentIndex: -1,
+                    };
+                  });
               }
               break;
             case false:
-            case '':
+            case "":
               break;
-            case 'carousel':
+            case "carousel":
             default:
               setState({
                 trigger: type,
@@ -133,30 +146,34 @@ export default (Component: ComponentType<any>) =>
               break;
           }
         },
-        [interactive, canCancel, animationOn, carousel]
+        [interactive, canCancel, animationOn, carousel, stopTimer]
       );
-      
-      const hoverEvent = useCallback((isHover:boolean)=>{
-        if(hoverStop){
-          if(isHover){
-            hoverState.current = true;
-            timer.current && timer.current.stop();
-          }else{
-            hoverState.current = false;
-            if(animationOn){
-              timer.current = d3Interval(() => {
-                setState(({ currentIndex }) => {
-                  const tmp = (currentIndex == null ? 0 : +currentIndex) + 1;
-                  return {
-                    currentIndex: tmp >= dataLength ? 0 : tmp,
-                    trigger: 'carousel',
-                  };
-                });
-              }, interval * 1000);
+
+      const hoverEvent = useCallback(
+        (isHover: boolean) => {
+          if (hoverStop) {
+            if (isHover) {
+              hoverState.current = true;
+              stopTimer();
+            } else {
+              hoverState.current = false;
+              if (animationOn) {
+                stopTimer();
+                timer.current = d3Interval(() => {
+                  setState(({ currentIndex }) => {
+                    const tmp = (currentIndex == null ? 0 : +currentIndex) + 1;
+                    return {
+                      currentIndex: tmp >= dataLength ? 0 : tmp,
+                      trigger: "carousel",
+                    };
+                  });
+                }, interval * 1000);
+              }
             }
           }
-        }
-      },[hoverStop, animationOn, carousel]);
+        },
+        [hoverStop, animationOn, interval, dataLength, stopTimer]
+      );
 
       return (
         <Component