react-magic-card 2.0.5 → 2.0.6

package/dist/CircleRotation/index.js

@@ -45,6 +45,8 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
     const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
     const [select, setSelect] = (0, react_1.useState)(start);
     const [hasDetail, setHasDetail] = (0, react_1.useState)(false);
+    const [lastMoveTime, setLastMoveTime] = (0, react_1.useState)(Date.now());
+    const moveDelay = 140;
     const refOuter = (0, react_1.useRef)(null);
     const refDetail = (0, react_1.useRef)(null);
     const centralAngle = ((2 * Math.PI) / images.length) * (180 / Math.PI);
@@ -54,21 +56,26 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
         setSelect(select == 0 ? images.length - 1 : select - 1);
         setHasDelayed(false);
         setCount(count + centralAngle);
+        setLastMoveTime(Date.now());
     }, [centralAngle, count, images.length, select]);
     // turn right
     const shiftRight = (0, react_1.useCallback)(() => {
         setSelect(select == images.length - 1 ? 0 : select + 1);
         setHasDelayed(false);
         setCount(count - centralAngle);
+        setLastMoveTime(Date.now());
     }, [centralAngle, count, images.length, select]);
     // Function of the desktop.
     const handleScroll = (0, react_1.useCallback)((e) => {
+        const currentTime = Date.now();
+        if (currentTime - lastMoveTime < moveDelay)
+            return;
         const delta = e.deltaY;
         if (delta < 0)
             shiftLeft();
         if (delta > 0)
             shiftRight();
-    }, [shiftLeft, shiftRight]);
+    }, [lastMoveTime, shiftLeft, shiftRight]);
     // Get a start y and x position in touchStart Y and X.
     const handleTouchStart = (e) => {
         const touch = e.touches[0];
@@ -77,6 +84,9 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
     };
     // Function of the mobile.
     const handleTouchMove = (0, react_1.useCallback)((event) => {
+        const currentTime = Date.now();
+        if (currentTime - lastMoveTime < moveDelay)
+            return;
         const touch = event.touches[0];
         const outer = refOuter.current;
         const outerHalfWidth = outer.clientWidth / 2;
@@ -116,7 +126,8 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
         }
         setTouchStartX(deltaX);
         setTouchStartY(deltaY);
-    }, [shiftLeft, shiftRight, touchStartX, touchStartY]);
+        setLastMoveTime(Date.now());
+    }, [shiftLeft, shiftRight, touchStartX, touchStartY, lastMoveTime]);
     const handleMouseDown = (0, react_1.useCallback)((e) => {
         if (hasDetail)
             return;
@@ -125,7 +136,8 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
         setInitialY(e.clientY);
     }, [hasDetail]);
     const handleMouseMove = (0, react_1.useCallback)((e) => {
-        if (isDragging) {
+        const currentTime = Date.now();
+        if (isDragging && currentTime - lastMoveTime >= moveDelay) {
             const outer = refOuter.current;
             const outerHalfWidth = outer.clientWidth / 2;
             const outerHalfHeight = outer.clientHeight / 2;
@@ -165,8 +177,9 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
             setInitialX(e.clientX);
             setInitialY(e.clientY);
             setHasMove(true);
+            setLastMoveTime(Date.now());
         }
-    }, [initialX, initialY, isDragging, shiftLeft, shiftRight]);
+    }, [initialX, initialY, isDragging, shiftLeft, shiftRight, lastMoveTime]);
     const handleMouseUp = (0, react_1.useCallback)(() => {
         setIsDragging(false);
         setHasMove(false);

package/dist/StraightInfinity/index.js

@@ -58,6 +58,9 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
     const refOuter = (0, react_1.useRef)(null);
     const refDetail = (0, react_1.useRef)(null);
     const [count, setCount] = (0, react_1.useState)(0);
+    // Adding variables for speed limiting
+    const [lastMoveTime, setLastMoveTime] = (0, react_1.useState)(Date.now());
+    const moveDelay = 140; // Minimum delay between moves in milliseconds.
     // Functions of the swipe and wheel a shifting.
     // turn left
     const shiftLeft = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -79,12 +82,16 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
     }), [count, images.length, margin, select, edge, width]);
     // Wheel function of the desktop.
     const handleScroll = (0, react_1.useCallback)((e) => __awaiter(void 0, void 0, void 0, function* () {
+        const now = Date.now();
+        if (now - lastMoveTime < moveDelay)
+            return;
+        setLastMoveTime(now);
         const delta = e.deltaY;
         if (delta < 0)
             shiftLeft();
         if (delta > 0)
             shiftRight();
-    }), [shiftLeft, shiftRight]);
+    }), [shiftLeft, shiftRight, lastMoveTime, moveDelay]);
     // Get a start y and x position in touchStart Y and X.
     const handleTouchStart = (e) => {
         const touch = e.touches[0];
@@ -93,6 +100,10 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
     };
     // Swipe Function of the mobile.
     const handleTouchMove = (0, react_1.useCallback)((e) => {
+        const now = Date.now();
+        if (now - lastMoveTime < moveDelay)
+            return;
+        setLastMoveTime(now);
         const touch = e.touches[0];
         const delta = hasDetail
             ? touch.clientX
@@ -116,7 +127,16 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
             : !vertical
                 ? setTouchStartX(delta)
                 : setTouchStartY(delta);
-    }, [hasDetail, shiftLeft, shiftRight, touchStartX, touchStartY, vertical]);
+    }, [
+        hasDetail,
+        shiftLeft,
+        shiftRight,
+        touchStartX,
+        touchStartY,
+        vertical,
+        lastMoveTime,
+        moveDelay
+    ]);
     const handleMouseDown = (0, react_1.useCallback)((e) => {
         setIsDragging(true);
         setInitialX(e.clientX);
@@ -124,6 +144,10 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
     }, []);
     const handleMouseMove = (0, react_1.useCallback)((e) => {
         if (isDragging) {
+            const now = Date.now();
+            if (now - lastMoveTime < moveDelay)
+                return;
+            setLastMoveTime(now);
             const deltaX = e.clientX - initialX;
             const deltaY = e.clientY - initialY;
             if (!vertical ? deltaX < 0 : deltaY < 0)
@@ -133,7 +157,16 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
             !vertical ? setInitialX(e.clientX) : setInitialY(e.clientY);
             setHasMove(true);
         }
-    }, [initialX, initialY, isDragging, shiftLeft, shiftRight, vertical]);
+    }, [
+        initialX,
+        initialY,
+        isDragging,
+        shiftLeft,
+        shiftRight,
+        vertical,
+        lastMoveTime,
+        moveDelay
+    ]);
     const handleMouseUp = (0, react_1.useCallback)(() => {
         setIsDragging(false);
         setHasMove(false);
@@ -144,7 +177,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
         const detail = refDetail.current;
         const timeId = setTimeout(() => {
             setHasDelayed(true);
-        }, ((transition === null || transition === void 0 ? void 0 : transition.duration) / 2) * 1000);
+        }, (transition === null || transition === void 0 ? void 0 : transition.duration) * 1000);
         // Add handle event when component mount and deps update.
         document.addEventListener('mouseup', handleMouseUp);
         if (!hasDelayed)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-magic-card",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "React Component library for images gallery using the framer motion animation.",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",