Skip to content

Commit f9b22b7

Browse files
lposenlposen
committed
feat: completed styles for IterableEmbeddedCard
1 parent 56d8dfc commit f9b22b7

9 files changed

Lines changed: 125 additions & 122 deletions

File tree

‎example/src/components/Embedded/Embedded.styles.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,18 @@ import { button, buttonText, container, hr } from '../../constants';
44
const styles = StyleSheet.create({
55
button,
66
buttonText,
7-
container,
7+
container: { ...container, paddingHorizontal: 0 },
8+
embeddedSection: {
9+
display: 'flex',
10+
flexDirection: 'column',
11+
gap: 16,
12+
paddingHorizontal: 16,
13+
},
814
hr,
915
text: { textAlign: 'center' },
16+
utilitySection: {
17+
paddingHorizontal: 16,
18+
},
1019
});
1120

1221
export default styles;

‎example/src/components/Embedded/Embedded.tsx‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from '@iterable/react-native-sdk';
77
import { useIsFocused } from '@react-navigation/native';
88
import { useCallback, useEffect, useState } from 'react';
9-
import { Text, TouchableOpacity, View } from 'react-native';
9+
import { Text, TouchableOpacity, View, ScrollView } from 'react-native';
1010

1111
import { useIterableApp } from '../../hooks';
1212
import styles from './Embedded.styles';
@@ -68,29 +68,35 @@ export const Embedded = () => {
6868

6969
return (
7070
<View style={styles.container}>
71-
<Text style={styles.text}>Has session: {hasSession.toString()}</Text>
72-
<Text style={styles.text}>
73-
Placement ids: [{placementIds.join(', ')}]
74-
</Text>
75-
<TouchableOpacity style={styles.button} onPress={getEmbeddedMessages}>
76-
<Text style={styles.buttonText}>Get embedded messages</Text>
77-
</TouchableOpacity>
78-
<TouchableOpacity style={styles.button} onPress={getPlacementIds}>
79-
<Text style={styles.buttonText}>Get placement ids</Text>
80-
</TouchableOpacity>
81-
<TouchableOpacity style={styles.button} onPress={sync}>
82-
<Text style={styles.buttonText}>Sync</Text>
83-
</TouchableOpacity>
71+
<View style={styles.utilitySection}>
72+
<Text style={styles.text}>Has session: {hasSession.toString()}</Text>
73+
<Text style={styles.text}>
74+
Placement ids: [{placementIds.join(', ')}]
75+
</Text>
76+
<TouchableOpacity style={styles.button} onPress={getEmbeddedMessages}>
77+
<Text style={styles.buttonText}>Get embedded messages</Text>
78+
</TouchableOpacity>
79+
<TouchableOpacity style={styles.button} onPress={getPlacementIds}>
80+
<Text style={styles.buttonText}>Get placement ids</Text>
81+
</TouchableOpacity>
82+
<TouchableOpacity style={styles.button} onPress={sync}>
83+
<Text style={styles.buttonText}>Sync</Text>
84+
</TouchableOpacity>
85+
</View>
8486
<View style={styles.hr} />
85-
{messages.map((message) => {
86-
return (
87-
<IterableEmbeddedView
88-
key={message.metadata.messageId}
89-
viewType={IterableEmbeddedViewType.Card}
90-
message={message}
91-
/>
92-
);
93-
})}
87+
<ScrollView>
88+
<View style={styles.embeddedSection}>
89+
{messages.map((message) => {
90+
return (
91+
<IterableEmbeddedView
92+
key={message.metadata.messageId}
93+
viewType={IterableEmbeddedViewType.Card}
94+
message={message}
95+
/>
96+
);
97+
})}
98+
</View>
99+
</ScrollView>
94100
</View>
95101
);
96102
};

‎src/core/enums/IterableRetryBackoff.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable tsdoc/syntax */
12
/**
23
* The type of backoff to use when retrying a request.
34
*/

‎src/core/images/logo-grey.png‎

3.89 KB
Loading

‎src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.styles.ts‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { StyleSheet } from 'react-native';
2-
import {
3-
embeddedMediaImageBorderColors,
4-
embeddedMediaImageBackgroundColors,
5-
} from '../../constants/embeddedViewDefaults';
2+
import { embeddedMediaImageBackgroundColors } from '../../constants/embeddedViewDefaults';
3+
4+
const IMAGE_HEIGHT = 230;
65

76
export const styles = StyleSheet.create({
87
body: {
@@ -12,11 +11,14 @@ export const styles = StyleSheet.create({
1211
lineHeight: 20,
1312
},
1413
bodyContainer: {
15-
alignItems: 'center',
14+
alignItems: 'flex-start',
1615
alignSelf: 'stretch',
1716
display: 'flex',
18-
flexDirection: 'row',
19-
paddingTop: 4,
17+
flexDirection: 'column',
18+
gap: 24,
19+
paddingBottom: 16,
20+
paddingHorizontal: 16,
21+
paddingTop: 12,
2022
},
2123
button: {
2224
borderRadius: 32,
@@ -32,53 +34,53 @@ export const styles = StyleSheet.create({
3234
},
3335
buttonText: {
3436
fontSize: 14,
35-
fontWeight: '400',
37+
fontWeight: '700',
3638
lineHeight: 20,
37-
paddingHorizontal: 12,
38-
paddingVertical: 8,
3939
},
4040
container: {
41-
alignItems: 'flex-start',
41+
alignItems: 'center',
4242
borderStyle: 'solid',
4343
boxShadow:
4444
'0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 0 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.08)',
4545
display: 'flex',
4646
flexDirection: 'column',
4747
gap: 16,
4848
justifyContent: 'center',
49-
padding: 16,
49+
overflow: 'hidden',
5050
width: '100%',
5151
},
5252
mediaContainer: {
5353
alignItems: 'flex-start',
5454
alignSelf: 'stretch',
55+
backgroundColor: embeddedMediaImageBackgroundColors.card,
5556
display: 'flex',
5657
flexDirection: 'row',
58+
height: IMAGE_HEIGHT,
59+
},
60+
mediaContainerNoImage: {
61+
alignItems: 'center',
62+
justifyContent: 'center',
5763
},
5864
mediaImage: {
59-
backgroundColor: embeddedMediaImageBackgroundColors.card,
60-
borderColor: embeddedMediaImageBorderColors.card,
61-
borderRadius: 6,
62-
borderStyle: 'solid',
63-
borderWidth: 1,
64-
height: 70,
65+
height: IMAGE_HEIGHT,
6566
paddingHorizontal: 0,
6667
paddingVertical: 0,
67-
width: 70,
68+
width: '100%',
69+
},
70+
mediaImagePlaceholder: {
71+
height: 56,
72+
opacity: 0.25,
73+
width: 56,
6874
},
6975
textContainer: {
70-
alignSelf: 'center',
76+
alignItems: 'flex-start',
77+
alignSelf: 'stretch',
7178
display: 'flex',
7279
flexDirection: 'column',
73-
flexGrow: 1,
74-
flexShrink: 1,
75-
gap: 4,
76-
width: '100%',
80+
gap: 8,
7781
},
7882
title: {
79-
fontSize: 16,
83+
fontSize: 18,
8084
fontWeight: '700',
81-
lineHeight: 16,
82-
paddingBottom: 4,
8385
},
8486
});

‎src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,25 @@ export const IterableEmbeddedCard = ({
4949
} as ViewStyle,
5050
]}
5151
>
52-
{media.shouldShow && (
53-
<View style={styles.mediaContainer}>
54-
<Image
55-
source={{ uri: media.url as string }}
56-
style={styles.mediaImage}
57-
alt={media.caption as string}
58-
/>
59-
</View>
60-
)}
52+
<View
53+
style={[
54+
styles.mediaContainer,
55+
media.shouldShow ? {} : styles.mediaContainerNoImage,
56+
]}
57+
>
58+
<Image
59+
source={
60+
media.shouldShow
61+
? { uri: media.url as string }
62+
: // eslint-disable-next-line @typescript-eslint/no-require-imports
63+
require('../../../core/images/logo-grey.png')
64+
}
65+
style={
66+
media.shouldShow ? styles.mediaImage : styles.mediaImagePlaceholder
67+
}
68+
alt={media.caption as string}
69+
/>
70+
</View>
6171
<View style={styles.bodyContainer}>
6272
<View style={styles.textContainer}>
6373
<Text

src/embedded/components/utils/getDefaultColor.ts renamed to src/embedded/components/utils/getDefaultStyle.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { IterableEmbeddedViewType } from '../../enums/IterableEmbeddedViewType';
22

3-
export const getDefaultColor = (
3+
export const getDefaultStyle = (
44
viewType: IterableEmbeddedViewType,
55
colors: {
66
banner: number | string;

‎src/embedded/components/utils/getStyles.ts‎

Lines changed: 15 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import type { IterableEmbeddedViewConfig } from '../../classes/IterableEmbeddedViewConfig';
2-
import {
3-
defaultBorderWidth,
4-
defaultBorderCornerRadius,
5-
embeddedColors,
6-
} from '../../constants/embeddedViewDefaults';
2+
import { embeddedStyles } from '../../constants/embeddedViewDefaults';
73
import type { IterableEmbeddedViewType } from '../../enums/IterableEmbeddedViewType';
8-
import { getDefaultColor } from './getDefaultColor';
4+
import { getDefaultStyle } from './getDefaultStyle';
95

106
export const getStyles = (
117
viewType: IterableEmbeddedViewType,
@@ -14,61 +10,29 @@ export const getStyles = (
1410
return {
1511
backgroundColor:
1612
c?.backgroundColor ??
17-
getDefaultColor(viewType, {
18-
banner: embeddedColors.background.banner,
19-
card: embeddedColors.background.card,
20-
notification: embeddedColors.background.notification,
21-
}),
13+
getDefaultStyle(viewType, embeddedStyles.background),
2214
borderColor:
23-
c?.borderColor ??
24-
getDefaultColor(viewType, {
25-
banner: embeddedColors.border.banner,
26-
card: embeddedColors.border.card,
27-
notification: embeddedColors.border.notification,
28-
}),
29-
borderWidth: c?.borderWidth ?? defaultBorderWidth,
30-
borderCornerRadius: c?.borderCornerRadius ?? defaultBorderCornerRadius,
15+
c?.borderColor ?? getDefaultStyle(viewType, embeddedStyles.border),
16+
borderWidth:
17+
c?.borderWidth ?? getDefaultStyle(viewType, embeddedStyles.borderWidth),
18+
borderCornerRadius:
19+
c?.borderCornerRadius ??
20+
getDefaultStyle(viewType, embeddedStyles.borderRadius),
3121
primaryBtnBackgroundColor:
3222
c?.primaryBtnBackgroundColor ??
33-
getDefaultColor(viewType, {
34-
banner: embeddedColors.primaryBtnBackground.banner,
35-
card: embeddedColors.primaryBtnBackground.card,
36-
notification: embeddedColors.primaryBtnBackground.notification,
37-
}),
23+
getDefaultStyle(viewType, embeddedStyles.primaryBtnBackground),
3824
primaryBtnTextColor:
3925
c?.primaryBtnTextColor ??
40-
getDefaultColor(viewType, {
41-
banner: embeddedColors.primaryBtnText.banner,
42-
card: embeddedColors.primaryBtnText.card,
43-
notification: embeddedColors.primaryBtnText.notification,
44-
}),
26+
getDefaultStyle(viewType, embeddedStyles.primaryBtnText),
4527
secondaryBtnBackgroundColor:
4628
c?.secondaryBtnBackgroundColor ??
47-
getDefaultColor(viewType, {
48-
banner: embeddedColors.secondaryBtnBackground.banner,
49-
card: embeddedColors.secondaryBtnBackground.card,
50-
notification: embeddedColors.secondaryBtnBackground.notification,
51-
}),
29+
getDefaultStyle(viewType, embeddedStyles.secondaryBtnBackground),
5230
secondaryBtnTextColor:
5331
c?.secondaryBtnTextColor ??
54-
getDefaultColor(viewType, {
55-
banner: embeddedColors.secondaryBtnText.banner,
56-
card: embeddedColors.secondaryBtnText.card,
57-
notification: embeddedColors.secondaryBtnText.notification,
58-
}),
32+
getDefaultStyle(viewType, embeddedStyles.secondaryBtnText),
5933
titleTextColor:
60-
c?.titleTextColor ??
61-
getDefaultColor(viewType, {
62-
banner: embeddedColors.titleText.banner,
63-
card: embeddedColors.titleText.card,
64-
notification: embeddedColors.titleText.notification,
65-
}),
34+
c?.titleTextColor ?? getDefaultStyle(viewType, embeddedStyles.titleText),
6635
bodyTextColor:
67-
c?.bodyTextColor ??
68-
getDefaultColor(viewType, {
69-
banner: embeddedColors.bodyText.banner,
70-
card: embeddedColors.bodyText.card,
71-
notification: embeddedColors.bodyText.notification,
72-
}),
36+
c?.bodyTextColor ?? getDefaultStyle(viewType, embeddedStyles.bodyText),
7337
};
7438
};

0 commit comments

Comments
 (0)