@wlloyalty/wll-react-sdk 1.0.44 → 1.0.45
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/index.d.ts +24 -61
- package/dist/index.js +91 -208
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as React$1 from 'react';
|
|
|
2
2
|
import React__default, { ReactNode } from 'react';
|
|
3
3
|
import * as LucideIcons from 'lucide-react';
|
|
4
4
|
import * as react_native from 'react-native';
|
|
5
|
-
import { ImageSourcePropType, StyleProp, ViewStyle,
|
|
5
|
+
import { ImageSourcePropType, StyleProp, ViewStyle, TextProps as TextProps$1, TextStyle, ImageProps } from 'react-native';
|
|
6
6
|
|
|
7
7
|
declare const sizes: {
|
|
8
8
|
readonly borderRadiusSm: 15;
|
|
@@ -99,12 +99,6 @@ type ProgressiveImageProps = {
|
|
|
99
99
|
};
|
|
100
100
|
declare const ProgressiveImage: ({ source, style, isDesaturated, ...props }: ProgressiveImageProps) => JSX.Element;
|
|
101
101
|
|
|
102
|
-
type RowHeaderProps = {
|
|
103
|
-
children: React$1.ReactNode;
|
|
104
|
-
className?: string;
|
|
105
|
-
} & React$1.ComponentProps<typeof View>;
|
|
106
|
-
declare const RowHeader: ({ children, style, ...props }: RowHeaderProps) => JSX.Element;
|
|
107
|
-
|
|
108
102
|
type TextVariant = 'eyebrow' | 'title' | 'description' | 'body' | 'caption' | 'label' | 'tier-requirement' | 'tier-earned';
|
|
109
103
|
type TextProps = TextProps$1 & {
|
|
110
104
|
variant?: TextVariant;
|
|
@@ -383,38 +377,6 @@ type TileContainerProps = {
|
|
|
383
377
|
*/
|
|
384
378
|
declare const TileContainer: ({ tiles }: TileContainerProps) => JSX.Element;
|
|
385
379
|
|
|
386
|
-
type ImagePropsNoSource = Omit<ImageProps, 'source'>;
|
|
387
|
-
type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
|
|
388
|
-
type Justify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
|
|
389
|
-
type Align = 'start' | 'end' | 'center' | 'stretch' | 'baseline';
|
|
390
|
-
type LayoutProps = {
|
|
391
|
-
children: React.ReactNode;
|
|
392
|
-
justify?: Justify;
|
|
393
|
-
align?: Align;
|
|
394
|
-
direction?: FlexDirection;
|
|
395
|
-
style?: ViewStyle;
|
|
396
|
-
};
|
|
397
|
-
declare const justifyMap: Record<Justify, ViewStyle['justifyContent']>;
|
|
398
|
-
declare const alignMap: Record<Align, ViewStyle['alignItems']>;
|
|
399
|
-
|
|
400
|
-
type FlexProps = {
|
|
401
|
-
justify?: Justify;
|
|
402
|
-
align?: Align;
|
|
403
|
-
style?: ViewStyle;
|
|
404
|
-
};
|
|
405
|
-
type ColumnLayoutProps = FlexProps & {
|
|
406
|
-
children?: React__default.ReactNode;
|
|
407
|
-
};
|
|
408
|
-
/**
|
|
409
|
-
* A Column layout component that arranges its children in a vertical stack.
|
|
410
|
-
*
|
|
411
|
-
* @param children - The child components to render inside the column.
|
|
412
|
-
* @param justify - Defines how children are aligned along the main axis.
|
|
413
|
-
* @param align - Defines how children are aligned along the cross axis.
|
|
414
|
-
* @param style - Additional styles to apply to the container.
|
|
415
|
-
*/
|
|
416
|
-
declare const Column: React__default.MemoExoticComponent<({ children, justify, align, style, }: ColumnLayoutProps) => JSX.Element>;
|
|
417
|
-
|
|
418
380
|
/**
|
|
419
381
|
* Props for the FlexBox component.
|
|
420
382
|
*
|
|
@@ -433,16 +395,28 @@ type FlexBoxProps = {
|
|
|
433
395
|
*/
|
|
434
396
|
declare const FlexBox: ({ children, style }: FlexBoxProps) => JSX.Element;
|
|
435
397
|
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
398
|
+
type ImagePropsNoSource = Omit<ImageProps, 'source'>;
|
|
399
|
+
type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
|
|
400
|
+
type Justify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
|
|
401
|
+
type Align = 'start' | 'end' | 'center' | 'stretch' | 'baseline';
|
|
402
|
+
type LayoutProps$1 = {
|
|
403
|
+
children: React.ReactNode;
|
|
404
|
+
justify?: Justify;
|
|
405
|
+
align?: Align;
|
|
406
|
+
direction?: FlexDirection;
|
|
407
|
+
style?: ViewStyle;
|
|
408
|
+
};
|
|
409
|
+
declare const justifyMap: Record<Justify, ViewStyle['justifyContent']>;
|
|
410
|
+
declare const alignMap: Record<Align, ViewStyle['alignItems']>;
|
|
411
|
+
|
|
412
|
+
type LayoutProps = {
|
|
413
|
+
children: React$1.ReactNode;
|
|
414
|
+
justify?: Justify;
|
|
415
|
+
align?: Align;
|
|
416
|
+
direction?: FlexDirection;
|
|
417
|
+
style?: ViewStyle;
|
|
418
|
+
};
|
|
419
|
+
declare const Layout: ({ children, justify, align, direction, style, }: LayoutProps) => JSX.Element;
|
|
446
420
|
|
|
447
421
|
/**
|
|
448
422
|
* Props for the Spacer component.
|
|
@@ -460,17 +434,6 @@ type SpacerProps = {
|
|
|
460
434
|
*/
|
|
461
435
|
declare const Spacer: ({ style }: SpacerProps) => JSX.Element;
|
|
462
436
|
|
|
463
|
-
/**
|
|
464
|
-
* A Stack layout component that arranges its children in a flexible stack.
|
|
465
|
-
*
|
|
466
|
-
* @param children - The child components to render inside the stack.
|
|
467
|
-
* @param justify - Defines how children are aligned along the main axis.
|
|
468
|
-
* @param align - Defines how children are aligned along the cross axis.
|
|
469
|
-
* @param direction - The flex direction for the stack (default is 'column').
|
|
470
|
-
* @param style - Additional styles to apply to the container.
|
|
471
|
-
*/
|
|
472
|
-
declare const Stack: ({ children, justify, align, direction, style, }: LayoutProps) => JSX.Element;
|
|
473
|
-
|
|
474
437
|
declare enum SectionType {
|
|
475
438
|
Grid = "GRID",
|
|
476
439
|
Banner = "BANNER"
|
|
@@ -641,4 +604,4 @@ type WllSdkProviderProps = {
|
|
|
641
604
|
declare const WllSdkProvider: ({ children, theme: providedTheme, config, navigationConfig, }: WllSdkProviderProps) => JSX.Element;
|
|
642
605
|
declare const useWllSdk: () => WllSdkContextType;
|
|
643
606
|
|
|
644
|
-
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,
|
|
607
|
+
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, _default$3 as ContentTile, ContentTileConfig, type DerivedProperties, FlexBox, type FlexDirection, Grid, Group, Icon, type ImagePropsNoSource, Indicator, type Justify, Layout, type LayoutProps$1 as LayoutProps, LoadingIndicator, type NavigationConfig, type NavigationType, _default$2 as PointsTile, PointsTileConfig, type ProgessType, ProgressBar, ProgressIndicator, ProgressType, ProgressiveImage, Reward, type RewardCategory, _default$1 as RewardCategoryTile, RewardCategoryTileConfig, _default as RewardTile, RewardTileConfig, 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, TileType, type Variant, WllSdkProvider, alignMap, justifyMap, useWllSdk };
|
package/dist/index.js
CHANGED
|
@@ -18198,27 +18198,6 @@ var styles$8 = StyleSheet$1.create({
|
|
|
18198
18198
|
}
|
|
18199
18199
|
});
|
|
18200
18200
|
|
|
18201
|
-
var RowHeader = function (_a) {
|
|
18202
|
-
var children = _a.children,
|
|
18203
|
-
style = _a.style,
|
|
18204
|
-
props = __rest(_a, ["children", "style"]);
|
|
18205
|
-
var _b = useResponsive$1(),
|
|
18206
|
-
isDesktop = _b.isDesktop,
|
|
18207
|
-
isTablet = _b.isTablet;
|
|
18208
|
-
var theme = useWllSdk().theme;
|
|
18209
|
-
var dynamicStyles = StyleSheet$1.create({
|
|
18210
|
-
header: {
|
|
18211
|
-
flexDirection: 'row',
|
|
18212
|
-
alignItems: 'center',
|
|
18213
|
-
justifyContent: 'space-between',
|
|
18214
|
-
marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
|
|
18215
|
-
}
|
|
18216
|
-
});
|
|
18217
|
-
return /*#__PURE__*/React__namespace.createElement(View$2, _extends({
|
|
18218
|
-
style: [dynamicStyles.header, style]
|
|
18219
|
-
}, props), children);
|
|
18220
|
-
};
|
|
18221
|
-
|
|
18222
18201
|
var Text = function (_a) {
|
|
18223
18202
|
var _b = _a.variant,
|
|
18224
18203
|
variant = _b === void 0 ? 'body' : _b,
|
|
@@ -19681,7 +19660,7 @@ var BadgeTileRoot = function (_a) {
|
|
|
19681
19660
|
if (!tile) return null;
|
|
19682
19661
|
return /*#__PURE__*/React.createElement(BaseTile, {
|
|
19683
19662
|
tile: tile
|
|
19684
|
-
}, /*#__PURE__*/React.createElement(BadgeTile.Media, null, /*#__PURE__*/React.createElement(BadgeTile.Status, null)), /*#__PURE__*/React.createElement(
|
|
19663
|
+
}, /*#__PURE__*/React.createElement(BadgeTile.Media, null, /*#__PURE__*/React.createElement(BadgeTile.Status, null)), /*#__PURE__*/React.createElement(Layout, {
|
|
19685
19664
|
justify: "between",
|
|
19686
19665
|
align: "start"
|
|
19687
19666
|
}, /*#__PURE__*/React.createElement(BadgeTile.Title, null), /*#__PURE__*/React.createElement(BadgeTile.Description, null), /*#__PURE__*/React.createElement(Spacer, null), /*#__PURE__*/React.createElement(BadgeTile.DateEarned, null)));
|
|
@@ -19813,15 +19792,13 @@ var isArtworkOnly$1 = function (configuration) {
|
|
|
19813
19792
|
var BannerTileRoot = function (_a) {
|
|
19814
19793
|
var tile = _a.tile;
|
|
19815
19794
|
if (!tile) return null;
|
|
19816
|
-
|
|
19795
|
+
useBannerTileStyles();
|
|
19817
19796
|
var configuration = tile.configuration;
|
|
19818
19797
|
return /*#__PURE__*/React.createElement(BaseBanner, {
|
|
19819
19798
|
tile: tile
|
|
19820
19799
|
}, /*#__PURE__*/React.createElement(BannerTile.Media, {
|
|
19821
19800
|
isArtworkOnly: isArtworkOnly$1(configuration)
|
|
19822
|
-
}), /*#__PURE__*/React.createElement(
|
|
19823
|
-
style: styles.slideContent
|
|
19824
|
-
}, /*#__PURE__*/React.createElement(BannerTile.Title, null), /*#__PURE__*/React.createElement(BannerTile.Description, null), /*#__PURE__*/React.createElement(BannerTile.CTA, null)));
|
|
19801
|
+
}), /*#__PURE__*/React.createElement(FlexBox, null, /*#__PURE__*/React.createElement(BannerTile.Title, null), /*#__PURE__*/React.createElement(BannerTile.Description, null), /*#__PURE__*/React.createElement(BannerTile.CTA, null)));
|
|
19825
19802
|
};
|
|
19826
19803
|
/**
|
|
19827
19804
|
* The BannerTile component with subcomponents attached.
|
|
@@ -20626,7 +20603,6 @@ var usePointsTileStyles = function (isFullSize) {
|
|
|
20626
20603
|
justifyContent: 'space-between'
|
|
20627
20604
|
},
|
|
20628
20605
|
contentContainer: {
|
|
20629
|
-
flexDirection: 'column',
|
|
20630
20606
|
width: isFullSize ? '100%' : 'auto'
|
|
20631
20607
|
},
|
|
20632
20608
|
suffix: {
|
|
@@ -20671,7 +20647,9 @@ var PointsTileFormattedPoints = function () {
|
|
|
20671
20647
|
var calculatedPoints = points * multiplier;
|
|
20672
20648
|
return /*#__PURE__*/React.createElement(Text, {
|
|
20673
20649
|
variant: "caption"
|
|
20674
|
-
}, pointsPrefix, /*#__PURE__*/React.createElement(
|
|
20650
|
+
}, pointsPrefix, /*#__PURE__*/React.createElement(Layout, {
|
|
20651
|
+
direction: "row"
|
|
20652
|
+
}, calculatedPoints, /*#__PURE__*/React.createElement(Text, {
|
|
20675
20653
|
style: styles.suffix
|
|
20676
20654
|
}, pointsSuffix)));
|
|
20677
20655
|
};
|
|
@@ -20719,7 +20697,7 @@ var PointsTileRoot = function (_a) {
|
|
|
20719
20697
|
style: styles.container
|
|
20720
20698
|
}, !isFullSize && /*#__PURE__*/React.createElement(PointsTile.Media, {
|
|
20721
20699
|
isFullSize: false
|
|
20722
|
-
}), /*#__PURE__*/React.createElement(
|
|
20700
|
+
}), /*#__PURE__*/React.createElement(Layout, {
|
|
20723
20701
|
style: styles.contentContainer
|
|
20724
20702
|
}, /*#__PURE__*/React.createElement(PointsTile.Title, null), /*#__PURE__*/React.createElement(PointsTile.Points, null))));
|
|
20725
20703
|
};
|
|
@@ -20964,7 +20942,8 @@ var RewardTileRoot = function (_a) {
|
|
|
20964
20942
|
tile: tile
|
|
20965
20943
|
}, /*#__PURE__*/React.createElement(RewardTile.Media, {
|
|
20966
20944
|
isArtworkOnly: isArtworkOnly(configuration)
|
|
20967
|
-
}), /*#__PURE__*/React.createElement(
|
|
20945
|
+
}), /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Layout, {
|
|
20946
|
+
direction: "row",
|
|
20968
20947
|
justify: "between",
|
|
20969
20948
|
align: "center",
|
|
20970
20949
|
style: styles.header
|
|
@@ -20982,169 +20961,6 @@ var RewardTile = Object.assign(RewardTileRoot, {
|
|
|
20982
20961
|
});
|
|
20983
20962
|
var RewardTile$1 = withTileFetching(RewardTile);
|
|
20984
20963
|
|
|
20985
|
-
var justifyMap = {
|
|
20986
|
-
start: 'flex-start',
|
|
20987
|
-
end: 'flex-end',
|
|
20988
|
-
center: 'center',
|
|
20989
|
-
between: 'space-between',
|
|
20990
|
-
around: 'space-around',
|
|
20991
|
-
evenly: 'space-evenly'
|
|
20992
|
-
};
|
|
20993
|
-
var alignMap = {
|
|
20994
|
-
start: 'flex-start',
|
|
20995
|
-
end: 'flex-end',
|
|
20996
|
-
center: 'center',
|
|
20997
|
-
stretch: 'stretch',
|
|
20998
|
-
baseline: 'baseline'
|
|
20999
|
-
};
|
|
21000
|
-
|
|
21001
|
-
/**
|
|
21002
|
-
* A Column layout component that arranges its children in a vertical stack.
|
|
21003
|
-
*
|
|
21004
|
-
* @param children - The child components to render inside the column.
|
|
21005
|
-
* @param justify - Defines how children are aligned along the main axis.
|
|
21006
|
-
* @param align - Defines how children are aligned along the cross axis.
|
|
21007
|
-
* @param style - Additional styles to apply to the container.
|
|
21008
|
-
*/
|
|
21009
|
-
var Column = /*#__PURE__*/React.memo(function (_a) {
|
|
21010
|
-
var _b, _c;
|
|
21011
|
-
var children = _a.children,
|
|
21012
|
-
_d = _a.justify,
|
|
21013
|
-
justify = _d === void 0 ? 'start' : _d,
|
|
21014
|
-
_e = _a.align,
|
|
21015
|
-
align = _e === void 0 ? 'stretch' : _e,
|
|
21016
|
-
style = _a.style;
|
|
21017
|
-
var _f = useResponsive$1(),
|
|
21018
|
-
isDesktop = _f.isDesktop,
|
|
21019
|
-
isTablet = _f.isTablet;
|
|
21020
|
-
var theme = useWllSdk().theme;
|
|
21021
|
-
var spacing = useResponsiveValue((_b = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _b === void 0 ? void 0 : _b.sm, (_c = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _c === void 0 ? void 0 : _c.xxxs, isDesktop, isTablet);
|
|
21022
|
-
return /*#__PURE__*/React.createElement(View$2, {
|
|
21023
|
-
style: [{
|
|
21024
|
-
flex: 1,
|
|
21025
|
-
flexDirection: 'column',
|
|
21026
|
-
justifyContent: justifyMap[justify],
|
|
21027
|
-
alignItems: alignMap[align],
|
|
21028
|
-
paddingHorizontal: spacing,
|
|
21029
|
-
paddingBottom: spacing
|
|
21030
|
-
}, style]
|
|
21031
|
-
}, children);
|
|
21032
|
-
});
|
|
21033
|
-
|
|
21034
|
-
/**
|
|
21035
|
-
* A FlexBox component that provides a flexible container with `flex: 1`.
|
|
21036
|
-
*
|
|
21037
|
-
* This component is commonly used to create a full-flex container that expands
|
|
21038
|
-
* to fill available space in a layout.
|
|
21039
|
-
*/
|
|
21040
|
-
var FlexBox = function (_a) {
|
|
21041
|
-
var children = _a.children,
|
|
21042
|
-
style = _a.style;
|
|
21043
|
-
return /*#__PURE__*/React.createElement(View$2, {
|
|
21044
|
-
style: [{
|
|
21045
|
-
flex: 1
|
|
21046
|
-
}, style]
|
|
21047
|
-
}, children);
|
|
21048
|
-
};
|
|
21049
|
-
|
|
21050
|
-
var Layout = function (_a) {
|
|
21051
|
-
var children = _a.children,
|
|
21052
|
-
_b = _a.justify,
|
|
21053
|
-
justify = _b === void 0 ? 'start' : _b,
|
|
21054
|
-
_c = _a.align,
|
|
21055
|
-
align = _c === void 0 ? 'stretch' : _c,
|
|
21056
|
-
_d = _a.direction,
|
|
21057
|
-
direction = _d === void 0 ? 'column' : _d,
|
|
21058
|
-
_e = _a.style,
|
|
21059
|
-
style = _e === void 0 ? {} : _e;
|
|
21060
|
-
var theme = useWllSdk().theme;
|
|
21061
|
-
var _f = useResponsive$1(),
|
|
21062
|
-
isDesktop = _f.isDesktop,
|
|
21063
|
-
isTablet = _f.isTablet;
|
|
21064
|
-
var dynamicStyles = StyleSheet$1.create({
|
|
21065
|
-
column: {
|
|
21066
|
-
flex: 1,
|
|
21067
|
-
paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
|
|
21068
|
-
paddingBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
|
|
21069
|
-
justifyContent: justifyMap[justify],
|
|
21070
|
-
alignItems: alignMap[align],
|
|
21071
|
-
flexDirection: direction
|
|
21072
|
-
}
|
|
21073
|
-
});
|
|
21074
|
-
return /*#__PURE__*/React__namespace.createElement(View$2, {
|
|
21075
|
-
style: [dynamicStyles.column, style]
|
|
21076
|
-
}, children);
|
|
21077
|
-
};
|
|
21078
|
-
|
|
21079
|
-
/**
|
|
21080
|
-
* A Row layout component that arranges its children in a horizontal stack.
|
|
21081
|
-
*
|
|
21082
|
-
* @param children - The child components to render inside the row.
|
|
21083
|
-
* @param justify - Defines how children are aligned along the main axis (horizontal).
|
|
21084
|
-
* @param align - Defines how children are aligned along the cross axis (vertical).
|
|
21085
|
-
* @param direction - The flex direction for the row (default is 'row').
|
|
21086
|
-
* @param style - Additional styles to apply to the container.
|
|
21087
|
-
*/
|
|
21088
|
-
var Row = function (_a) {
|
|
21089
|
-
var children = _a.children,
|
|
21090
|
-
_b = _a.justify,
|
|
21091
|
-
justify = _b === void 0 ? 'start' : _b,
|
|
21092
|
-
_c = _a.align,
|
|
21093
|
-
align = _c === void 0 ? 'center' : _c,
|
|
21094
|
-
_d = _a.direction,
|
|
21095
|
-
direction = _d === void 0 ? 'row' : _d,
|
|
21096
|
-
style = _a.style;
|
|
21097
|
-
return /*#__PURE__*/React.createElement(View$2, {
|
|
21098
|
-
style: [{
|
|
21099
|
-
flexDirection: direction,
|
|
21100
|
-
justifyContent: justifyMap[justify],
|
|
21101
|
-
alignItems: alignMap[align]
|
|
21102
|
-
}, style]
|
|
21103
|
-
}, children);
|
|
21104
|
-
};
|
|
21105
|
-
|
|
21106
|
-
/**
|
|
21107
|
-
* A simple Spacer component that creates flexible space in layouts.
|
|
21108
|
-
*
|
|
21109
|
-
* The Spacer is commonly used in flexbox layouts to create adjustable empty space
|
|
21110
|
-
* between child elements, avoiding the need for explicit margins or padding.
|
|
21111
|
-
*/
|
|
21112
|
-
var Spacer = function (_a) {
|
|
21113
|
-
var style = _a.style;
|
|
21114
|
-
return /*#__PURE__*/React.createElement(View$2, {
|
|
21115
|
-
style: [{
|
|
21116
|
-
flex: 1
|
|
21117
|
-
}, style]
|
|
21118
|
-
});
|
|
21119
|
-
};
|
|
21120
|
-
|
|
21121
|
-
/**
|
|
21122
|
-
* A Stack layout component that arranges its children in a flexible stack.
|
|
21123
|
-
*
|
|
21124
|
-
* @param children - The child components to render inside the stack.
|
|
21125
|
-
* @param justify - Defines how children are aligned along the main axis.
|
|
21126
|
-
* @param align - Defines how children are aligned along the cross axis.
|
|
21127
|
-
* @param direction - The flex direction for the stack (default is 'column').
|
|
21128
|
-
* @param style - Additional styles to apply to the container.
|
|
21129
|
-
*/
|
|
21130
|
-
var Stack = function (_a) {
|
|
21131
|
-
var children = _a.children,
|
|
21132
|
-
_b = _a.justify,
|
|
21133
|
-
justify = _b === void 0 ? 'start' : _b,
|
|
21134
|
-
_c = _a.align,
|
|
21135
|
-
align = _c === void 0 ? 'stretch' : _c,
|
|
21136
|
-
_d = _a.direction,
|
|
21137
|
-
direction = _d === void 0 ? 'column' : _d,
|
|
21138
|
-
style = _a.style;
|
|
21139
|
-
return /*#__PURE__*/React.createElement(View$2, {
|
|
21140
|
-
style: [{
|
|
21141
|
-
flexDirection: direction,
|
|
21142
|
-
justifyContent: justifyMap[justify],
|
|
21143
|
-
alignItems: alignMap[align]
|
|
21144
|
-
}, style]
|
|
21145
|
-
}, children);
|
|
21146
|
-
};
|
|
21147
|
-
|
|
21148
20964
|
var useTierTileStyles = function () {
|
|
21149
20965
|
var _a = useResponsive$1(),
|
|
21150
20966
|
isDesktop = _a.isDesktop,
|
|
@@ -21227,8 +21043,7 @@ var TierTileFull = function (_a) {
|
|
|
21227
21043
|
resizeMode: "center"
|
|
21228
21044
|
})), /*#__PURE__*/React__namespace.createElement(Layout, {
|
|
21229
21045
|
align: "stretch",
|
|
21230
|
-
justify: artworkUrl ? 'start' : 'center'
|
|
21231
|
-
direction: "column"
|
|
21046
|
+
justify: artworkUrl ? 'start' : 'center'
|
|
21232
21047
|
}, /*#__PURE__*/React__namespace.createElement(View$2, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
|
|
21233
21048
|
variant: "eyebrow",
|
|
21234
21049
|
style: styles.title
|
|
@@ -21299,16 +21114,12 @@ var TierTileEmpty = function (_a) {
|
|
|
21299
21114
|
style: {
|
|
21300
21115
|
paddingTop: 16
|
|
21301
21116
|
}
|
|
21302
|
-
}, /*#__PURE__*/React__namespace.createElement(
|
|
21303
|
-
style: {
|
|
21304
|
-
flex: 1
|
|
21305
|
-
}
|
|
21306
|
-
}, title && /*#__PURE__*/React__namespace.createElement(Text, {
|
|
21117
|
+
}, /*#__PURE__*/React__namespace.createElement(FlexBox, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
|
|
21307
21118
|
variant: "title",
|
|
21308
21119
|
style: styles.title
|
|
21309
21120
|
}, title), emptyDescription && /*#__PURE__*/React__namespace.createElement(Text, {
|
|
21310
21121
|
variant: "body"
|
|
21311
|
-
}, emptyDescription)), emptyArtworkUrl && /*#__PURE__*/React__namespace.createElement(
|
|
21122
|
+
}, emptyDescription)), emptyArtworkUrl && /*#__PURE__*/React__namespace.createElement(View$2, {
|
|
21312
21123
|
style: styles.smallImageContainer
|
|
21313
21124
|
}, /*#__PURE__*/React__namespace.createElement(Image$2, {
|
|
21314
21125
|
source: {
|
|
@@ -21330,9 +21141,8 @@ var TierTileEmpty = function (_a) {
|
|
|
21330
21141
|
resizeMode: "center"
|
|
21331
21142
|
})), /*#__PURE__*/React__namespace.createElement(Layout, {
|
|
21332
21143
|
align: "stretch",
|
|
21333
|
-
justify: "center"
|
|
21334
|
-
|
|
21335
|
-
}, /*#__PURE__*/React__namespace.createElement(Column, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
|
|
21144
|
+
justify: "center"
|
|
21145
|
+
}, /*#__PURE__*/React__namespace.createElement(Layout, null, title && /*#__PURE__*/React__namespace.createElement(Text, {
|
|
21336
21146
|
variant: "title",
|
|
21337
21147
|
style: styles.title
|
|
21338
21148
|
}, title), emptyDescription && /*#__PURE__*/React__namespace.createElement(Text, {
|
|
@@ -21382,6 +21192,82 @@ var styles = StyleSheet$1.create({
|
|
|
21382
21192
|
}
|
|
21383
21193
|
});
|
|
21384
21194
|
|
|
21195
|
+
/**
|
|
21196
|
+
* A FlexBox component that provides a flexible container with `flex: 1`.
|
|
21197
|
+
*
|
|
21198
|
+
* This component is commonly used to create a full-flex container that expands
|
|
21199
|
+
* to fill available space in a layout.
|
|
21200
|
+
*/
|
|
21201
|
+
var FlexBox = function (_a) {
|
|
21202
|
+
var children = _a.children,
|
|
21203
|
+
style = _a.style;
|
|
21204
|
+
return /*#__PURE__*/React.createElement(View$2, {
|
|
21205
|
+
style: [{
|
|
21206
|
+
flex: 1
|
|
21207
|
+
}, style]
|
|
21208
|
+
}, children);
|
|
21209
|
+
};
|
|
21210
|
+
|
|
21211
|
+
var justifyMap = {
|
|
21212
|
+
start: 'flex-start',
|
|
21213
|
+
end: 'flex-end',
|
|
21214
|
+
center: 'center',
|
|
21215
|
+
between: 'space-between',
|
|
21216
|
+
around: 'space-around',
|
|
21217
|
+
evenly: 'space-evenly'
|
|
21218
|
+
};
|
|
21219
|
+
var alignMap = {
|
|
21220
|
+
start: 'flex-start',
|
|
21221
|
+
end: 'flex-end',
|
|
21222
|
+
center: 'center',
|
|
21223
|
+
stretch: 'stretch',
|
|
21224
|
+
baseline: 'baseline'
|
|
21225
|
+
};
|
|
21226
|
+
|
|
21227
|
+
var Layout = function (_a) {
|
|
21228
|
+
var children = _a.children,
|
|
21229
|
+
_b = _a.justify,
|
|
21230
|
+
justify = _b === void 0 ? 'start' : _b,
|
|
21231
|
+
_c = _a.align,
|
|
21232
|
+
align = _c === void 0 ? 'stretch' : _c,
|
|
21233
|
+
_d = _a.direction,
|
|
21234
|
+
direction = _d === void 0 ? 'column' : _d,
|
|
21235
|
+
_e = _a.style,
|
|
21236
|
+
style = _e === void 0 ? {} : _e;
|
|
21237
|
+
var theme = useWllSdk().theme;
|
|
21238
|
+
var _f = useResponsive$1(),
|
|
21239
|
+
isDesktop = _f.isDesktop,
|
|
21240
|
+
isTablet = _f.isTablet;
|
|
21241
|
+
var dynamicStyles = StyleSheet$1.create({
|
|
21242
|
+
column: {
|
|
21243
|
+
flex: 1,
|
|
21244
|
+
paddingHorizontal: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
|
|
21245
|
+
paddingBottom: useResponsiveValue(theme.sizes.sm, theme.sizes.xxs, isDesktop, isTablet),
|
|
21246
|
+
justifyContent: justifyMap[justify],
|
|
21247
|
+
alignItems: alignMap[align],
|
|
21248
|
+
flexDirection: direction
|
|
21249
|
+
}
|
|
21250
|
+
});
|
|
21251
|
+
return /*#__PURE__*/React__namespace.createElement(View$2, {
|
|
21252
|
+
style: [dynamicStyles.column, style]
|
|
21253
|
+
}, children);
|
|
21254
|
+
};
|
|
21255
|
+
|
|
21256
|
+
/**
|
|
21257
|
+
* A simple Spacer component that creates flexible space in layouts.
|
|
21258
|
+
*
|
|
21259
|
+
* The Spacer is commonly used in flexbox layouts to create adjustable empty space
|
|
21260
|
+
* between child elements, avoiding the need for explicit margins or padding.
|
|
21261
|
+
*/
|
|
21262
|
+
var Spacer = function (_a) {
|
|
21263
|
+
var style = _a.style;
|
|
21264
|
+
return /*#__PURE__*/React.createElement(View$2, {
|
|
21265
|
+
style: [{
|
|
21266
|
+
flex: 1
|
|
21267
|
+
}, style]
|
|
21268
|
+
});
|
|
21269
|
+
};
|
|
21270
|
+
|
|
21385
21271
|
var Reward = /** @class */function () {
|
|
21386
21272
|
function Reward() {}
|
|
21387
21273
|
return Reward;
|
|
@@ -21395,7 +21281,6 @@ exports.BaseBanner = BaseBanner;
|
|
|
21395
21281
|
exports.BaseTile = BaseTile;
|
|
21396
21282
|
exports.Button = Button;
|
|
21397
21283
|
exports.Carousel = Carousel;
|
|
21398
|
-
exports.Column = Column;
|
|
21399
21284
|
exports.ContentTile = ContentTile$1;
|
|
21400
21285
|
exports.ContentTileConfig = ContentTileConfig;
|
|
21401
21286
|
exports.FlexBox = FlexBox;
|
|
@@ -21403,6 +21288,7 @@ exports.Grid = Grid;
|
|
|
21403
21288
|
exports.Group = Group;
|
|
21404
21289
|
exports.Icon = Icon;
|
|
21405
21290
|
exports.Indicator = Indicator;
|
|
21291
|
+
exports.Layout = Layout;
|
|
21406
21292
|
exports.LoadingIndicator = LoadingIndicator;
|
|
21407
21293
|
exports.PointsTile = PointsTile$1;
|
|
21408
21294
|
exports.PointsTileConfig = PointsTileConfig;
|
|
@@ -21414,13 +21300,10 @@ exports.RewardCategoryTile = RewardCategoryTile$1;
|
|
|
21414
21300
|
exports.RewardCategoryTileConfig = RewardCategoryTileConfig;
|
|
21415
21301
|
exports.RewardTile = RewardTile$1;
|
|
21416
21302
|
exports.RewardTileConfig = RewardTileConfig;
|
|
21417
|
-
exports.Row = Row;
|
|
21418
|
-
exports.RowHeader = RowHeader;
|
|
21419
21303
|
exports.Section = Section;
|
|
21420
21304
|
exports.SectionHeader = SectionHeader;
|
|
21421
21305
|
exports.Skeleton = Skeleton;
|
|
21422
21306
|
exports.Spacer = Spacer;
|
|
21423
|
-
exports.Stack = Stack;
|
|
21424
21307
|
exports.Text = Text;
|
|
21425
21308
|
exports.TierTileConfig = TierTileConfig;
|
|
21426
21309
|
exports.TierTileUpdated = TierTile;
|