@wlloyalty/wll-react-sdk 1.0.89 → 1.0.90

package/dist/index.d.ts

@@ -528,6 +528,12 @@ type CarouselProps = {
 };
 declare const Carousel: ({ section }: CarouselProps) => JSX.Element | null;
 
+type CarouselNavButtonProps = {
+    direction: 'left' | 'right';
+    onPress: () => void;
+};
+declare const CarouselNavButton: ({ direction, onPress, }: CarouselNavButtonProps) => JSX.Element;
+
 type GridProps = {
     section: TSection;
 };
@@ -681,4 +687,4 @@ type WllSdkProviderProps = WithChildren & {
 declare const WllSdkProvider: ({ children, theme: providedTheme, config, navigationConfig, }: WllSdkProviderProps) => JSX.Element;
 declare const useWllSdk: () => WllSdkContextType;
 
-export { type APIResponse, type Align, type Availability, type Badge, type BadgeDetail, _default$5 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$4 as BannerTile, BannerTileConfig, BaseBanner, type BaseThemeObject, BaseTile, Button, CTALinkTarget, Carousel, Column, _default$3 as ContentTile, ContentTileConfig, type DerivedColors, type DerivedProperties, type DesaturationType, type FlexDirection, FullFlex, Grid, Group, Icon, type ImagePropsNoSource, Indicator, type Justify, Layout, type LayoutProps$1 as LayoutProps, LoadingIndicator, type NavigationConfig, type NavigationType, type PercentageKey, _default$2 as PointsTile, PointsTileConfig, type ProgessType, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, type RewardCategory, _default$1 as RewardCategoryTile, RewardCategoryTileConfig, _default as RewardTile, RewardTileConfig, Row, type SDKConfig, Section, SectionHeader, SectionType, type Size, Skeleton, Spacer, type TGroup, type TSection, Text, type ThemeContextType, type ThemeObject, type ThemeProviderProps, TierTileConfig, TierTileType, TierTile as TierTileUpdated, type TierType, type Tile, type TileConfig, TileContainer, TileHeight, type TileSizeInfo, TileType, type Variant, WllSdkProvider, alignMap, justifyMap, useWllSdk };
+export { type APIResponse, type Align, type Availability, type Badge, type BadgeDetail, _default$5 as BadgeTile, BadgeTileConfig, BadgeTileType, _default$4 as BannerTile, BannerTileConfig, BaseBanner, type BaseThemeObject, BaseTile, Button, CTALinkTarget, Carousel, CarouselNavButton, Column, _default$3 as ContentTile, ContentTileConfig, type DerivedColors, type DerivedProperties, type DesaturationType, type FlexDirection, FullFlex, Grid, Group, Icon, type ImagePropsNoSource, Indicator, type Justify, Layout, type LayoutProps$1 as LayoutProps, LoadingIndicator, type NavigationConfig, type NavigationType, type PercentageKey, _default$2 as PointsTile, PointsTileConfig, type ProgessType, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, type RewardCategory, _default$1 as RewardCategoryTile, RewardCategoryTileConfig, _default as RewardTile, RewardTileConfig, Row, type SDKConfig, Section, SectionHeader, SectionType, type Size, Skeleton, Spacer, type TGroup, type TSection, Text, type ThemeContextType, type ThemeObject, type ThemeProviderProps, TierTileConfig, TierTileType, TierTile as TierTileUpdated, type TierType, type Tile, type TileConfig, TileContainer, TileHeight, type TileSizeInfo, TileType, type Variant, WllSdkProvider, alignMap, justifyMap, useWllSdk };

package/dist/native.js

@@ -3678,22 +3678,14 @@ var Carousel = function (_a) {
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionHeader, { title: section.title, description: section.description }), jsxRuntimeExports.jsxs(reactNative.View, { ref: containerRef, style: styles.container, onLayout: function (event) {
                     var width = event.nativeEvent.layout.width;
                     dispatch({ type: 'SET_CONTAINER_WIDTH', payload: width });
-                }, children: [jsxRuntimeExports.jsxs(reactNative.View, { style: styles.carouselContainer, children: [showPrevButton && (jsxRuntimeExports.jsx(reactNative.Pressable, { style: [
-                                    styles.navButton,
-                                    styles.navButtonLeft,
-                                    { backgroundColor: theme.background },
-                                ], onPress: handlePrev, accessibilityLabel: "Previous slide", role: "button", children: jsxRuntimeExports.jsx(Icon, { name: "ArrowLeft", size: 20, color: theme.primary }) })), jsxRuntimeExports.jsx(reactNative.ScrollView, { ref: scrollViewRef, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onScroll: handleScroll, onMomentumScrollEnd: handleScrollEnd, scrollEventThrottle: 16, style: [styles.carouselContent], contentContainerStyle: {
+                }, children: [jsxRuntimeExports.jsxs(reactNative.View, { style: styles.carouselContainer, children: [showPrevButton && (jsxRuntimeExports.jsx(CarouselNavButton, { direction: "left", onPress: handlePrev })), jsxRuntimeExports.jsx(reactNative.ScrollView, { ref: scrollViewRef, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onScroll: handleScroll, onMomentumScrollEnd: handleScrollEnd, scrollEventThrottle: 16, style: styles.carouselContent, contentContainerStyle: {
                                     width: containerWidth * sortedTiles.length,
                                 }, decelerationRate: "fast", snapToInterval: containerWidth, snapToAlignment: "start", children: sortedTiles.map(function (tile, index) { return (jsxRuntimeExports.jsx(reactNative.View, { style: [
                                         styles.slideContainer,
                                         {
                                             width: containerWidth,
                                         },
-                                    ], children: jsxRuntimeExports.jsx(BannerTile$1, { tile: tile }) }, index)); }) }), showNextButton && (jsxRuntimeExports.jsx(reactNative.Pressable, { style: [
-                                    styles.navButton,
-                                    styles.navButtonRight,
-                                    { backgroundColor: theme.background },
-                                ], onPress: handleNext, accessibilityLabel: "Next slide", role: "button", children: jsxRuntimeExports.jsx(Icon, { name: "ArrowRight", size: 20, color: theme.primary }) }))] }), displayControls && (jsxRuntimeExports.jsx(reactNative.View, { style: dynamicStyles.indicators, children: sortedTiles.map(function (_, index) {
+                                    ], children: jsxRuntimeExports.jsx(BannerTile$1, { tile: tile }) }, index)); }) }), showNextButton && (jsxRuntimeExports.jsx(CarouselNavButton, { direction: "right", onPress: handleNext }))] }), displayControls && (jsxRuntimeExports.jsx(reactNative.View, { style: dynamicStyles.indicators, children: sortedTiles.map(function (_, index) {
                             var width = animatedIndex.interpolate({
                                 inputRange: [index - 1, index, index + 1],
                                 outputRange: [8, 30, 8],
@@ -3709,6 +3701,43 @@ var Carousel = function (_a) {
                         }) }))] })] }));
 };
 
+var useNavButtonStyles = function () {
+    var theme = useWllSdk().theme;
+    var buttonSize = IS_MOBILE ? BUTTON_SIZE * 0.75 : BUTTON_SIZE;
+    return reactNative.StyleSheet.create({
+        navButton: {
+            position: 'absolute',
+            top: '50%',
+            transform: [{ translateY: -buttonSize / 2 }],
+            width: buttonSize,
+            height: buttonSize,
+            borderRadius: buttonSize / 2,
+            backgroundColor: theme.background,
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 1,
+        },
+        navButtonLeft: {
+            left: -buttonSize / 2,
+        },
+        navButtonRight: {
+            right: -buttonSize / 2,
+        },
+    });
+};
+
+var CarouselNavButton = function (_a) {
+    var direction = _a.direction, onPress = _a.onPress;
+    var theme = useWllSdk().theme;
+    var isRight = direction === 'right';
+    var styles = useNavButtonStyles();
+    return (jsxRuntimeExports.jsx(reactNative.Pressable, { style: [
+            styles.navButton,
+            isRight ? styles.navButtonRight : styles.navButtonLeft,
+            { backgroundColor: theme.background },
+        ], onPress: onPress, accessibilityLabel: "".concat(isRight ? 'Next' : 'Previous', " slide"), role: "button", children: jsxRuntimeExports.jsx(Icon, { name: isRight ? 'ArrowRight' : 'ArrowLeft', size: 20, color: theme.primary }) }));
+};
+
 var Grid = function (_a) {
     var section = _a.section;
     if (section.type !== exports.SectionType.Grid) {
@@ -4770,6 +4799,7 @@ exports.BaseBanner = BaseBanner;
 exports.BaseTile = BaseTile;
 exports.Button = Button;
 exports.Carousel = Carousel;
+exports.CarouselNavButton = CarouselNavButton;
 exports.Column = Column;
 exports.ContentTile = ContentTile$1;
 exports.ContentTileConfig = ContentTileConfig;