@easyv/charts 1.8.15 → 1.8.16

package/lib/components/Carousel.js

@@ -20,16 +20,16 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var initialState = {
   currentIndex: null,
-  trigger: ''
+  trigger: ""
 };
 var carouselState = {
   currentIndex: 0,
-  trigger: 'carousel'
+  trigger: "carousel"
 };
 var defaultAnimation = {
   on: false,
   interval: 0,
-  interactive: '',
+  interactive: "",
   canCancel: false,
   current: {
     heighten: 0,
@@ -62,11 +62,20 @@ var _default = exports["default"] = function _default(Component) {
     var timer = (0, _react.useRef)(null);
     var hoverState = (0, _react.useRef)(false);
     var animationOn = on && interval && dataLength;
+    // 封装计时器停止逻辑
+    var stopTimer = (0, _react.useCallback)(function () {
+      if (timer.current) {
+        timer.current.stop();
+        timer.current = null;
+      }
+    }, []);
     var carousel = (0, _react.useCallback)(function () {
+      // 先停止之前的计时器
+      stopTimer();
       if (animationOn) {
         setState({
           currentIndex: 0,
-          trigger: 'carousel'
+          trigger: "carousel"
         });
         timer.current = (0, _d3v.interval)(function () {
           setState(function (_ref2) {
@@ -74,7 +83,7 @@ var _default = exports["default"] = function _default(Component) {
             var tmp = (currentIndex == null ? 0 : +currentIndex) + 1;
             return {
               currentIndex: tmp >= dataLength ? 0 : tmp,
-              trigger: 'carousel'
+              trigger: "carousel"
             };
           });
         }, interval * 1000);
@@ -82,24 +91,24 @@ var _default = exports["default"] = function _default(Component) {
         timer.current = null;
         setState({
           currentIndex: null,
-          trigger: ''
+          trigger: ""
         });
       }
     }, [animationOn, interval, dataLength]);
     (0, _react.useEffect)(function () {
       active && carousel && carousel();
       return function () {
-        timer.current && timer.current.stop();
+        stopTimer();
       };
-    }, [carousel, active]);
+    }, [carousel, active, stopTimer]);
     var onEvent = (0, _react.useCallback)(function (_ref3) {
       var currentIndex = _ref3.currentIndex,
         type = _ref3.type;
       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(function (pre) {
               return {
@@ -109,14 +118,14 @@ var _default = exports["default"] = function _default(Component) {
             });
           }
           break;
-        case 'hover':
-          if (type == 'onMouseEnter') {
+        case "hover":
+          if (type == "onMouseEnter") {
             setState({
               trigger: type,
               currentIndex: currentIndex
             });
-            timer.current && timer.current.stop();
-          } else if (type == 'onMouseLeave') {
+            stopTimer();
+          } else if (type == "onMouseLeave") {
             !hoverState.current && animationOn && carousel();
             canCancel && setState(function (pre) {
               return {
@@ -127,9 +136,9 @@ var _default = exports["default"] = function _default(Component) {
           }
           break;
         case false:
-        case '':
+        case "":
           break;
-        case 'carousel':
+        case "carousel":
         default:
           setState({
             trigger: type,
@@ -137,29 +146,30 @@ var _default = exports["default"] = function _default(Component) {
           });
           break;
       }
-    }, [interactive, canCancel, animationOn, carousel]);
+    }, [interactive, canCancel, animationOn, carousel, stopTimer]);
     var hoverEvent = (0, _react.useCallback)(function (isHover) {
       if (hoverStop) {
         if (isHover) {
           hoverState.current = true;
-          timer.current && timer.current.stop();
+          stopTimer();
         } else {
           hoverState.current = false;
           if (animationOn) {
+            stopTimer();
             timer.current = (0, _d3v.interval)(function () {
               setState(function (_ref4) {
                 var currentIndex = _ref4.currentIndex;
                 var tmp = (currentIndex == null ? 0 : +currentIndex) + 1;
                 return {
                   currentIndex: tmp >= dataLength ? 0 : tmp,
-                  trigger: 'carousel'
+                  trigger: "carousel"
                 };
               });
             }, interval * 1000);
           }
         }
       }
-    }, [hoverStop, animationOn, carousel]);
+    }, [hoverStop, animationOn, interval, dataLength, stopTimer]);
     return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, rest, {
       state: state,
       onEvent: onEvent,