Add side effects back in, use named export, add resize listener

FormidableLabs · Feb 28, 2024 · 3f4df56 · 3f4df56
1 parent bcf2cf1
commit 3f4df56
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 46 deletions.
diff --git a/packages/nuka/package.json b/packages/nuka/package.json
@@ -93,7 +93,7 @@
     "url": "https://github.com/FormidableLabs/nuka-carousel/issues"
   },
   "homepage": "https://github.com/FormidableLabs/nuka-carousel",
-  "sideEffects": false,
+  "sideEffects": true,
   "publishConfig": {
     "provenance": true
   }

diff --git a/packages/nuka/src/Carousel/Carousel.tsx b/packages/nuka/src/Carousel/Carousel.tsx
@@ -130,57 +130,66 @@ export const Carousel = forwardRef<SlideHandle, CarouselProps>(
     }, [autoplay, autoplayInterval, handleScrollAction, scrollDistance]);
 
     useEffect(() => {
-      if (wrapperRef.current && containerRef.current) {
-        const wrapperCurrent = wrapperRef.current;
-        const containerRefOffsetLeft = containerRef.current.offsetLeft;
-
-        const lastChild = wrapperCurrent.lastChild as HTMLElement;
-        const carouselTotalWidth =
-          lastChild.offsetLeft +
-          lastChild.offsetWidth -
-          wrapperCurrent.offsetLeft;
-
-        let proposedPageStartIndices = [];
-
-        if (scrollDistance === 'slide') {
-          proposedPageStartIndices = Array.from(wrapperCurrent.children).map(
-            (child) =>
-              (child as HTMLElement).offsetLeft - containerRefOffsetLeft
-          );
-        } else {
-          if (typeof scrollDistance === 'number') {
-            proposedPageStartIndices = Array.from(
-              {
-                length: carouselTotalWidth / scrollDistance,
-              },
-              (_, index) => index * scrollDistance
+      const updateIndices = () => {
+        if (wrapperRef.current && containerRef.current) {
+          const wrapperCurrent = wrapperRef.current;
+          const containerRefOffsetLeft = containerRef.current.offsetLeft;
+
+          const lastChild = wrapperCurrent.lastChild as HTMLElement;
+          const carouselTotalWidth =
+            lastChild.offsetLeft +
+            lastChild.offsetWidth -
+            wrapperCurrent.offsetLeft;
+
+          let proposedPageStartIndices = [];
+
+          if (scrollDistance === 'slide') {
+            proposedPageStartIndices = Array.from(wrapperCurrent.children).map(
+              (child) =>
+                (child as HTMLElement).offsetLeft - containerRefOffsetLeft
             );
           } else {
-            const arrayLength = Math.ceil(
-              carouselTotalWidth / wrapperCurrent.offsetWidth
-            );
-            proposedPageStartIndices = Array.from(
-              {
-                length: arrayLength,
-              },
-              (_, index) => {
-                if (index === arrayLength - 1) {
-                  return carouselTotalWidth - wrapperCurrent.offsetWidth;
+            if (typeof scrollDistance === 'number') {
+              proposedPageStartIndices = Array.from(
+                {
+                  length: carouselTotalWidth / scrollDistance,
+                },
+                (_, index) => index * scrollDistance
+              );
+            } else {
+              const arrayLength = Math.ceil(
+                carouselTotalWidth / wrapperCurrent.offsetWidth
+              );
+              proposedPageStartIndices = Array.from(
+                {
+                  length: arrayLength,
+                },
+                (_, index) => {
+                  if (index === arrayLength - 1) {
+                    return carouselTotalWidth - wrapperCurrent.offsetWidth;
+                  }
+                  return wrapperCurrent.offsetWidth * index;
                 }
-                return wrapperCurrent.offsetWidth * index;
-              }
-            );
+              );
+            }
           }
+
+          const lastIndexInView =
+            findLastIndex(
+              proposedPageStartIndices,
+              (index) => index < carouselTotalWidth - wrapperCurrent.offsetWidth
+            ) + 2;
+
+          setPageStartIndices(
+            proposedPageStartIndices.slice(0, lastIndexInView)
+          );
         }
+      };
 
-        const lastIndexInView =
-          findLastIndex(
-            proposedPageStartIndices,
-            (index) => index < carouselTotalWidth - wrapperCurrent.offsetWidth
-          ) + 2;
+      window.addEventListener('resize', updateIndices);
+      updateIndices();
 
-        setPageStartIndices(proposedPageStartIndices.slice(0, lastIndexInView));
-      }
+      return () => window.removeEventListener('resize', updateIndices);
     }, [scrollDistance, wrapperRef, containerRef]);
 
     const getCurrentPageIndex = useCallback(() => {

diff --git a/website/src/components/demos.tsx b/website/src/components/demos.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import Carousel, { SlideHandle } from 'nuka-carousel';
+import { Carousel, SlideHandle } from 'nuka-carousel';
 import { generateCards } from '@site/src/components/cards';
 
 type scrollDistanceType = number | 'slide' | 'screen';