fix: MDS-1320 add on mouse enter and drag event handlers

coingaming · Sep 24, 2024 · eaafca1 · eaafca1
1 parent 04664fd
commit eaafca1
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 20 deletions.
diff --git a/packages/core/src/carousel/Carousel.tsx b/packages/core/src/carousel/Carousel.tsx
@@ -30,29 +30,39 @@ const CarouselRoot = ({
     itemsCount,
     firstVisibleIndex,
     lastVisibleIndex,
+    isDragging,
+    setIsDragging,
+    handleMouseDown,
+    handleMouseUp,
+    debounceMouseDown,
+    debounceMouseUp,
   } = withHorizontalScroll({
     scrollStep: step || 5,
     scrollTo: scrollTo,
     scrollInContainer: true,
     isRtl,
   });
 
-  useInterval(() => {
-    if (!autoSlideDelay) return;
-    if (isRtl) {
-      if (canScrollLeft) {
-        scrollLeftToStep();
+  useInterval(
+    () => {
+      if (!autoSlideDelay) return;
+      if (isRtl) {
+        if (canScrollLeft) {
+          scrollLeftToStep();
+        } else {
+          scrollToIndex(itemsCount - 1);
+        }
       } else {
-        scrollToIndex(itemsCount - 1);
+        if (canScrollRight) {
+          scrollRightToStep();
+        } else {
+          scrollToIndex(0);
+        }
       }
-    } else {
-      if (canScrollRight) {
-        scrollRightToStep();
-      } else {
-        scrollToIndex(0);
-      }
-    }
-  }, autoSlideDelay as number);
+    },
+    autoSlideDelay as number,
+    isDragging,
+  );
 
   useEffect(() => {
     if (selectedIndex !== undefined) {
@@ -76,6 +86,12 @@ const CarouselRoot = ({
         autoSlideDelay,
         isSwipeDragDisabled: isSwipeDragDisabled ?? false,
         isRtl,
+        isDragging,
+        setIsDragging,
+        handleMouseDown,
+        handleMouseUp,
+        debounceMouseDown,
+        debounceMouseUp,
       }}
     >
       <div className={mergeClassnames("relative w-full", className)} {...rest}>
@@ -95,10 +111,20 @@ const CarouselRoot = ({
 };
 
 const Reel = ({ children, className, ...rest }: SubcomponentProps) => {
-  const { containerRef, isSwipeDragDisabled, isRtl } =
-    useCarouselContext("Carousel.Reel");
+  const {
+    containerRef,
+    isSwipeDragDisabled,
+    isRtl,
+    handleMouseDown,
+    handleMouseUp,
+    debounceMouseDown,
+    debounceMouseUp,
+  } = useCarouselContext("Carousel.Reel");
   const arrayChildren = Children.toArray(children);
   const revertChildren = arrayChildren.reverse();
+  const debouncedMouseDown = debounceMouseDown ? debounceMouseDown() : null;
+  const debouncedMouseUp = debounceMouseUp ? debounceMouseUp() : null;
+
   return (
     <ul
       className={mergeClassnames(
@@ -111,6 +137,31 @@ const Reel = ({ children, className, ...rest }: SubcomponentProps) => {
         isSwipeDragDisabled && "overflow-x-hidden",
         className,
       )}
+      onMouseEnter={() => {
+        console.log("in here oe on mouse enter");
+        handleMouseDown?.();
+      }}
+      onMouseLeave={() => {
+        console.log("in here oe on mouse leave");
+        handleMouseUp?.();
+      }}
+      onTouchStart={() => {
+        // handleMouseDown?.();
+        console.log("in here oe on touch start");
+        if (debouncedMouseDown) {
+          console.log("in here oe inside down");
+          debouncedMouseDown();
+        }
+      }}
+      onTouchEnd={() => {
+        // handleMouseUp?.();
+        // debouncedMouseUp?.();
+        console.log("in here oe on touch end");
+        if (debouncedMouseUp) {
+          console.log("in here oe inside up");
+          debouncedMouseUp();
+        }
+      }}
       ref={containerRef}
       {...rest}
     >

diff --git a/packages/core/src/carousel/private/types/CarouselState.ts b/packages/core/src/carousel/private/types/CarouselState.ts
@@ -14,6 +14,12 @@ type CarouselState = {
   autoSlideDelay?: number;
   isSwipeDragDisabled?: boolean;
   isRtl?: boolean;
+  isDragging?: boolean;
+  setIsDragging?: () => void;
+  handleMouseDown?: () => void;
+  handleMouseUp?: () => void;
+  debounceMouseDown?: () => () => void;
+  debounceMouseUp?: () => () => void;
 };
 
 export default CarouselState;
diff --git a/packages/core/src/carousel/private/utils/useInterval.ts b/packages/core/src/carousel/private/utils/useInterval.ts
@@ -1,7 +1,12 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
-const useInterval = (callback: () => void, delay: number) => {
+const useInterval = (
+  callback: () => void,
+  delay: number,
+  isDragging?: boolean,
+) => {
   const savedCallback = useRef<() => void>();
+  const [intervalId, setIntervalId] = useState<number | undefined>();
 
   useEffect(() => {
     savedCallback.current = callback;
@@ -11,11 +16,25 @@ const useInterval = (callback: () => void, delay: number) => {
     function tick() {
       savedCallback.current?.();
     }
+
+    console.log("in here oe test", { isDragging, intervalId, delay });
+
+    if (isDragging && intervalId) {
+      // clearInterval(intervalId);
+      return () => {
+        clearInterval(intervalId);
+      };
+    }
+
     if (delay !== null) {
       let id = setInterval(tick, delay);
-      return () => clearInterval(id);
+      setIntervalId(id);
+      return () => {
+        clearInterval(id);
+        setIntervalId(undefined);
+      };
     }
-  }, [delay]);
+  }, [delay, isDragging]);
 };
 
 export default useInterval;
diff --git a/packages/core/src/carousel/private/utils/withHorizontalScroll.ts b/packages/core/src/carousel/private/utils/withHorizontalScroll.ts
@@ -130,6 +130,7 @@ export const withHorizontalScroll = (options: Options): any => {
   const [firstVisibleIndex, setFirstVisibleIndex] = React.useState(-1);
   const [lastVisibleIndex, setLastVisibleIndex] = React.useState(-1);
   const [itemsCount, setItemsCount] = React.useState(0);
+  const [isDragging, setIsDragging] = React.useState(false);
   const containerRef = React.useRef(null);
 
   const { scrollStep, scrollInContainer, scrollTo, isRtl } = options;
@@ -232,6 +233,35 @@ export const withHorizontalScroll = (options: Options): any => {
     }
   }, []);
 
+  const handleMouseDown = () => {
+    setIsDragging(true);
+    console.log("in here oe mouse down");
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+    console.log("in here oe mouse up");
+  };
+
+  const debounce = (fallback: (...args: any) => void, delay: number) => {
+    let timer: number;
+
+    return (...args: any) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        fallback(...args);
+      }, delay);
+    };
+  };
+
+  const debounceMouseDown = () => {
+    return debounce(handleMouseDown, 500);
+  };
+
+  const debounceMouseUp = () => {
+    return debounce(handleMouseUp, 500);
+  };
+
   return {
     itemRef,
     containerRef,
@@ -260,6 +290,12 @@ export const withHorizontalScroll = (options: Options): any => {
     canScrollLeft: leftIndicator,
     canScrollRight: rightIndicator,
     itemsCount,
+    isDragging,
+    setIsDragging,
+    handleMouseDown,
+    handleMouseUp,
+    debounceMouseDown,
+    debounceMouseUp,
   };
 };