Skip to content

Commit 324b7ab

Browse files
lposenlposen
committed
style: rename embeddedSection to embeddedItem and update button styles in Embedded component
1 parent a522b49 commit 324b7ab

2 files changed

Lines changed: 123 additions & 118 deletions

File tree

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ const styles = StyleSheet.create({
2020
button,
2121
buttonText,
2222
container,
23-
embeddedSection: {
24-
23+
embeddedItem: {
2524
marginBottom: 16,
2625
},
2726
hr,

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

Lines changed: 122 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -77,140 +77,146 @@ export const Embedded = () => {
7777
}, []);
7878

7979
return (
80-
<SafeAreaView style={styles.container}>
81-
<Text style={styles.title}>Embedded</Text>
82-
{!Iterable.embeddedManager.isEnabled && (
83-
<View style={styles.warningContainer}>
84-
<Text style={styles.warningText}>
85-
⚠️ Embedded messaging is disabled. Please enable it in your Iterable
86-
config.
87-
</Text>
88-
</View>
89-
)}
90-
<View style={styles.utilitySection}>
91-
<View style={styles.viewTypeSelector}>
92-
<Text style={styles.text}>Select View Type:</Text>
93-
<View style={styles.viewTypeButtons}>
94-
<TouchableOpacity
95-
style={[
96-
styles.viewTypeButton,
97-
selectedViewType === IterableEmbeddedViewType.Banner &&
98-
styles.viewTypeButtonSelected,
99-
]}
100-
onPress={() =>
101-
setSelectedViewType(IterableEmbeddedViewType.Banner)
102-
}
103-
>
104-
<Text
80+
<EmbeddedSessionManager>
81+
<SafeAreaView style={styles.container}>
82+
<Text style={styles.title}>Embedded</Text>
83+
{!Iterable.embeddedManager.isEnabled && (
84+
<View style={styles.warningContainer}>
85+
<Text style={styles.warningText}>
86+
⚠️ Embedded messaging is disabled. Please enable it in your
87+
Iterable config.
88+
</Text>
89+
</View>
90+
)}
91+
<View style={styles.utilitySection}>
92+
<View style={styles.viewTypeSelector}>
93+
<Text style={styles.text}>Select View Type:</Text>
94+
<View style={styles.viewTypeButtons}>
95+
<TouchableOpacity
10596
style={[
106-
styles.viewTypeButtonText,
97+
styles.viewTypeButton,
10798
selectedViewType === IterableEmbeddedViewType.Banner &&
108-
styles.viewTypeButtonTextSelected,
99+
styles.viewTypeButtonSelected,
109100
]}
101+
onPress={() =>
102+
setSelectedViewType(IterableEmbeddedViewType.Banner)
103+
}
110104
>
111-
Banner
112-
</Text>
113-
</TouchableOpacity>
114-
<TouchableOpacity
115-
style={[
116-
styles.viewTypeButton,
117-
selectedViewType === IterableEmbeddedViewType.Card &&
118-
styles.viewTypeButtonSelected,
119-
]}
120-
onPress={() => setSelectedViewType(IterableEmbeddedViewType.Card)}
121-
>
122-
<Text
105+
<Text
106+
style={[
107+
styles.viewTypeButtonText,
108+
selectedViewType === IterableEmbeddedViewType.Banner &&
109+
styles.viewTypeButtonTextSelected,
110+
]}
111+
>
112+
Banner
113+
</Text>
114+
</TouchableOpacity>
115+
<TouchableOpacity
123116
style={[
124-
styles.viewTypeButtonText,
117+
styles.viewTypeButton,
125118
selectedViewType === IterableEmbeddedViewType.Card &&
126-
styles.viewTypeButtonTextSelected,
119+
styles.viewTypeButtonSelected,
127120
]}
121+
onPress={() =>
122+
setSelectedViewType(IterableEmbeddedViewType.Card)
123+
}
128124
>
129-
Card
130-
</Text>
131-
</TouchableOpacity>
132-
<TouchableOpacity
133-
style={[
134-
styles.viewTypeButton,
135-
selectedViewType === IterableEmbeddedViewType.Notification &&
136-
styles.viewTypeButtonSelected,
137-
]}
138-
onPress={() =>
139-
setSelectedViewType(IterableEmbeddedViewType.Notification)
140-
}
141-
>
142-
<Text
125+
<Text
126+
style={[
127+
styles.viewTypeButtonText,
128+
selectedViewType === IterableEmbeddedViewType.Card &&
129+
styles.viewTypeButtonTextSelected,
130+
]}
131+
>
132+
Card
133+
</Text>
134+
</TouchableOpacity>
135+
<TouchableOpacity
143136
style={[
144-
styles.viewTypeButtonText,
137+
styles.viewTypeButton,
145138
selectedViewType === IterableEmbeddedViewType.Notification &&
146-
styles.viewTypeButtonTextSelected,
139+
styles.viewTypeButtonSelected,
147140
]}
141+
onPress={() =>
142+
setSelectedViewType(IterableEmbeddedViewType.Notification)
143+
}
148144
>
149-
Notification
150-
</Text>
151-
</TouchableOpacity>
145+
<Text
146+
style={[
147+
styles.viewTypeButtonText,
148+
selectedViewType ===
149+
IterableEmbeddedViewType.Notification &&
150+
styles.viewTypeButtonTextSelected,
151+
]}
152+
>
153+
Notification
154+
</Text>
155+
</TouchableOpacity>
156+
</View>
152157
</View>
153-
</View>
154-
<TouchableOpacity style={styles.button} onPress={openConfigEditor}>
155-
<Text style={styles.buttonText}>Set view config</Text>
156-
</TouchableOpacity>
157-
<View style={styles.inputContainer}>
158-
<Text style={styles.text}>Placement IDs (comma-separated):</Text>
159-
<TextInput
160-
style={styles.textInput}
161-
placeholder="e.g., 1, 2, 3"
162-
placeholderTextColor="#999"
163-
value={placementIdsInput}
164-
onChangeText={setPlacementIdsInput}
165-
keyboardType="numbers-and-punctuation"
166-
/>
167-
<TouchableOpacity style={styles.button} onPress={getEmbeddedMessages}>
168-
<Text style={styles.buttonText}>
169-
Get messages for placement ids
170-
</Text>
158+
<TouchableOpacity style={styles.button} onPress={openConfigEditor}>
159+
<Text style={styles.buttonText}>Set view config</Text>
171160
</TouchableOpacity>
172-
</View>
173-
</View>
174-
<Modal
175-
visible={configEditorVisible}
176-
animationType="slide"
177-
transparent
178-
onRequestClose={closeConfigEditor}
179-
>
180-
<View style={styles.modalOverlay}>
181-
<View style={styles.modalContent}>
161+
<View style={styles.inputContainer}>
162+
<Text style={styles.text}>Placement IDs (comma-separated):</Text>
182163
<TextInput
183-
style={styles.jsonEditor}
184-
value={configJson}
185-
onChangeText={setConfigJson}
186-
multiline
187-
textAlignVertical="top"
188-
placeholder={DEFAULT_CONFIG_JSON}
164+
style={styles.textInput}
165+
placeholder="e.g., 1, 2, 3"
189166
placeholderTextColor="#999"
167+
value={placementIdsInput}
168+
onChangeText={setPlacementIdsInput}
169+
keyboardType="numbers-and-punctuation"
190170
/>
191-
<View style={styles.modalButtons}>
192-
<TouchableOpacity
193-
style={[styles.button, styles.modalButton]}
194-
onPress={closeConfigEditor}
195-
>
196-
<Text style={styles.buttonText}>Cancel</Text>
197-
</TouchableOpacity>
198-
<TouchableOpacity
199-
style={[styles.button, styles.modalButton]}
200-
onPress={applyConfig}
201-
>
202-
<Text style={styles.buttonText}>Apply</Text>
203-
</TouchableOpacity>
204-
</View>
171+
<TouchableOpacity
172+
style={styles.button}
173+
onPress={getEmbeddedMessages}
174+
>
175+
<Text style={styles.buttonText}>
176+
Get messages for placement ids
177+
</Text>
178+
</TouchableOpacity>
205179
</View>
206180
</View>
207-
</Modal>
208-
<View style={styles.hr} />
209-
<ScrollView>
210-
<EmbeddedSessionManager>
181+
<Modal
182+
visible={configEditorVisible}
183+
animationType="slide"
184+
transparent
185+
onRequestClose={closeConfigEditor}
186+
>
187+
<View style={styles.modalOverlay}>
188+
<View style={styles.modalContent}>
189+
<TextInput
190+
style={styles.jsonEditor}
191+
value={configJson}
192+
onChangeText={setConfigJson}
193+
multiline
194+
textAlignVertical="top"
195+
placeholder={DEFAULT_CONFIG_JSON}
196+
placeholderTextColor="#999"
197+
/>
198+
<View style={styles.modalButtons}>
199+
<TouchableOpacity
200+
style={[styles.button, styles.modalButton]}
201+
onPress={closeConfigEditor}
202+
>
203+
<Text style={styles.buttonText}>Cancel</Text>
204+
</TouchableOpacity>
205+
<TouchableOpacity
206+
style={[styles.button, styles.modalButton]}
207+
onPress={applyConfig}
208+
>
209+
<Text style={styles.buttonText}>Apply</Text>
210+
</TouchableOpacity>
211+
</View>
212+
</View>
213+
</View>
214+
</Modal>
215+
<View style={styles.hr} />
216+
<ScrollView>
211217
{embeddedMessages.map((message) => (
212218
<View
213-
style={styles.embeddedSection}
219+
style={styles.embeddedItem}
214220
key={message.metadata.messageId}
215221
>
216222
<IterableEmbeddedView
@@ -220,9 +226,9 @@ export const Embedded = () => {
220226
/>
221227
</View>
222228
))}
223-
</EmbeddedSessionManager>
224-
</ScrollView>
225-
</SafeAreaView>
229+
</ScrollView>
230+
</SafeAreaView>
231+
</EmbeddedSessionManager>
226232
);
227233
};
228234

0 commit comments

Comments
 (0)