Skip to content

Commit 3204df3

Browse files
lposenlposen
committed
refactor: restructure IterableEmbeddedBanner component and update imports for better organization
1 parent 1e49347 commit 3204df3

7 files changed

Lines changed: 202 additions & 22 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const Embedded = () => {
1616
IterableEmbeddedMessage[]
1717
>([]);
1818
const [selectedViewType, setSelectedViewType] =
19-
useState<IterableEmbeddedViewType>(IterableEmbeddedViewType.Notification);
19+
useState<IterableEmbeddedViewType>(IterableEmbeddedViewType.Banner);
2020

2121
const syncEmbeddedMessages = useCallback(() => {
2222
Iterable.embeddedManager.syncMessages();

‎src/embedded/components/IterableEmbeddedBanner.tsx‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { StyleSheet } from 'react-native';
2+
import {
3+
embeddedMediaImageBackgroundColors,
4+
embeddedMediaImageBorderColors,
5+
} from '../../constants/embeddedViewDefaults';
6+
7+
export const IMAGE_HEIGHT = 70;
8+
export const IMAGE_WIDTH = 70;
9+
10+
export const styles = StyleSheet.create({
11+
body: {
12+
alignSelf: 'stretch',
13+
fontSize: 14,
14+
fontWeight: '400',
15+
lineHeight: 20,
16+
},
17+
bodyContainer: {
18+
alignItems: 'center',
19+
alignSelf: 'stretch',
20+
display: 'flex',
21+
flexDirection: 'row',
22+
paddingTop: 4,
23+
},
24+
button: {
25+
borderRadius: 32,
26+
gap: 8,
27+
},
28+
buttonContainer: {
29+
alignItems: 'flex-start',
30+
alignSelf: 'stretch',
31+
display: 'flex',
32+
flexDirection: 'row',
33+
gap: 12,
34+
width: '100%',
35+
},
36+
buttonText: {
37+
fontSize: 14,
38+
fontWeight: '400',
39+
lineHeight: 20,
40+
paddingHorizontal: 12,
41+
paddingVertical: 8,
42+
},
43+
container: {
44+
alignItems: 'flex-start',
45+
borderStyle: 'solid',
46+
boxShadow:
47+
'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)',
48+
display: 'flex',
49+
flexDirection: 'column',
50+
gap: 16,
51+
justifyContent: 'center',
52+
padding: 16,
53+
width: '100%',
54+
},
55+
mediaContainer: {
56+
alignItems: 'flex-start',
57+
alignSelf: 'stretch',
58+
display: 'flex',
59+
flexDirection: 'row',
60+
},
61+
mediaImage: {
62+
backgroundColor: embeddedMediaImageBackgroundColors.banner,
63+
borderColor: embeddedMediaImageBorderColors.banner,
64+
borderRadius: 6,
65+
borderStyle: 'solid',
66+
borderWidth: 1,
67+
height: IMAGE_HEIGHT,
68+
paddingHorizontal: 0,
69+
paddingVertical: 0,
70+
width: IMAGE_WIDTH,
71+
},
72+
textContainer: {
73+
alignSelf: 'center',
74+
display: 'flex',
75+
flexDirection: 'column',
76+
flexGrow: 1,
77+
flexShrink: 1,
78+
gap: 4,
79+
width: '100%',
80+
},
81+
title: {
82+
fontSize: 16,
83+
fontWeight: '700',
84+
lineHeight: 16,
85+
paddingBottom: 4,
86+
},
87+
});

‎src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import {
2+
Image,
3+
Text,
4+
TouchableOpacity,
5+
View,
6+
type TextStyle,
7+
type ViewStyle,
8+
PixelRatio,
9+
} from 'react-native';
10+
11+
import { IterableEmbeddedViewType } from '../../enums';
12+
import { useEmbeddedView } from '../../hooks/useEmbeddedView';
13+
import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps';
14+
import {
15+
styles,
16+
IMAGE_HEIGHT,
17+
IMAGE_WIDTH,
18+
} from './IterableEmbeddedBanner.styles';
19+
20+
/**
21+
* TODO: figure out how default action works.
22+
*/
23+
24+
export const IterableEmbeddedBanner = ({
25+
config,
26+
message,
27+
onButtonClick = () => {},
28+
}: IterableEmbeddedComponentProps) => {
29+
const { parsedStyles, media, handleButtonClick } = useEmbeddedView(
30+
IterableEmbeddedViewType.Banner,
31+
{ message, config, onButtonClick }
32+
);
33+
34+
const buttons = message.elements?.buttons ?? [];
35+
36+
return (
37+
<View
38+
style={[
39+
styles.container,
40+
{
41+
backgroundColor: parsedStyles.backgroundColor,
42+
borderColor: parsedStyles.borderColor,
43+
borderRadius: parsedStyles.borderCornerRadius,
44+
borderWidth: parsedStyles.borderWidth,
45+
} as ViewStyle,
46+
]}
47+
>
48+
{/* eslint-disable-next-line react-native/no-inline-styles */}
49+
<View style={[styles.bodyContainer, { gap: media.shouldShow ? 16 : 0 }]}>
50+
<View style={styles.textContainer}>
51+
<Text
52+
style={[
53+
styles.title,
54+
{ color: parsedStyles.titleTextColor } as TextStyle,
55+
]}
56+
>
57+
{message.elements?.title}
58+
</Text>
59+
<Text
60+
style={[
61+
styles.body,
62+
{ color: parsedStyles.bodyTextColor } as TextStyle,
63+
]}
64+
>
65+
{message.elements?.body}
66+
</Text>
67+
</View>
68+
{media.shouldShow && (
69+
<View style={styles.mediaContainer}>
70+
<Image
71+
source={{
72+
uri: media.url as string,
73+
width: PixelRatio.getPixelSizeForLayoutSize(IMAGE_WIDTH),
74+
height: PixelRatio.getPixelSizeForLayoutSize(IMAGE_HEIGHT),
75+
}}
76+
style={styles.mediaImage}
77+
alt={media.caption as string}
78+
/>
79+
</View>
80+
)}
81+
</View>
82+
{buttons.length > 0 && (
83+
<View style={styles.buttonContainer}>
84+
{buttons.map((button, index) => {
85+
const backgroundColor =
86+
index === 0
87+
? parsedStyles.primaryBtnBackgroundColor
88+
: parsedStyles.secondaryBtnBackgroundColor;
89+
const textColor =
90+
index === 0
91+
? parsedStyles.primaryBtnTextColor
92+
: parsedStyles.secondaryBtnTextColor;
93+
return (
94+
<TouchableOpacity
95+
style={[styles.button, { backgroundColor } as ViewStyle]}
96+
onPress={() => handleButtonClick(button)}
97+
key={button.id}
98+
>
99+
<Text
100+
style={[styles.buttonText, { color: textColor } as TextStyle]}
101+
>
102+
{button.title}
103+
</Text>
104+
</TouchableOpacity>
105+
);
106+
})}
107+
</View>
108+
)}
109+
</View>
110+
);
111+
};

‎src/embedded/components/IterableEmbeddedBanner/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './IterableEmbeddedBanner';

‎src/embedded/components/IterableEmbeddedView.tsx‎

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

55
import { IterableEmbeddedBanner } from './IterableEmbeddedBanner';
66
import { IterableEmbeddedCard } from './IterableEmbeddedCard';
7-
import { IterableEmbeddedNotification } from './IterableEmbeddedNotification/IterableEmbeddedNotification';
7+
import { IterableEmbeddedNotification } from './IterableEmbeddedNotification';
88
import type { IterableEmbeddedComponentProps } from '../types/IterableEmbeddedComponentProps';
99

1010
/**

‎src/embedded/components/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export * from './IterableEmbeddedBanner';
1+
export * from './IterableEmbeddedBanner/IterableEmbeddedBanner';
22
export * from './IterableEmbeddedCard';
33
export * from './IterableEmbeddedNotification/IterableEmbeddedNotification';
44
export * from './IterableEmbeddedView';

0 commit comments

Comments
 (0)