Skip to content

Commit 6ab2b43

Browse files
yangyansong-adbeyangyansong-adbe
authored
Fix bugs in Themes (#509)
1 parent 1915342 commit 6ab2b43

File tree

5 files changed

+118
-69
lines changed

5 files changed

+118
-69
lines changed

‎apps/AEPSampleAppNewArchEnabled/app/ContentCardView.tsx‎

Lines changed: 71 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,13 @@ const ContentCardView = () => {
6666
};
6767

6868
useEffect(() => {
69-
Messaging.updatePropositionsForSurfaces(["rn/ios/small_image"]);
69+
Messaging.updatePropositionsForSurfaces(["rn/ios/remote_image"]);
7070
// Note:
7171
// - Call above to update the propositions and cache the content locally
7272
// - Customers may call this function when launching the app
7373
// MobileCore.trackAction("xyz");
7474
// const provider = new ContentProvider("card/ms");
75-
const provider = new ContentProvider("rn/ios/small_image");
75+
const provider = new ContentProvider("rn/ios/remote_image");
7676
provider
7777
.getContent()
7878
.then((content) => {
@@ -246,7 +246,7 @@ const ContentCardView = () => {
246246
},
247247
}}
248248
>
249-
<ContentView
249+
<ContentView
250250
key="1"
251251
cardHeight={160}
252252
data={SMALL_IMAGE_CONTENT_ALL_FIELDS}
@@ -474,7 +474,7 @@ const ContentCardView = () => {
474474
},
475475
}}
476476
>
477-
<ContentView
477+
<ContentView
478478
key="7"
479479
cardHeight={160}
480480
data={LARGE_IMAGE_CONTENT_DARK_URL}
@@ -491,39 +491,52 @@ const ContentCardView = () => {
491491
{selectedView === "ImageOnly" && (
492492
<View>
493493
{renderStyledText("1. All fields")}
494-
<ContentView
495-
key="1"
494+
<ContentView
495+
key="1"
496496
data={IMAGE_ONLY_CONTENT_ALL_FIELDS}
497497
listener={(event, identifier) => {
498-
console.log("Event triggered: - for imageOnly image 1", event, identifier);
498+
console.log(
499+
"Event triggered: - for imageOnly image 1",
500+
event,
501+
identifier
502+
);
499503
}}
500504
/>
501-
502-
{renderStyledText("2. Images with Action url, dismiss style simple - card height 800")}
503-
<ContentView
504-
key="2"
505+
506+
{renderStyledText(
507+
"2. Images with Action url, dismiss style simple - card height 800"
508+
)}
509+
<ContentView
510+
key="2"
505511
data={IMAGE_ONLY_CONTENT_WITH_ACTION_URL}
506512
cardHeight={500}
507513
listener={(event, identifier) => {
508-
console.log("Event triggered: - for imageOnly image 2", event, identifier);
514+
console.log(
515+
"Event triggered: - for imageOnly image 2",
516+
event,
517+
identifier
518+
);
509519
}}
510520
/>
511521

512-
{renderStyledText("3.Adobe default image, dismiss style circle - card height 400")}
513-
<ContentView
514-
key="3"
522+
{renderStyledText(
523+
"3.Adobe default image, dismiss style circle - card height 400"
524+
)}
525+
<ContentView
526+
key="3"
515527
data={IMAGE_ONLY_CONTENT_DISMISS_BUTTON_CIRCLE}
516528
cardHeight={400}
517529
listener={(event, identifier) => {
518-
console.log("Event triggered: - for imageOnly image 3", event, identifier);
530+
console.log(
531+
"Event triggered: - for imageOnly image 3",
532+
event,
533+
identifier
534+
);
519535
}}
520536
/>
521537

522538
{renderStyledText("4. No dismiss button - no card height")}
523-
<ContentView
524-
key="4"
525-
data={IMAGE_ONLY_CONTENT_NO_DISMISS_BUTTON}
526-
/>
539+
<ContentView key="4" data={IMAGE_ONLY_CONTENT_NO_DISMISS_BUTTON} />
527540

528541
{renderStyledText("5. [image] Invalid")}
529542
<ContentView
@@ -532,7 +545,6 @@ const ContentCardView = () => {
532545
cardHeight={200}
533546
/>
534547

535-
536548
{renderStyledText("6.[action] No actionUrl")}
537549
<ContentView
538550
key="6"
@@ -548,30 +560,36 @@ const ContentCardView = () => {
548560
styleOverrides={{
549561
imageOnlyStyle: {
550562
image: {
551-
aspectRatio: 1/ 1,
563+
aspectRatio: 1 / 1,
552564
},
553565
},
554566
}}
555567
listener={(event, identifier) => {
556-
console.log("Event triggered: - for imageOnly image 7", event, identifier);
568+
console.log(
569+
"Event triggered: - for imageOnly image 7",
570+
event,
571+
identifier
572+
);
557573
}}
558574
/>
559575

560576
{renderStyledText("8.[style] Custom height (150)")}
561577
<ContentView
562-
key="8"
563-
data={IMAGE_ONLY_CONTENT_ALL_FIELDS}
564-
cardHeight={400}
565-
styleOverrides={{
566-
imageOnlyStyle: {
567-
image: {
568-
height: 150,
569-
},
578+
key="8"
579+
data={IMAGE_ONLY_CONTENT_ALL_FIELDS}
580+
cardHeight={400}
581+
styleOverrides={{
582+
imageOnlyStyle: {
583+
image: {
584+
height: 150,
570585
},
571-
}}
572-
/>
586+
},
587+
}}
588+
/>
573589

574-
{renderStyledText("9. [style] Custom width (80%), set image container backgroud color")}
590+
{renderStyledText(
591+
"9. [style] Custom width (80%), set image container backgroud color"
592+
)}
575593
<ContentView
576594
key="9"
577595
data={IMAGE_ONLY_CONTENT_ALL_FIELDS}
@@ -599,9 +617,9 @@ const ContentCardView = () => {
599617
borderRadius: 80,
600618
margin: 30,
601619
},
602-
image: {
603-
width: '50%',
604-
resizeMode: 'stretch'
620+
image: {
621+
width: "50%",
622+
resizeMode: "stretch",
605623
},
606624
},
607625
}}
@@ -620,7 +638,7 @@ const ContentCardView = () => {
620638
borderColor: "#FF69B4",
621639
maxHeight: 100,
622640
},
623-
image: {
641+
image: {
624642
resizeMode: "center",
625643
backgroundColor: "#79f4bbff",
626644
},
@@ -657,7 +675,9 @@ const ContentCardView = () => {
657675
cardHeight={200}
658676
/>
659677

660-
{renderStyledText("1.[image] No Light Mode (only dark mode) - no actionUrl")}
678+
{renderStyledText(
679+
"1.[image] No Light Mode (only dark mode) - no actionUrl"
680+
)}
661681
<ContentView
662682
key="15"
663683
data={IMAGE_ONLY_CONTENT_NO_LIGHT_MODE}
@@ -1161,7 +1181,8 @@ const IMAGE_ONLY_CONTENT_ALL_FIELDS: ContentTemplate = {
11611181
actionUrl: "https://www.adobe.com/",
11621182
image: {
11631183
url: "https://t4.ftcdn.net/jpg/13/35/40/27/240_F_1335402728_gCAPzivq5VytTJVCEcfIB2eX3ZCdE8cc.jpg",
1164-
darkUrl: "https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg",
1184+
darkUrl:
1185+
"https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg",
11651186
alt: "flight offer",
11661187
},
11671188
dismissBtn: {
@@ -1177,7 +1198,8 @@ const IMAGE_ONLY_CONTENT_NO_DISMISS_BUTTON: ContentTemplate = {
11771198
actionUrl: "https://google.com",
11781199
image: {
11791200
url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT8gAa1wUx9Ox2M6cZNwUJe32xE-l_4oqPVA&s",
1180-
darkUrl: "https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg",
1201+
darkUrl:
1202+
"https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg",
11811203
alt: "flight offer",
11821204
},
11831205
},
@@ -1190,7 +1212,8 @@ const IMAGE_ONLY_CONTENT_DISMISS_BUTTON_CIRCLE: ContentTemplate = {
11901212
actionUrl: "https://google.com",
11911213
image: {
11921214
url: "https://i.ibb.co/0X8R3TG/Messages-24.png",
1193-
darkUrl: "https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg?crop=0.760xw:1.00xh;0.204xw,0&resize=980:*",
1215+
darkUrl:
1216+
"https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg?crop=0.760xw:1.00xh;0.204xw,0&resize=980:*",
11941217
alt: "flight offer",
11951218
},
11961219
dismissBtn: {
@@ -1215,14 +1238,14 @@ const IMAGE_ONLY_CONTENT_INVALID_IMAGE: ContentTemplate = {
12151238
},
12161239
};
12171240

1218-
12191241
const IMAGE_ONLY_CONTENT_NO_ACTION: ContentTemplate = {
12201242
id: "image-only-no-action",
12211243
type: TemplateType.IMAGE_ONLY,
12221244
imageOnlyData: {
12231245
image: {
12241246
url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT8gAa1wUx9Ox2M6cZNwUJe32xE-l_4oqPVA&s",
1225-
darkUrl: "https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg",
1247+
darkUrl:
1248+
"https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg",
12261249
alt: "non-clickable image",
12271250
},
12281251
dismissBtn: {
@@ -1252,7 +1275,8 @@ const IMAGE_ONLY_CONTENT_NO_LIGHT_MODE: ContentTemplate = {
12521275
imageOnlyData: {
12531276
image: {
12541277
url: "",
1255-
darkUrl: "https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg?crop=0.760xw:1.00xh;0.204xw,0&resize=980:*",
1278+
darkUrl:
1279+
"https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg?crop=0.760xw:1.00xh;0.204xw,0&resize=980:*",
12561280
alt: "basketball icon",
12571281
},
12581282
dismissBtn: {
@@ -1268,7 +1292,8 @@ const IMAGE_ONLY_CONTENT_WITH_ACTION_URL: ContentTemplate = {
12681292
actionUrl: "https://google.com",
12691293
image: {
12701294
url: "https://t4.ftcdn.net/jpg/13/35/40/27/240_F_1335402728_gCAPzivq5VytTJVCEcfIB2eX3ZCdE8cc.jpg",
1271-
darkUrl: "https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg?crop=0.760xw:1.00xh;0.204xw,0&resize=980:*",
1295+
darkUrl:
1296+
"https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg?crop=0.760xw:1.00xh;0.204xw,0&resize=980:*",
12721297
alt: "with action URL - Google Images",
12731298
},
12741299
dismissBtn: {

‎packages/authoring-ui/src/common/ContentView.tsx‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,11 @@ const renderViewComponent = (
106106
onEvent?: (eventName: ContentViewEvent, interactId?: string) => void
107107
): React.ReactElement => {
108108
const style = { ...component.style };
109-
const viewStyle = {
109+
const viewStyle: ViewStyle = {
110110
...(style as ViewStyle),
111-
backgroundColor: theme.colors.background,
111+
...(theme.colors.background != null
112+
? { backgroundColor: theme.colors.background }
113+
: {}),
112114
};
113115

114116
return (
@@ -144,9 +146,11 @@ const renderTextComponent = (
144146
theme: Theme
145147
): React.ReactElement => {
146148
const style = { ...component.style };
147-
const textStyle = {
149+
const textStyle: ComponentTextStyle = {
148150
...(style as ComponentTextStyle),
149-
color: theme.colors.text_primary,
151+
...(theme.colors.text_primary != null
152+
? { color: theme.colors.text_primary }
153+
: {}),
150154
};
151155

152156
return (
@@ -172,9 +176,11 @@ const renderTitleComponent = (
172176
theme: Theme
173177
): React.ReactElement => {
174178
const style = { ...component.style };
175-
const titleStyle = {
179+
const titleStyle: ComponentTextStyle = {
176180
...(style as ComponentTextStyle),
177-
color: theme.colors.text_primary,
181+
...(theme.colors.text_primary != null
182+
? { color: theme.colors.text_primary }
183+
: {}),
178184
};
179185

180186
return (
@@ -200,9 +206,11 @@ const renderBodyComponent = (
200206
theme: Theme
201207
): React.ReactElement => {
202208
const style = { ...component.style };
203-
const bodyStyle = {
209+
const bodyStyle: ComponentTextStyle = {
204210
...(style as ComponentTextStyle),
205-
color: theme.colors.text_secondary,
211+
...(theme.colors.text_secondary != null
212+
? { color: theme.colors.text_secondary }
213+
: {}),
206214
};
207215

208216
return (
@@ -236,9 +244,11 @@ const renderImageComponent = (
236244
? component.darkUrl
237245
: component.url;
238246

239-
const imageStyle = {
247+
const imageStyle: ImageStyle = {
240248
...(style as ImageStyle),
241-
backgroundColor: theme.colors.image_placeholder,
249+
...(theme.colors.image_placeholder != null
250+
? { backgroundColor: theme.colors.image_placeholder }
251+
: {}),
242252
};
243253

244254
return (
@@ -276,7 +286,7 @@ const renderButtonComponent = (
276286
<View style={style as ButtonStyle}>
277287
<Button
278288
title={component.content || ""}
279-
color={theme.colors.button_text_color}
289+
color={theme.colors.button_text_color ?? undefined}
280290
onPress={handleButtonPress}
281291
/>
282292
</View>

‎packages/authoring-ui/src/common/Theme.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,6 @@ export interface Colors {
3232
background?: string;
3333
text_primary?: string;
3434
text_secondary?: string;
35-
title_background?: string;
36-
body_background?: string;
3735
image_placeholder?: string;
3836
button_text_color?: string;
3937
}

‎packages/authoring-ui/src/common/ThemeProvider.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ const defaultTheme: Themes = {
3131
background: "#FFFFFF",
3232
text_primary: "#000000",
3333
text_secondary: "#8E8E93",
34-
title_background: "#F2F2F7",
35-
body_background: "#FFFFFF",
3634
image_placeholder: "#C7C7CC",
3735
button_text_color: "dodgerblue",
3836
},
@@ -44,8 +42,6 @@ const defaultTheme: Themes = {
4442
background: "#262626",
4543
text_primary: "#FFFFFF",
4644
text_secondary: "#8E8E93",
47-
title_background: "#1C1C1E",
48-
body_background: "#262626",
4945
image_placeholder: "#48484A",
5046
button_text_color: "dodgerblue",
5147
},

0 commit comments

Comments
 (0)