@wlloyalty/wll-react-sdk 1.0.101 → 1.0.102

package/dist/index.d.ts

@@ -526,8 +526,9 @@ type TSection = {
 
 type CarouselProps = {
     section?: TSection;
+    autoRotateInterval?: number;
 };
-declare const Carousel: ({ section }: CarouselProps) => JSX.Element | null;
+declare const Carousel: ({ section, autoRotateInterval, }: CarouselProps) => JSX.Element | null;
 
 type CarouselNavButtonProps = {
     direction: 'left' | 'right';

package/dist/native.js

@@ -3670,7 +3670,7 @@ 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 = reactNative.useWindowDimensions().width;
@@ -3678,9 +3678,9 @@ var Carousel = function (_a) {
     var styles = useCarouselStyles(BUTTON_SIZE);
     var animatedIndex = React.useRef(new reactNative.Animated.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), { containerWidth: WINDOW_WIDTH })), state = _c[0], dispatch = _c[1];
+    var _d = React.useReducer(carouselReducer, __assign(__assign({}, initialState), { containerWidth: WINDOW_WIDTH })), state = _d[0], dispatch = _d[1];
     var currentIndex = state.currentIndex, containerWidth = state.containerWidth;
     var sortedTiles = sortByPriority(section.tiles.filter(function (tile) { return tile.type === exports.TileType.Banner; }));
     var handleScroll = React.useCallback(function (event) {
@@ -3703,12 +3703,34 @@ 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;