feat: provide page info on beforeSlide and afterSlide callbacks (#1070)

FormidableLabs · Oct 7, 2024 · de9cfbb · de9cfbb
2 parents 723f6ec + fc30468
commit de9cfbb
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 17 deletions.
diff --git a/.changeset/hot-berries-ring.md b/.changeset/hot-berries-ring.md
@@ -0,0 +1,5 @@
+---
+"nuka-carousel": minor
+---
+
+feat: provide page info on beforeSlide and afterSlide callbacks
diff --git a/docs/api/callbacks.mdx b/docs/api/callbacks.mdx
@@ -14,24 +14,20 @@ Functions that are invoked when the progression methods (goBack()/goForward()) a
 
 ### Details
 
-| Prop Name     | Type       | Default Value |
-| :------------ | :--------- | :------------ |
-| `beforeSlide` | () => void | `undefined`   |
-| `afterSlide`  | () => void | `undefined`   |
+| Prop Name     | Type                                                       | Default Value |
+| :------------ | :--------------------------------------------------------- | :------------ |
+| `beforeSlide` | (currentSlideIndex: number, endSlideIndex: number) => void | `undefined`   |
+| `afterSlide`  | (endSlideIndex: number) => void                            | `undefined`   |
 
 - `beforeSlide` - Runs a given function before scrolling when a progression method is called. It will also run right before the carousel registers that it has been scrolled on if manually scrolled.
 - `afterSlide` - Runs a given function after scrolling when a progression method is called or after manually scrolling.
 
 ### Example
 
 ```tsx
-<Carousel beforeSlide={() => myCustomBeforeFunction()}>
-  {/* Cards */}
-</Carousel>
+<Carousel beforeSlide={() => myCustomBeforeFunction()}>{/* Cards */}</Carousel>
 ```
 
 ```tsx
-<Carousel afterSlide={() => myCustomAfterFunction()}>
-  {/* Cards */}
-</Carousel>
+<Carousel afterSlide={() => myCustomAfterFunction()}>{/* Cards */}</Carousel>
 ```
diff --git a/packages/nuka/src/Carousel/Carousel.stories.tsx b/packages/nuka/src/Carousel/Carousel.stories.tsx
@@ -171,8 +171,12 @@ export const GoToPage: Story = {
 
 export const BeforeSlide: Story = {
   args: {
-    beforeSlide: () =>
-      console.log('Function was called before scroll occurred '),
+    beforeSlide: (currentSlideIndex, endSlideIndex) =>
+      console.log(
+        'Function was called before scroll occurred ',
+        currentSlideIndex,
+        endSlideIndex,
+      ),
     children: (
       <>
         {[...Array(10)].map((_, index) => (
@@ -185,7 +189,8 @@ export const BeforeSlide: Story = {
 
 export const AfterSlide: Story = {
   args: {
-    afterSlide: () => console.log('Function was called after scroll occurred '),
+    afterSlide: (endSlideIndex) =>
+      console.log('Function was called after scroll occurred ', endSlideIndex),
     children: (
       <>
         {[...Array(10)].map((_, index) => (

diff --git a/packages/nuka/src/Carousel/Carousel.tsx b/packages/nuka/src/Carousel/Carousel.tsx
@@ -54,6 +54,7 @@ export const Carousel = forwardRef<SlideHandle, CarouselProps>(
 
     const carouselRef = useRef<HTMLDivElement | null>(null);
     const containerRef = useRef<HTMLDivElement | null>(null);
+    const previousPageRef = useRef<number>(-1);
 
     // -- update page count and scroll offset based on scroll distance
     const { totalPages, scrollOffset } = useMeasurement({
@@ -103,9 +104,12 @@ export const Carousel = forwardRef<SlideHandle, CarouselProps>(
     // -- scroll container when page index changes
     useEffect(() => {
       if (containerRef.current) {
-        beforeSlide && beforeSlide();
+        const currentSlideIndex = previousPageRef.current;
+        const endSlideIndex = currentPage;
+        beforeSlide && beforeSlide(currentSlideIndex, endSlideIndex);
         containerRef.current.scrollLeft = scrollOffset[currentPage];
-        afterSlide && setTimeout(() => afterSlide(), 0);
+        afterSlide && setTimeout(() => afterSlide(endSlideIndex), 0);
+        previousPageRef.current = currentPage;
       }
     }, [currentPage, scrollOffset, beforeSlide, afterSlide]);
 

diff --git a/packages/nuka/src/types.ts b/packages/nuka/src/types.ts
@@ -4,8 +4,8 @@ export type ShowArrowsOption = boolean | 'always' | 'hover';
 export type ScrollDistanceType = number | 'slide' | 'screen';
 
 export type CarouselCallbacks = {
-  beforeSlide?: () => void;
-  afterSlide?: () => void;
+  beforeSlide?: (currentSlideIndex: number, endSlideIndex: number) => void;
+  afterSlide?: (endSlideIndex: number) => void;
 };
 
 export type CarouselProps = CarouselCallbacks & {