@wlloyalty/wll-react-sdk 1.0.101 → 1.0.102

package/dist/types/components/molecules/Carousel/Carousel.stories.d.ts

@@ -3,10 +3,13 @@ declare const _default: Meta;
 export default _default;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
     section?: import("../../../types/section").TSection;
+    autoRotateInterval?: number;
 }>;
 export declare const SingleItem: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
     section?: import("../../../types/section").TSection;
+    autoRotateInterval?: number;
 }>;
 export declare const ManyItems: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
     section?: import("../../../types/section").TSection;
+    autoRotateInterval?: number;
 }>;

package/dist/types/components/molecules/Carousel/index.d.ts

@@ -1,6 +1,7 @@
 import { TSection } from '../../../types/section';
 type CarouselProps = {
     section?: TSection;
+    autoRotateInterval?: number;
 };
-declare const Carousel: ({ section }: CarouselProps) => JSX.Element | null;
+declare const Carousel: ({ section, autoRotateInterval, }: CarouselProps) => JSX.Element | null;
 export default Carousel;

package/dist/web.js

@@ -20558,22 +20558,24 @@ var carouselReducer = function (state, action) {
   }
 };
 var Carousel = function (_a) {
-  var section = _a.section;
+  var section = _a.section,
+    _b = _a.autoRotateInterval,
+    autoRotateInterval = _b === void 0 ? 5000 : _b;
   if (!section) return null;
   var WINDOW_WIDTH = useWindowDimensions().width;
   var containerRef = React.useRef(null);
   var styles = useCarouselStyles(BUTTON_SIZE);
   var animatedIndex = React.useRef(new Animated$1.Value(0)).current;
   var theme = useWllSdk().theme;
-  var _b = useResponsive(),
-    isDesktop = _b.isDesktop,
-    isTablet = _b.isTablet;
+  var _c = useResponsive(),
+    isDesktop = _c.isDesktop,
+    isTablet = _c.isTablet;
   var scrollViewRef = React.useRef(null);
-  var _c = React.useReducer(carouselReducer, __assign(__assign({}, initialState), {
+  var _d = React.useReducer(carouselReducer, __assign(__assign({}, initialState), {
       containerWidth: WINDOW_WIDTH
     })),
-    state = _c[0],
-    dispatch = _c[1];
+    state = _d[0],
+    dispatch = _d[1];
   var currentIndex = state.currentIndex,
     containerWidth = state.containerWidth;
   var sortedTiles = sortByPriority(section.tiles.filter(function (tile) {
@@ -20604,15 +20606,40 @@ var Carousel = function (_a) {
   };
   var handleNext = function () {
     var _a;
+    var nextIndex = Math.min(sortedTiles.length - 1, currentIndex + 1);
     dispatch({
       type: 'NEXT_SLIDE',
       maxIndex: sortedTiles.length - 1
     });
     (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-      x: (currentIndex + 1) * containerWidth,
+      x: nextIndex * containerWidth,
       animated: true
     });
   };
+  var rotateToNextSlide = React.useCallback(function () {
+    var _a;
+    if (currentIndex >= sortedTiles.length - 1) {
+      dispatch({
+        type: 'SET_CURRENT_INDEX',
+        payload: 0
+      });
+      (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        x: 0,
+        animated: true
+      });
+    } else {
+      handleNext();
+    }
+  }, [currentIndex, containerWidth, sortedTiles.length]);
+  React.useEffect(function () {
+    if (sortedTiles.length <= 1) return;
+    var rotationTimer = setInterval(function () {
+      rotateToNextSlide();
+    }, autoRotateInterval);
+    return function () {
+      return clearInterval(rotationTimer);
+    };
+  }, [rotateToNextSlide, autoRotateInterval, sortedTiles.length]);
   var displayControls = sortedTiles.length > 1;
   var showPrevButton = displayControls && currentIndex > 0;
   var showNextButton = displayControls && currentIndex < sortedTiles.length - 1;