diff --git a/packages/core/src/carousel/Carousel.tsx b/packages/core/src/carousel/Carousel.tsx
index 1a0d660f..8c04872d 100644
--- a/packages/core/src/carousel/Carousel.tsx
+++ b/packages/core/src/carousel/Carousel.tsx
@@ -30,6 +30,12 @@ const CarouselRoot = ({
itemsCount,
firstVisibleIndex,
lastVisibleIndex,
+ isDragging,
+ setIsDragging,
+ handleMouseDown,
+ handleMouseUp,
+ debounceMouseDown,
+ debounceMouseUp,
} = withHorizontalScroll({
scrollStep: step || 5,
scrollTo: scrollTo,
@@ -37,22 +43,26 @@ const CarouselRoot = ({
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,
}}
>
@@ -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 (
{
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
index eec3681a..38fbf695 100644
--- 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
index eed07794..26cac7cf 100644
--- 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();
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
index ad9122cb..be46bcb4 100644
--- 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,
};
};