@wlloyalty/wll-react-sdk 1.0.72 → 1.0.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/native.js +25 -28
- package/dist/native.js.map +1 -1
- package/dist/web.js +56 -62
- package/dist/web.js.map +1 -1
- package/package.json +1 -1
package/dist/native.js
CHANGED
|
@@ -2133,14 +2133,14 @@ var Icon = function (_a) {
|
|
|
2133
2133
|
var LoadingIndicator = function () {
|
|
2134
2134
|
var theme = useWllSdk().theme;
|
|
2135
2135
|
return (jsxRuntimeExports.jsx(reactNative.View, { style: [
|
|
2136
|
-
styles$
|
|
2136
|
+
styles$8.container,
|
|
2137
2137
|
{
|
|
2138
2138
|
borderRadius: theme.sizes.borderRadiusSm,
|
|
2139
2139
|
padding: theme.sizes.md,
|
|
2140
2140
|
},
|
|
2141
2141
|
], children: jsxRuntimeExports.jsx(reactNative.ActivityIndicator, { size: "small", color: theme.primary }) }));
|
|
2142
2142
|
};
|
|
2143
|
-
var styles$
|
|
2143
|
+
var styles$8 = reactNative.StyleSheet.create({
|
|
2144
2144
|
container: {
|
|
2145
2145
|
width: '100%',
|
|
2146
2146
|
height: '100%',
|
|
@@ -2235,8 +2235,8 @@ var ProgressiveImage = function (_a) {
|
|
|
2235
2235
|
: {
|
|
2236
2236
|
tintColor: isDesaturated ? desaturatedColor : undefined,
|
|
2237
2237
|
};
|
|
2238
|
-
return (jsxRuntimeExports.jsxs(reactNative.View, { style: [styles$
|
|
2239
|
-
styles$
|
|
2238
|
+
return (jsxRuntimeExports.jsxs(reactNative.View, { style: [styles$7.container, style, { backgroundColor: backgroundColor }], children: [jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
|
|
2239
|
+
styles$7.imageOverlay,
|
|
2240
2240
|
{
|
|
2241
2241
|
backgroundColor: backgroundColor,
|
|
2242
2242
|
opacity: imageAnimated.interpolate({
|
|
@@ -2245,11 +2245,11 @@ var ProgressiveImage = function (_a) {
|
|
|
2245
2245
|
}),
|
|
2246
2246
|
},
|
|
2247
2247
|
] }), jsxRuntimeExports.jsx(reactNative.Animated.Image, __assign({}, props, { source: source, style: [
|
|
2248
|
-
styles$
|
|
2248
|
+
styles$7.imageOverlay,
|
|
2249
2249
|
__assign({ opacity: imageAnimated }, desaturationStyle),
|
|
2250
2250
|
], onLoad: onImageLoad, accessibilityLabel: alt }))] }));
|
|
2251
2251
|
};
|
|
2252
|
-
var styles$
|
|
2252
|
+
var styles$7 = reactNative.StyleSheet.create({
|
|
2253
2253
|
imageOverlay: {
|
|
2254
2254
|
position: 'absolute',
|
|
2255
2255
|
left: 0,
|
|
@@ -2478,7 +2478,7 @@ var BaseBanner = function (_a) {
|
|
|
2478
2478
|
return (jsxRuntimeExports.jsx(BannerContext.Provider, { value: tile, children: jsxRuntimeExports.jsx(reactNative.Pressable, { testID: testID || 'banner-tile', style: function (_a) {
|
|
2479
2479
|
var pressed = _a.pressed;
|
|
2480
2480
|
return [
|
|
2481
|
-
styles$
|
|
2481
|
+
styles$6.container,
|
|
2482
2482
|
style,
|
|
2483
2483
|
{
|
|
2484
2484
|
backgroundColor: theme.surface,
|
|
@@ -2489,7 +2489,7 @@ var BaseBanner = function (_a) {
|
|
|
2489
2489
|
}, onPress: hasCTA ? undefined : handlePress, disabled: !ctaLink || hasCTA, accessible: true, role: hasCTA ? 'article' : 'button', accessibilityLabel: accessibilityLabel ||
|
|
2490
2490
|
"".concat(title).concat(!hasCTA && ctaLink ? ' - Click to open' : ''), children: children }) }));
|
|
2491
2491
|
};
|
|
2492
|
-
var styles$
|
|
2492
|
+
var styles$6 = reactNative.StyleSheet.create({
|
|
2493
2493
|
container: {
|
|
2494
2494
|
width: '100%',
|
|
2495
2495
|
maxWidth: MAX_WIDTH,
|
|
@@ -2797,9 +2797,9 @@ var Indicator = function () {
|
|
|
2797
2797
|
return 'Tablet Layout';
|
|
2798
2798
|
return 'Mobile Layout';
|
|
2799
2799
|
};
|
|
2800
|
-
return (jsxRuntimeExports.jsx(reactNative.View, { style: styles$
|
|
2800
|
+
return (jsxRuntimeExports.jsx(reactNative.View, { style: styles$5.indicator, children: jsxRuntimeExports.jsx(reactNative.Text, { style: styles$5.indicatorText, children: getCurrentLayout() }) }));
|
|
2801
2801
|
};
|
|
2802
|
-
var styles$
|
|
2802
|
+
var styles$5 = reactNative.StyleSheet.create({
|
|
2803
2803
|
indicator: {
|
|
2804
2804
|
position: 'absolute',
|
|
2805
2805
|
top: 10,
|
|
@@ -2843,7 +2843,7 @@ var SkeletonTile = function (_a) {
|
|
|
2843
2843
|
outputRange: [0.3, 0.7],
|
|
2844
2844
|
});
|
|
2845
2845
|
return (jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
|
|
2846
|
-
styles$
|
|
2846
|
+
styles$4.container,
|
|
2847
2847
|
{
|
|
2848
2848
|
opacity: opacity,
|
|
2849
2849
|
backgroundColor: theme.alphaDerivedText[20],
|
|
@@ -2852,7 +2852,7 @@ var SkeletonTile = function (_a) {
|
|
|
2852
2852
|
style,
|
|
2853
2853
|
] }));
|
|
2854
2854
|
};
|
|
2855
|
-
var styles$
|
|
2855
|
+
var styles$4 = reactNative.StyleSheet.create({
|
|
2856
2856
|
container: {
|
|
2857
2857
|
aspectRatio: 1,
|
|
2858
2858
|
overflow: 'hidden',
|
|
@@ -2885,24 +2885,24 @@ var Skeleton = function (_a) {
|
|
|
2885
2885
|
outputRange: [0.3, 0.7],
|
|
2886
2886
|
});
|
|
2887
2887
|
return (jsxRuntimeExports.jsxs(reactNative.View, { testID: "loading-skeleton", children: [jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
|
|
2888
|
-
styles$
|
|
2889
|
-
styles$
|
|
2888
|
+
styles$3.skeleton,
|
|
2889
|
+
styles$3.title,
|
|
2890
2890
|
{
|
|
2891
2891
|
opacity: opacity,
|
|
2892
2892
|
backgroundColor: theme.alphaDerivedText[20],
|
|
2893
2893
|
borderRadius: 6,
|
|
2894
2894
|
},
|
|
2895
2895
|
] }), jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
|
|
2896
|
-
styles$
|
|
2897
|
-
styles$
|
|
2896
|
+
styles$3.skeleton,
|
|
2897
|
+
styles$3.body,
|
|
2898
2898
|
{
|
|
2899
2899
|
opacity: opacity,
|
|
2900
2900
|
backgroundColor: theme.alphaDerivedText[20],
|
|
2901
2901
|
borderRadius: 6,
|
|
2902
2902
|
},
|
|
2903
|
-
] }), jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [styles$
|
|
2903
|
+
] }), jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [styles$3.container, style], children: Array.from({ length: numberOfSquares }).map(function (_, index) { return (jsxRuntimeExports.jsx(SkeletonTile, {}, index)); }) })] }));
|
|
2904
2904
|
};
|
|
2905
|
-
var styles$
|
|
2905
|
+
var styles$3 = reactNative.StyleSheet.create({
|
|
2906
2906
|
container: {
|
|
2907
2907
|
flexDirection: 'row',
|
|
2908
2908
|
flexWrap: 'wrap',
|
|
@@ -3705,9 +3705,9 @@ var Grid = function (_a) {
|
|
|
3705
3705
|
});
|
|
3706
3706
|
return tileContainers;
|
|
3707
3707
|
}, [gridTiles, columnsPerRow, getTileWidth]);
|
|
3708
|
-
return (jsxRuntimeExports.jsxs(reactNative.View, { children: [jsxRuntimeExports.jsx(SectionHeader, { title: section.title, description: section.description }), jsxRuntimeExports.jsx(reactNative.View, { style: styles$
|
|
3708
|
+
return (jsxRuntimeExports.jsxs(reactNative.View, { children: [jsxRuntimeExports.jsx(SectionHeader, { title: section.title, description: section.description }), jsxRuntimeExports.jsx(reactNative.View, { style: styles$2.grid, children: renderTileContainers() })] }));
|
|
3709
3709
|
};
|
|
3710
|
-
var styles$
|
|
3710
|
+
var styles$2 = reactNative.StyleSheet.create({
|
|
3711
3711
|
grid: {
|
|
3712
3712
|
flexDirection: 'row',
|
|
3713
3713
|
flexWrap: 'wrap',
|
|
@@ -3727,8 +3727,8 @@ var ProgressIndicator = function (_a) {
|
|
|
3727
3727
|
else if (percentage < 50) {
|
|
3728
3728
|
progressVariant = 'accent';
|
|
3729
3729
|
}
|
|
3730
|
-
return (jsxRuntimeExports.jsxs(reactNative.View, { style: styles$
|
|
3731
|
-
styles$
|
|
3730
|
+
return (jsxRuntimeExports.jsxs(reactNative.View, { style: styles$1.container, children: [jsxRuntimeExports.jsx(ProgressBar, { percentage: percentage, variant: progressVariant, height: height }), jsxRuntimeExports.jsx(reactNative.View, { style: [styles$1.circleContainer], children: jsxRuntimeExports.jsx(reactNative.View, { style: [
|
|
3731
|
+
styles$1.circle,
|
|
3732
3732
|
{
|
|
3733
3733
|
borderColor: theme.derivedSurface[20],
|
|
3734
3734
|
backgroundColor: isComplete ? theme.primary : theme.surface,
|
|
@@ -3736,7 +3736,7 @@ var ProgressIndicator = function (_a) {
|
|
|
3736
3736
|
},
|
|
3737
3737
|
], children: isComplete && (jsxRuntimeExports.jsx(Icon, { name: "Check", size: 12, color: theme.primaryText })) }) })] }));
|
|
3738
3738
|
};
|
|
3739
|
-
var styles$
|
|
3739
|
+
var styles$1 = reactNative.StyleSheet.create({
|
|
3740
3740
|
container: {
|
|
3741
3741
|
width: '100%',
|
|
3742
3742
|
flexDirection: 'row',
|
|
@@ -3767,7 +3767,7 @@ var useSectionStyles = function () {
|
|
|
3767
3767
|
var _a = useResponsive$1(), isDesktop = _a.isDesktop, isTablet = _a.isTablet;
|
|
3768
3768
|
var theme = useWllSdk().theme;
|
|
3769
3769
|
return reactNative.StyleSheet.create({
|
|
3770
|
-
section: __assign({ width: '100%', maxWidth: MAX_WIDTH, marginHorizontal: 'auto', marginBottom: useResponsiveValue(theme.sizes.xxxxxl, theme.sizes.xxxxl, isDesktop, isTablet) }, (IS_WEB ? {} : { paddingHorizontal: GRID_GAP })),
|
|
3770
|
+
section: __assign({ width: '100%', maxWidth: IS_WEB ? MAX_WIDTH : MAX_WIDTH - GRID_GAP * 2, marginHorizontal: 'auto', marginBottom: useResponsiveValue(theme.sizes.xxxxxl, theme.sizes.xxxxl, isDesktop, isTablet) }, (IS_WEB ? {} : { paddingHorizontal: GRID_GAP })),
|
|
3771
3771
|
});
|
|
3772
3772
|
};
|
|
3773
3773
|
|
|
@@ -3983,7 +3983,7 @@ var GroupSections = function () {
|
|
|
3983
3983
|
}
|
|
3984
3984
|
var sortedSections = sortByPriority(activeSections);
|
|
3985
3985
|
var Container = IS_WEB ? reactNative.View : reactNative.ScrollView;
|
|
3986
|
-
return (jsxRuntimeExports.jsx(Container, { accessible: true, accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'),
|
|
3986
|
+
return (jsxRuntimeExports.jsx(Container, { accessible: true, accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'), children: sortedSections.map(function (section) { return (jsxRuntimeExports.jsx(Section, { section: section }, section.id)); }) }));
|
|
3987
3987
|
};
|
|
3988
3988
|
/**
|
|
3989
3989
|
* A page-level component that represents a Group view in the application.
|
|
@@ -4012,9 +4012,6 @@ var Group = function (_a) {
|
|
|
4012
4012
|
}
|
|
4013
4013
|
return (jsxRuntimeExports.jsx(GroupContext.Provider, { value: { groupData: groupData }, children: jsxRuntimeExports.jsx(reactNative.View, { "data-testid": "group-container", children: jsxRuntimeExports.jsx(GroupSections, {}) }) }));
|
|
4014
4014
|
};
|
|
4015
|
-
var styles$1 = reactNative.StyleSheet.create({
|
|
4016
|
-
container: __assign({}, (IS_WEB ? {} : { padding: GRID_GAP })),
|
|
4017
|
-
});
|
|
4018
4015
|
|
|
4019
4016
|
/**
|
|
4020
4017
|
* Cleans up a number by removing any whitespace and ensuring it's a valid number
|