@pushwoosh/dumb-components 1.1.163 → 1.1.165
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/Modal/components/Modal/styles.js +3 -3
- package/NativeRichMediaPreview/NativeRichMediaPreview.d.ts +23 -4
- package/NativeRichMediaPreview/NativeRichMediaPreview.js +125 -63
- package/NativeRichMediaPreview/components/NativeRichMediaButtonList/NativeRichMediaButtonList.d.ts +3 -0
- package/NativeRichMediaPreview/components/NativeRichMediaButtonList/NativeRichMediaButtonList.js +24 -0
- package/NativeRichMediaPreview/components/NativeRichMediaButtonList/index.d.ts +1 -0
- package/NativeRichMediaPreview/components/NativeRichMediaButtonList/index.js +1 -0
- package/NativeRichMediaPreview/components/NativeRichMediaButtonList/types.d.ts +6 -0
- package/NativeRichMediaPreview/components/NativeRichMediaCloseChip/styles.js +4 -5
- package/NativeRichMediaPreview/components/NativeRichMediaRewardPanel/NativeRichMediaRewardPanel.js +26 -26
- package/NativeRichMediaPreview/components/NativeRichMediaRewardPanel/styles.d.ts +29 -2
- package/NativeRichMediaPreview/components/NativeRichMediaRewardPanel/styles.js +19 -4
- package/NativeRichMediaPreview/components/NativeRichMediaText/index.d.ts +1 -0
- package/NativeRichMediaPreview/components/NativeRichMediaText/index.js +1 -0
- package/NativeRichMediaPreview/components/NativeRichMediaText/styles.d.ts +7 -0
- package/NativeRichMediaPreview/components/NativeRichMediaText/styles.js +19 -0
- package/NativeRichMediaPreview/components/NativeRichMediaTitle/index.d.ts +1 -0
- package/NativeRichMediaPreview/components/NativeRichMediaTitle/index.js +1 -0
- package/NativeRichMediaPreview/components/NativeRichMediaTitle/styles.d.ts +12 -0
- package/NativeRichMediaPreview/components/NativeRichMediaTitle/styles.js +22 -0
- package/NativeRichMediaPreview/helpers.d.ts +22 -6
- package/NativeRichMediaPreview/helpers.js +45 -6
- package/NativeRichMediaPreview/icons/MutedIcon.svg +1 -1
- package/NativeRichMediaPreview/icons/SoundIcon.svg +1 -1
- package/NativeRichMediaPreview/index.d.ts +1 -1
- package/NativeRichMediaPreview/parseNativeRichMediaConfig.d.ts +3 -1
- package/NativeRichMediaPreview/parseNativeRichMediaConfig.js +74 -18
- package/NativeRichMediaPreview/styles.d.ts +7 -7
- package/NativeRichMediaPreview/styles.js +25 -23
- package/NativeRichMediaPreview/types.d.ts +180 -176
- package/NativeRichMediaPreview/views/NativeRichMediaBannerView/NativeRichMediaBannerView.js +31 -36
- package/NativeRichMediaPreview/views/NativeRichMediaBannerView/styles.d.ts +3 -4
- package/NativeRichMediaPreview/views/NativeRichMediaBannerView/styles.js +8 -11
- package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/NativeRichMediaCarouselView.js +31 -30
- package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/styles.d.ts +0 -2
- package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/styles.js +4 -12
- package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/types.d.ts +0 -1
- package/NativeRichMediaPreview/views/NativeRichMediaFullscreenView/NativeRichMediaFullscreenView.js +26 -35
- package/NativeRichMediaPreview/views/NativeRichMediaInvalidView/NativeRichMediaInvalidView.js +5 -3
- package/NativeRichMediaPreview/views/NativeRichMediaInvalidView/styles.d.ts +9 -0
- package/NativeRichMediaPreview/views/NativeRichMediaInvalidView/styles.js +10 -1
- package/NativeRichMediaPreview/views/NativeRichMediaModalView/NativeRichMediaModalView.js +33 -38
- package/NativeRichMediaPreview/views/NativeRichMediaPipView/NativeRichMediaPipView.js +30 -35
- package/NativeRichMediaPreview/views/NativeRichMediaPipView/styles.d.ts +7 -6
- package/NativeRichMediaPreview/views/NativeRichMediaPipView/styles.js +15 -13
- package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/NativeRichMediaScratchcardView.js +50 -52
- package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/styles.d.ts +18 -5
- package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/styles.js +15 -8
- package/NativeRichMediaPreview/views/NativeRichMediaSheetView/NativeRichMediaSheetView.js +31 -37
- package/NativeRichMediaPreview/views/NativeRichMediaSheetView/styles.js +1 -1
- package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/NativeRichMediaSpinwheelView.js +45 -47
- package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/styles.d.ts +11 -3
- package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/styles.js +16 -10
- package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/NativeRichMediaStoriesView.js +24 -33
- package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/styles.d.ts +1 -7
- package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/styles.js +7 -21
- package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/types.d.ts +0 -1
- package/NativeRichMediaPreview/views/NativeRichMediaVideoView/NativeRichMediaVideoView.js +22 -42
- package/NativeRichMediaPreview/views/shared/styles.d.ts +3 -3
- package/NativeRichMediaPreview/views/shared/styles.js +6 -5
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/NativeRichMediaCardButtons.d.ts +0 -3
- package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/NativeRichMediaCardButtons.js +0 -29
- package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/index.d.ts +0 -1
- package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/index.js +0 -1
- package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/types.d.ts +0 -5
- package/NativeRichMediaPreview/components/NativeRichMediaOverlayButtons/NativeRichMediaOverlayButtons.d.ts +0 -3
- package/NativeRichMediaPreview/components/NativeRichMediaOverlayButtons/NativeRichMediaOverlayButtons.js +0 -40
- package/NativeRichMediaPreview/components/NativeRichMediaOverlayButtons/index.d.ts +0 -1
- package/NativeRichMediaPreview/components/NativeRichMediaOverlayButtons/index.js +0 -1
- package/NativeRichMediaPreview/components/NativeRichMediaOverlayButtons/types.d.ts +0 -4
- package/NativeRichMediaPreview/components/NativeRichMediaOverlayButtons/types.js +0 -1
- package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/NativeRichMediaPreviewCanvas.d.ts +0 -3
- package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/NativeRichMediaPreviewCanvas.js +0 -10
- package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/index.d.ts +0 -1
- package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/index.js +0 -1
- package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/styles.d.ts +0 -1
- package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/styles.js +0 -6
- package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/types.d.ts +0 -4
- package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/types.js +0 -1
- package/NativeRichMediaPreview/components/NativeRichMediaPtLabel/NativeRichMediaPtLabel.d.ts +0 -3
- package/NativeRichMediaPreview/components/NativeRichMediaPtLabel/NativeRichMediaPtLabel.js +0 -27
- package/NativeRichMediaPreview/components/NativeRichMediaPtLabel/index.d.ts +0 -1
- package/NativeRichMediaPreview/components/NativeRichMediaPtLabel/index.js +0 -1
- package/NativeRichMediaPreview/components/NativeRichMediaPtLabel/styles.d.ts +0 -10
- package/NativeRichMediaPreview/components/NativeRichMediaPtLabel/styles.js +0 -30
- package/NativeRichMediaPreview/components/NativeRichMediaPtLabel/types.d.ts +0 -12
- package/NativeRichMediaPreview/components/NativeRichMediaPtLabel/types.js +0 -1
- package/NativeRichMediaPreview/views/NativeRichMediaFullscreenView/styles.d.ts +0 -1
- package/NativeRichMediaPreview/views/NativeRichMediaFullscreenView/styles.js +0 -1
- package/NativeRichMediaPreview/views/NativeRichMediaVideoView/styles.d.ts +0 -1
- package/NativeRichMediaPreview/views/NativeRichMediaVideoView/styles.js +0 -1
- /package/NativeRichMediaPreview/components/{NativeRichMediaCardButtons → NativeRichMediaButtonList}/types.js +0 -0
|
@@ -1,245 +1,249 @@
|
|
|
1
|
-
/** Text
|
|
1
|
+
/** Text block. */
|
|
2
2
|
export type NativeRichMediaText = {
|
|
3
3
|
/** Text content. */
|
|
4
4
|
text: string;
|
|
5
|
-
/**
|
|
6
|
-
color
|
|
5
|
+
/** Text color in HEX with opacity (example: #RRGGBBFF). */
|
|
6
|
+
color: string;
|
|
7
7
|
};
|
|
8
|
-
/**
|
|
8
|
+
/** Border config. */
|
|
9
|
+
export type NativeRichMediaBorder = {
|
|
10
|
+
/** Border color in HEX with opacity (example: #RRGGBBFF). */
|
|
11
|
+
color: string;
|
|
12
|
+
/** Border radius in pt. */
|
|
13
|
+
radius: number;
|
|
14
|
+
};
|
|
15
|
+
/** Surface of a card: optional image over a background color. */
|
|
16
|
+
export type NativeRichMediaCover = {
|
|
17
|
+
/** Cover image URL. */
|
|
18
|
+
image?: string;
|
|
19
|
+
/** Background color in HEX with opacity (example: #RRGGBBFF). */
|
|
20
|
+
background: string;
|
|
21
|
+
};
|
|
22
|
+
/** Available actions. */
|
|
9
23
|
export type NativeRichMediaAction = {
|
|
10
24
|
type: 'close';
|
|
11
25
|
} | {
|
|
12
26
|
type: 'url';
|
|
13
27
|
url: string;
|
|
14
28
|
};
|
|
15
|
-
/** Button
|
|
29
|
+
/** Button block. */
|
|
16
30
|
export type NativeRichMediaButton = {
|
|
17
|
-
/** Button
|
|
18
|
-
text:
|
|
19
|
-
/**
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
|
|
23
|
-
/** Corner radius in pt. */
|
|
24
|
-
cornerRadius?: number;
|
|
31
|
+
/** Button text. */
|
|
32
|
+
text: NativeRichMediaText;
|
|
33
|
+
/** Button background color in HEX with opacity (example: #RRGGBBFF). */
|
|
34
|
+
background: string;
|
|
35
|
+
/** Border config. */
|
|
36
|
+
border: NativeRichMediaBorder;
|
|
25
37
|
/** Tap action. */
|
|
26
|
-
action
|
|
38
|
+
action: NativeRichMediaAction;
|
|
27
39
|
};
|
|
28
40
|
/** Reward panel shown after winning a scratchcard or spinwheel. */
|
|
29
41
|
export type NativeRichMediaReward = {
|
|
30
|
-
/**
|
|
42
|
+
/** Title; a valid reward has a title or a code. */
|
|
31
43
|
title?: NativeRichMediaText;
|
|
32
|
-
/**
|
|
44
|
+
/** Message. */
|
|
33
45
|
message?: NativeRichMediaText;
|
|
34
46
|
/** Promo code displayed with a copy control. */
|
|
35
47
|
code?: string;
|
|
36
|
-
/**
|
|
37
|
-
button?:
|
|
38
|
-
/** Confirmation button action. */
|
|
39
|
-
action?: NativeRichMediaAction;
|
|
48
|
+
/** Confirmation button, including its own tap action. */
|
|
49
|
+
button?: NativeRichMediaButton;
|
|
40
50
|
};
|
|
41
|
-
/** Content of a `
|
|
42
|
-
export type
|
|
43
|
-
/** CSS background of the modal card. */
|
|
44
|
-
background?: string;
|
|
45
|
-
/** Heading. */
|
|
46
|
-
title?: NativeRichMediaText;
|
|
47
|
-
/** Body text. */
|
|
48
|
-
message?: NativeRichMediaText;
|
|
49
|
-
/** Cover image URL. */
|
|
50
|
-
image?: string;
|
|
51
|
+
/** Content of a `banner` rich media. */
|
|
52
|
+
export type NativeRichMediaBannerBlock = {
|
|
51
53
|
/** Show a close (✕) chip. */
|
|
52
|
-
showClose
|
|
53
|
-
/**
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
/** Content of a `sheet` rich media; same shape as {@link NativeRichMediaModalBlock}, docked to the bottom. */
|
|
59
|
-
export type NativeRichMediaSheetBlock = NativeRichMediaModalBlock;
|
|
60
|
-
/** Single card of a `carousel` rich media. */
|
|
61
|
-
export type NativeRichMediaCarouselItem = {
|
|
62
|
-
/** Card image URL. */
|
|
54
|
+
showClose: boolean;
|
|
55
|
+
/** Screen edge the banner is docked to (default `bottom`). */
|
|
56
|
+
position: 'top' | 'bottom';
|
|
57
|
+
/** Banner background color in HEX with opacity (example: #RRGGBBFF). */
|
|
58
|
+
background: string;
|
|
59
|
+
/** Leading image URL. */
|
|
63
60
|
image?: string;
|
|
64
|
-
/**
|
|
65
|
-
title?:
|
|
66
|
-
/**
|
|
67
|
-
|
|
68
|
-
/**
|
|
69
|
-
|
|
61
|
+
/** Title. */
|
|
62
|
+
title?: NativeRichMediaText;
|
|
63
|
+
/** Message. */
|
|
64
|
+
message?: NativeRichMediaText;
|
|
65
|
+
/** Tap action. */
|
|
66
|
+
action: NativeRichMediaAction;
|
|
67
|
+
/** Auto-dismiss timeout in seconds; omit to keep the banner until closed. */
|
|
68
|
+
autoDismiss?: number;
|
|
70
69
|
};
|
|
71
70
|
/** Content of a `carousel` rich media. */
|
|
72
71
|
export type NativeRichMediaCarouselBlock = {
|
|
73
|
-
/** Carousel cards. */
|
|
74
|
-
items: NativeRichMediaCarouselItem[];
|
|
75
72
|
/** Show a close (✕) chip. */
|
|
76
|
-
showClose
|
|
73
|
+
showClose: boolean;
|
|
74
|
+
/** Carousel cards. */
|
|
75
|
+
items: Array<{
|
|
76
|
+
/** Title. */
|
|
77
|
+
title?: NativeRichMediaText;
|
|
78
|
+
/** Message. */
|
|
79
|
+
message?: NativeRichMediaText;
|
|
80
|
+
/** Card image URL. */
|
|
81
|
+
image?: string;
|
|
82
|
+
/** Tap action of the card. */
|
|
83
|
+
action?: NativeRichMediaAction;
|
|
84
|
+
}>;
|
|
77
85
|
};
|
|
78
|
-
/**
|
|
79
|
-
export type
|
|
80
|
-
/**
|
|
86
|
+
/** Content of a `modal` rich media. */
|
|
87
|
+
export type NativeRichMediaModalBlock = {
|
|
88
|
+
/** Show a close (✕) chip. */
|
|
89
|
+
showClose: boolean;
|
|
90
|
+
/** Dim the screen behind the card. */
|
|
91
|
+
dimBackground: boolean;
|
|
92
|
+
/** Card background color in HEX with opacity (example: #RRGGBBFF). */
|
|
93
|
+
background: string;
|
|
94
|
+
/** Cover image URL. */
|
|
81
95
|
image?: string;
|
|
82
|
-
/**
|
|
83
|
-
title?:
|
|
84
|
-
/**
|
|
85
|
-
|
|
86
|
-
/**
|
|
87
|
-
|
|
88
|
-
/** URL opened by the action button. */
|
|
89
|
-
url?: string;
|
|
90
|
-
/** Slide duration in seconds. */
|
|
91
|
-
duration?: number;
|
|
96
|
+
/** Title. */
|
|
97
|
+
title?: NativeRichMediaText;
|
|
98
|
+
/** Message. */
|
|
99
|
+
message?: NativeRichMediaText;
|
|
100
|
+
/** Action buttons under the message. */
|
|
101
|
+
buttons: Array<NativeRichMediaButton>;
|
|
92
102
|
};
|
|
93
|
-
/** Content of a `
|
|
94
|
-
export type
|
|
95
|
-
/** Story slides. */
|
|
96
|
-
items: NativeRichMediaStoryItem[];
|
|
97
|
-
/** Restart from the first slide after the last one. */
|
|
98
|
-
loop?: boolean;
|
|
103
|
+
/** Content of a `sheet` rich media. */
|
|
104
|
+
export type NativeRichMediaSheetBlock = {
|
|
99
105
|
/** Show a close (✕) chip. */
|
|
100
|
-
showClose
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
/** Leading image URL. */
|
|
106
|
+
showClose: boolean;
|
|
107
|
+
/** Dim the screen behind the card. */
|
|
108
|
+
dimBackground: boolean;
|
|
109
|
+
/** Sheet background color in HEX with opacity (example: #RRGGBBFF). */
|
|
110
|
+
background: string;
|
|
111
|
+
/** Cover image URL. */
|
|
107
112
|
image?: string;
|
|
108
|
-
/**
|
|
113
|
+
/** Title. */
|
|
109
114
|
title?: NativeRichMediaText;
|
|
110
|
-
/**
|
|
115
|
+
/** Message. */
|
|
111
116
|
message?: NativeRichMediaText;
|
|
112
|
-
/**
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
autoDismiss?: number;
|
|
117
|
+
/** Action buttons under the message. */
|
|
118
|
+
buttons: Array<NativeRichMediaButton>;
|
|
119
|
+
};
|
|
120
|
+
/** Content of a `stories` rich media. */
|
|
121
|
+
export type NativeRichMediaStoriesBlock = {
|
|
118
122
|
/** Show a close (✕) chip. */
|
|
119
|
-
showClose
|
|
123
|
+
showClose: boolean;
|
|
124
|
+
/** Restart from the first slide after the last one. */
|
|
125
|
+
loop: boolean;
|
|
126
|
+
/** Story slides. */
|
|
127
|
+
items: Array<{
|
|
128
|
+
/** Title. */
|
|
129
|
+
title?: NativeRichMediaText;
|
|
130
|
+
/** Message. */
|
|
131
|
+
message?: NativeRichMediaText;
|
|
132
|
+
/** Slide image URL. */
|
|
133
|
+
image?: string;
|
|
134
|
+
/** Action buttons at the bottom. */
|
|
135
|
+
buttons: Array<NativeRichMediaButton>;
|
|
136
|
+
/** Slide duration in seconds (SDK: default 5, max 30). */
|
|
137
|
+
duration: number;
|
|
138
|
+
}>;
|
|
120
139
|
};
|
|
121
140
|
/** Content of a `fullscreen` rich media. */
|
|
122
141
|
export type NativeRichMediaFullscreenBlock = {
|
|
123
|
-
/**
|
|
124
|
-
|
|
125
|
-
/**
|
|
142
|
+
/** Show a close (✕) chip. */
|
|
143
|
+
showClose: boolean;
|
|
144
|
+
/** Surface of the screen. */
|
|
145
|
+
cover: NativeRichMediaCover;
|
|
146
|
+
/** Title. */
|
|
126
147
|
title?: NativeRichMediaText;
|
|
127
|
-
/**
|
|
148
|
+
/** Message. */
|
|
128
149
|
message?: NativeRichMediaText;
|
|
129
150
|
/** Action buttons at the bottom. */
|
|
130
|
-
buttons
|
|
131
|
-
/** Show a close (✕) chip. */
|
|
132
|
-
showClose?: boolean;
|
|
151
|
+
buttons: Array<NativeRichMediaButton>;
|
|
133
152
|
};
|
|
134
153
|
/** Content of a `video` rich media. */
|
|
135
154
|
export type NativeRichMediaVideoBlock = {
|
|
155
|
+
/** Title. */
|
|
156
|
+
title?: NativeRichMediaText;
|
|
157
|
+
/** Message. */
|
|
158
|
+
message?: NativeRichMediaText;
|
|
159
|
+
/** Show a close (✕) chip. */
|
|
160
|
+
showClose: boolean;
|
|
161
|
+
/** Loop playback. */
|
|
162
|
+
loop: boolean;
|
|
163
|
+
/** Start playback muted. */
|
|
164
|
+
muted: boolean;
|
|
136
165
|
/** Video URL. */
|
|
137
|
-
url
|
|
166
|
+
url: string;
|
|
138
167
|
/** Poster image URL shown before playback. */
|
|
139
168
|
poster?: string;
|
|
140
169
|
/** Image URL shown when the video cannot be played. */
|
|
141
170
|
fallback?: string;
|
|
142
|
-
/**
|
|
143
|
-
|
|
144
|
-
/** Body text over the video. */
|
|
145
|
-
message?: NativeRichMediaText;
|
|
146
|
-
/** Caption of the action button. */
|
|
147
|
-
button?: string;
|
|
148
|
-
/** Action button action. */
|
|
149
|
-
action?: NativeRichMediaAction;
|
|
150
|
-
/** Loop playback. */
|
|
151
|
-
loop?: boolean;
|
|
152
|
-
/** Start playback muted. */
|
|
153
|
-
muted?: boolean;
|
|
154
|
-
/** Show a close (✕) chip. */
|
|
155
|
-
showClose?: boolean;
|
|
171
|
+
/** Action buttons at the bottom. */
|
|
172
|
+
buttons: Array<NativeRichMediaButton>;
|
|
156
173
|
};
|
|
157
174
|
/** Content of a `pip` (picture-in-picture) rich media. */
|
|
158
175
|
export type NativeRichMediaPipBlock = {
|
|
176
|
+
/** Show a close (✕) chip. */
|
|
177
|
+
showClose: boolean;
|
|
178
|
+
/** Screen corner the pip window is docked to. */
|
|
179
|
+
position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
180
|
+
/** Loop playback. */
|
|
181
|
+
loop: boolean;
|
|
182
|
+
/** Start playback muted. */
|
|
183
|
+
muted: boolean;
|
|
159
184
|
/** Video URL. */
|
|
160
|
-
url
|
|
185
|
+
url: string;
|
|
161
186
|
/** Poster image URL shown before playback. */
|
|
162
187
|
poster?: string;
|
|
163
188
|
/** Image URL shown when the video cannot be played. */
|
|
164
189
|
fallback?: string;
|
|
165
|
-
/**
|
|
166
|
-
|
|
167
|
-
/** Pip window width in pt. */
|
|
168
|
-
width?: number;
|
|
190
|
+
/** Pip window width as a percent of the box width, clamped between 15 and 70 (values ≤ 1 are treated as a fraction). */
|
|
191
|
+
width: number;
|
|
169
192
|
/** Width-to-height ratio of the pip window. */
|
|
170
|
-
aspectRatio
|
|
171
|
-
/**
|
|
172
|
-
|
|
173
|
-
/**
|
|
174
|
-
loop?: boolean;
|
|
175
|
-
/** Start playback muted. */
|
|
176
|
-
muted?: boolean;
|
|
177
|
-
/** Caption of the action button. */
|
|
178
|
-
button?: string;
|
|
179
|
-
/** Action button action. */
|
|
193
|
+
aspectRatio: number;
|
|
194
|
+
/** Border radius in pt. */
|
|
195
|
+
borderRadius?: number;
|
|
196
|
+
/** Tap action of the pip window itself. */
|
|
180
197
|
action?: NativeRichMediaAction;
|
|
181
|
-
/** Show a close (✕) chip. */
|
|
182
|
-
showClose?: boolean;
|
|
183
|
-
};
|
|
184
|
-
/** Scratch layer of a {@link NativeRichMediaScratchcardBlock}. */
|
|
185
|
-
export type NativeRichMediaScratchcardCover = {
|
|
186
|
-
/** Cover image URL. */
|
|
187
|
-
image?: string;
|
|
188
|
-
/** CSS cover color used when there is no image. */
|
|
189
|
-
color?: string;
|
|
190
198
|
};
|
|
191
199
|
/** Content of a `scratchcard` rich media. */
|
|
192
200
|
export type NativeRichMediaScratchcardBlock = {
|
|
193
|
-
/**
|
|
194
|
-
|
|
195
|
-
/**
|
|
201
|
+
/** Show a close (✕) chip. */
|
|
202
|
+
showClose: boolean;
|
|
203
|
+
/** Color or gradient stops in HEX with opacity (example: #RRGGBBFF). */
|
|
204
|
+
background: string | string[];
|
|
205
|
+
/** Scratched-area fraction (0–1) that reveals the reward. */
|
|
206
|
+
revealThreshold: number;
|
|
207
|
+
/** Scratch layer hiding the reward. */
|
|
208
|
+
cover: NativeRichMediaCover;
|
|
209
|
+
/** Instant-reveal button, including its own tap action. */
|
|
210
|
+
revealButton?: Omit<NativeRichMediaButton, 'action'>;
|
|
211
|
+
/** Title. */
|
|
196
212
|
title?: NativeRichMediaText;
|
|
197
|
-
/**
|
|
213
|
+
/** Message. */
|
|
198
214
|
message?: NativeRichMediaText;
|
|
199
|
-
/** Scratch layer hiding the reward. */
|
|
200
|
-
cover?: NativeRichMediaScratchcardCover;
|
|
201
|
-
/** Scratched-area fraction (0–1) that reveals the reward. */
|
|
202
|
-
revealThreshold?: number;
|
|
203
|
-
/** Caption of the instant-reveal button. */
|
|
204
|
-
revealButton?: string;
|
|
205
215
|
/** Reward revealed under the cover. */
|
|
206
|
-
reward
|
|
207
|
-
/** Show a close (✕) chip. */
|
|
208
|
-
showClose?: boolean;
|
|
209
|
-
};
|
|
210
|
-
/** Single sector of a {@link NativeRichMediaSpinwheelBlock}. */
|
|
211
|
-
export type NativeRichMediaSpinwheelSegment = {
|
|
212
|
-
/** Sector caption. */
|
|
213
|
-
text: string;
|
|
214
|
-
/** CSS sector fill color. */
|
|
215
|
-
color?: string;
|
|
216
|
-
/** CSS caption color. */
|
|
217
|
-
textColor?: string;
|
|
218
|
-
/** Relative sector size; defaults to an even split. */
|
|
219
|
-
weight?: number;
|
|
220
|
-
/** Reward granted when the wheel stops on this sector. */
|
|
221
|
-
reward?: NativeRichMediaReward;
|
|
216
|
+
reward: NativeRichMediaReward;
|
|
222
217
|
};
|
|
223
218
|
/** Content of a `spinwheel` rich media. */
|
|
224
219
|
export type NativeRichMediaSpinwheelBlock = {
|
|
225
|
-
/**
|
|
226
|
-
background?: string | string[];
|
|
227
|
-
/** Heading. */
|
|
220
|
+
/** Title. */
|
|
228
221
|
title?: NativeRichMediaText;
|
|
229
|
-
/**
|
|
222
|
+
/** Message. */
|
|
230
223
|
message?: NativeRichMediaText;
|
|
231
|
-
/**
|
|
232
|
-
|
|
233
|
-
/**
|
|
234
|
-
|
|
235
|
-
/**
|
|
236
|
-
|
|
224
|
+
/** Show a close (✕) chip. */
|
|
225
|
+
showClose: boolean;
|
|
226
|
+
/** Color or gradient stops in HEX with opacity (example: #RRGGBBFF). */
|
|
227
|
+
background: string | string[];
|
|
228
|
+
/** Index of the winning segment. */
|
|
229
|
+
winIndex: number;
|
|
230
|
+
/** Spin button, including its own tap action. */
|
|
231
|
+
spinButton: Omit<NativeRichMediaButton, 'action'>;
|
|
237
232
|
/** Reward shown after a winning spin. */
|
|
238
|
-
reward
|
|
233
|
+
reward: NativeRichMediaReward;
|
|
239
234
|
/** Heading shown after a losing spin. */
|
|
240
235
|
loseTitle?: NativeRichMediaText;
|
|
241
|
-
/**
|
|
242
|
-
|
|
236
|
+
/** Wheel sectors. */
|
|
237
|
+
segments: Array<{
|
|
238
|
+
/** Message. */
|
|
239
|
+
message: NativeRichMediaText;
|
|
240
|
+
/** Color in HEX with opacity (example: #RRGGBBFF). */
|
|
241
|
+
color?: string;
|
|
242
|
+
/** Relative sector size. */
|
|
243
|
+
weight: number;
|
|
244
|
+
/** Reward granted when the wheel stops on this sector. */
|
|
245
|
+
reward?: NativeRichMediaReward;
|
|
246
|
+
}>;
|
|
243
247
|
};
|
|
244
248
|
/** Native rich media config: a display type and the matching content block. */
|
|
245
249
|
export type NativeRichMediaConfig = {
|
|
@@ -281,12 +285,12 @@ export declare const NATIVE_RICH_MEDIA_DISPLAY_TYPES: NativeRichMediaDisplayType
|
|
|
281
285
|
export type NativeRichMediaPreviewProps = {
|
|
282
286
|
/** Rich media config, as an object or a JSON string. */
|
|
283
287
|
content: string | NativeRichMediaConfig;
|
|
284
|
-
/**
|
|
285
|
-
|
|
286
|
-
/** Preview
|
|
287
|
-
|
|
288
|
-
/**
|
|
289
|
-
|
|
288
|
+
/** Preview box width; number is treated as px. */
|
|
289
|
+
width: string | number;
|
|
290
|
+
/** Preview box height; number is treated as px. */
|
|
291
|
+
height: string | number;
|
|
292
|
+
/** Index of the slide shown for `carousel`/`stories` (clamped to the items range, default `0`); ignored by other display types. */
|
|
293
|
+
activeIndex?: number;
|
|
290
294
|
/** Show a spinner instead of the content. */
|
|
291
295
|
isLoading?: boolean;
|
|
292
296
|
/** Render the container chrome — white backdrop and border (default `true`). Set `false` for a transparent preview over the consumer's own background. */
|
|
@@ -1,46 +1,41 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { Vertical } from '@pushwoosh/kit-helpers';
|
|
3
|
+
import { Card, CloseGlyph } from './styles';
|
|
3
4
|
import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { NativeRichMediaText } from '../../components/NativeRichMediaText';
|
|
6
|
+
import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
|
|
7
|
+
import { EDGE_INSET, asTextValue } from '../../helpers';
|
|
7
8
|
export function NativeRichMediaBannerView(props) {
|
|
8
9
|
const {
|
|
9
10
|
block
|
|
10
11
|
} = props;
|
|
11
12
|
const isTop = block.position === 'top';
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
fallbackColor: "rgba(255,255,255,0.7)",
|
|
36
|
-
align: "left",
|
|
37
|
-
lineHeight: 1.3,
|
|
38
|
-
clamp2: true,
|
|
39
|
-
marginTop: block.title ? 2 : undefined
|
|
40
|
-
})]
|
|
41
|
-
}), block.showClose !== false && _jsx(CloseGlyph, {
|
|
42
|
-
children: "\u2715"
|
|
13
|
+
const title = asTextValue(block.title);
|
|
14
|
+
const message = asTextValue(block.message);
|
|
15
|
+
return _jsxs(Card, {
|
|
16
|
+
"$marginTop": isTop ? EDGE_INSET : undefined,
|
|
17
|
+
"$marginBottom": isTop ? undefined : EDGE_INSET,
|
|
18
|
+
"$background": block.background,
|
|
19
|
+
children: [block.image && _jsx(NativeRichMediaCoverImg, {
|
|
20
|
+
url: block.image,
|
|
21
|
+
width: 52,
|
|
22
|
+
height: 52,
|
|
23
|
+
borderRadius: 12,
|
|
24
|
+
flex: "none"
|
|
25
|
+
}), _jsxs(Vertical, {
|
|
26
|
+
"$gap": 4,
|
|
27
|
+
children: [title.text && _jsx(NativeRichMediaTitle, {
|
|
28
|
+
"$color": title.color,
|
|
29
|
+
"$size": "h4",
|
|
30
|
+
"$truncate": true,
|
|
31
|
+
children: title.text
|
|
32
|
+
}), message.text && _jsx(NativeRichMediaText, {
|
|
33
|
+
"$color": message.color,
|
|
34
|
+
"$clamp": 2,
|
|
35
|
+
children: message.text
|
|
43
36
|
})]
|
|
44
|
-
})
|
|
37
|
+
}), block.showClose && _jsx(CloseGlyph, {
|
|
38
|
+
children: "\u2715"
|
|
39
|
+
})]
|
|
45
40
|
});
|
|
46
41
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export declare const Card: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
-
$background
|
|
3
|
-
$
|
|
4
|
-
$
|
|
2
|
+
$background?: string;
|
|
3
|
+
$marginTop?: number;
|
|
4
|
+
$marginBottom?: number;
|
|
5
5
|
}, never>;
|
|
6
|
-
export declare const TextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
6
|
export declare const CloseGlyph: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,19 +1,16 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
|
+
import { FontSize, FontWeight } from '@pushwoosh/kit-constants';
|
|
2
3
|
export const Card = styled.div.withConfig({
|
|
3
4
|
displayName: "Card",
|
|
4
5
|
componentId: "sc-1fs78cm-0"
|
|
5
|
-
})(["
|
|
6
|
+
})(["margin:0 12px;border-radius:18px;box-shadow:0 16px 28px rgba(0,0,0,0.28);padding:12px 14px;display:flex;align-items:center;gap:12px;background:", ";", " ", ""], ({
|
|
6
7
|
$background
|
|
7
8
|
}) => $background, ({
|
|
8
|
-
$
|
|
9
|
-
}) => $
|
|
10
|
-
$
|
|
11
|
-
}) => $
|
|
12
|
-
export const TextContainer = styled.div.withConfig({
|
|
13
|
-
displayName: "TextContainer",
|
|
14
|
-
componentId: "sc-1fs78cm-1"
|
|
15
|
-
})(["flex:1;min-width:0;"]);
|
|
9
|
+
$marginTop
|
|
10
|
+
}) => $marginTop !== undefined ? `margin-top: ${$marginTop}px;` : '', ({
|
|
11
|
+
$marginBottom
|
|
12
|
+
}) => $marginBottom !== undefined ? `margin-bottom: ${$marginBottom}px;` : '');
|
|
16
13
|
export const CloseGlyph = styled.div.withConfig({
|
|
17
14
|
displayName: "CloseGlyph",
|
|
18
|
-
componentId: "sc-1fs78cm-
|
|
19
|
-
})(["flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.6);font-size:
|
|
15
|
+
componentId: "sc-1fs78cm-1"
|
|
16
|
+
})(["flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.6);font-size:", ";font-weight:", ";user-select:none;cursor:pointer;"], FontSize.SMALL, FontWeight.BOLD);
|
package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/NativeRichMediaCarouselView.js
CHANGED
|
@@ -1,43 +1,44 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { Card, Dot, Dots, GradientOverlay,
|
|
2
|
+
import { Card, Dot, Dots, GradientOverlay, TextBlock } from './styles';
|
|
3
3
|
import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
|
|
4
4
|
import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { NativeRichMediaText } from '../../components/NativeRichMediaText';
|
|
6
|
+
import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
|
|
7
|
+
import { asTextValue, clampIndex } from '../../helpers';
|
|
7
8
|
export function NativeRichMediaCarouselView(props) {
|
|
8
9
|
const {
|
|
9
10
|
block,
|
|
10
|
-
activeIndex
|
|
11
|
-
onNavigate
|
|
11
|
+
activeIndex
|
|
12
12
|
} = props;
|
|
13
13
|
const items = block.items;
|
|
14
|
-
const idx =
|
|
14
|
+
const idx = clampIndex(activeIndex, items.length);
|
|
15
15
|
const item = items[idx] || {};
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
16
|
+
const title = asTextValue(item.title);
|
|
17
|
+
const message = asTextValue(item.message);
|
|
18
|
+
return _jsxs(Card, {
|
|
19
|
+
children: [_jsx(NativeRichMediaCoverImg, {
|
|
20
|
+
url: item.image,
|
|
21
|
+
position: "absolute",
|
|
22
|
+
inset: true
|
|
23
|
+
}), (title.text || message.text) && _jsxs(_Fragment, {
|
|
24
|
+
children: [_jsx(GradientOverlay, {}), _jsxs(TextBlock, {
|
|
25
|
+
children: [title.text && _jsx(NativeRichMediaTitle, {
|
|
26
|
+
"$color": title.color,
|
|
27
|
+
children: title.text
|
|
28
|
+
}), message.text && _jsx(NativeRichMediaText, {
|
|
29
|
+
"$color": message.color,
|
|
30
|
+
children: message.text
|
|
29
31
|
})]
|
|
30
|
-
}), items.length > 1 && _jsx(Dots, {
|
|
31
|
-
children: items.map((_, i) => _jsx(Dot
|
|
32
|
-
// eslint-disable-next-line react/no-array-index-key
|
|
33
|
-
, {
|
|
34
|
-
"$active": i === idx,
|
|
35
|
-
onClick: () => onNavigate(i)
|
|
36
|
-
}, `carousel-dot-${i}`))
|
|
37
|
-
}), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
|
|
38
|
-
top: 12,
|
|
39
|
-
right: 12
|
|
40
32
|
})]
|
|
41
|
-
})
|
|
33
|
+
}), items.length > 1 && _jsx(Dots, {
|
|
34
|
+
children: items.map((_, i) => _jsx(Dot
|
|
35
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
36
|
+
, {
|
|
37
|
+
"$active": i === idx
|
|
38
|
+
}, `carousel-dot-${i}`))
|
|
39
|
+
}), block.showClose && _jsx(NativeRichMediaCloseChip, {
|
|
40
|
+
top: 12,
|
|
41
|
+
right: 12
|
|
42
|
+
})]
|
|
42
43
|
});
|
|
43
44
|
}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
export declare const Card: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
2
|
export declare const GradientOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
3
|
export declare const TextBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
export declare const TitleText: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
-
export declare const SubtitleText: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
4
|
export declare const Dots: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
5
|
export declare const Dot: import("styled-components").StyledComponent<"div", any, {
|
|
8
6
|
$active?: boolean;
|