diff --git a/packages/core/src/carousel/Carousel.tsx b/packages/core/src/carousel/Carousel.tsx index 8c04872d..63849b02 100644 --- a/packages/core/src/carousel/Carousel.tsx +++ b/packages/core/src/carousel/Carousel.tsx @@ -119,6 +119,7 @@ const Reel = ({ children, className, ...rest }: SubcomponentProps) => { handleMouseUp, debounceMouseDown, debounceMouseUp, + isDragging, } = useCarouselContext("Carousel.Reel"); const arrayChildren = Children.toArray(children); const revertChildren = arrayChildren.reverse(); @@ -138,28 +139,19 @@ const Reel = ({ children, className, ...rest }: SubcomponentProps) => { 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(); + if (!isDragging) { + handleMouseDown?.(); } }} onTouchEnd={() => { - // handleMouseUp?.(); - // debouncedMouseUp?.(); - console.log("in here oe on touch end"); - if (debouncedMouseUp) { - console.log("in here oe inside up"); - debouncedMouseUp(); + if (isDragging) { + debouncedMouseUp?.(); } }} ref={containerRef} diff --git a/packages/core/src/carousel/private/utils/useInterval.ts b/packages/core/src/carousel/private/utils/useInterval.ts index 26cac7cf..01b76a88 100644 --- a/packages/core/src/carousel/private/utils/useInterval.ts +++ b/packages/core/src/carousel/private/utils/useInterval.ts @@ -17,16 +17,15 @@ const useInterval = ( savedCallback.current?.(); } - console.log("in here oe test", { isDragging, intervalId, delay }); - if (isDragging && intervalId) { - // clearInterval(intervalId); + clearInterval(intervalId); + setIntervalId(undefined); return () => { clearInterval(intervalId); }; } - if (delay !== null) { + if (!isDragging && delay !== null) { let id = setInterval(tick, delay); setIntervalId(id); return () => { diff --git a/packages/core/src/carousel/private/utils/withHorizontalScroll.ts b/packages/core/src/carousel/private/utils/withHorizontalScroll.ts index be46bcb4..0267a7d6 100644 --- a/packages/core/src/carousel/private/utils/withHorizontalScroll.ts +++ b/packages/core/src/carousel/private/utils/withHorizontalScroll.ts @@ -26,7 +26,7 @@ const findFirstVisibleIndex = (childRefs: any[]): any => { return childRefs.findIndex((child) => child.getAttribute("visible")); }; -const scrollToIndex = ( +const scrollToIndex = async ( itemRef: HTMLElement, scrollIntoViewSmoothly: any, containerRef?: any, @@ -34,7 +34,7 @@ const scrollToIndex = ( isNotSmooth?: boolean, ) => { if (itemRef) { - scrollIntoViewSmoothly(itemRef, { + await scrollIntoViewSmoothly(itemRef, { block: "nearest", inline: scrollStep === 1 ? "center" : "nearest", behavior: isNotSmooth ? undefined : "smooth", @@ -234,18 +234,16 @@ export const withHorizontalScroll = (options: Options): any => { }, []); const handleMouseDown = () => { - setIsDragging(true); - console.log("in here oe mouse down"); + setIsDragging((prevState) => !prevState); }; const handleMouseUp = () => { - setIsDragging(false); + setIsDragging((prevState) => !prevState); 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(() => { @@ -259,7 +257,7 @@ export const withHorizontalScroll = (options: Options): any => { }; const debounceMouseUp = () => { - return debounce(handleMouseUp, 500); + return debounce(handleMouseUp, 3000); }; return {