Skip to content

Commit 1915342

Browse files
cacheungcacheung
authored
Merge pull request #506 from cacheung/ImageOnlyTemplate
Update Image only template and bug fixes
2 parents e6a6ca1 + 8d6096f commit 1915342

File tree

6 files changed

+321
-25
lines changed

6 files changed

+321
-25
lines changed

‎apps/AEPSampleAppNewArchEnabled/app/ContentCardView.tsx‎

Lines changed: 285 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ const ContentCardView = () => {
215215
</Modal>
216216
</View>
217217

218-
<ScrollView contentContainerStyle={{ marginRight: 20 }}>
218+
<ScrollView contentContainerStyle={{ paddingBottom: 20 }}>
219219
{selectedView === "SmallImage" && (
220220
<View>
221221
{renderStyledText("[Basic] all fields")}
@@ -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}
@@ -490,8 +490,180 @@ const ContentCardView = () => {
490490

491491
{selectedView === "ImageOnly" && (
492492
<View>
493-
{renderStyledText("basic")}
494-
<ContentView key="1" data={IMAGE_ONLY_CONTENT_ALL_FIELDS} />
493+
{renderStyledText("1. All fields")}
494+
<ContentView
495+
key="1"
496+
data={IMAGE_ONLY_CONTENT_ALL_FIELDS}
497+
listener={(event, identifier) => {
498+
console.log("Event triggered: - for imageOnly image 1", event, identifier);
499+
}}
500+
/>
501+
502+
{renderStyledText("2. Images with Action url, dismiss style simple - card height 800")}
503+
<ContentView
504+
key="2"
505+
data={IMAGE_ONLY_CONTENT_WITH_ACTION_URL}
506+
cardHeight={500}
507+
listener={(event, identifier) => {
508+
console.log("Event triggered: - for imageOnly image 2", event, identifier);
509+
}}
510+
/>
511+
512+
{renderStyledText("3.Adobe default image, dismiss style circle - card height 400")}
513+
<ContentView
514+
key="3"
515+
data={IMAGE_ONLY_CONTENT_DISMISS_BUTTON_CIRCLE}
516+
cardHeight={400}
517+
listener={(event, identifier) => {
518+
console.log("Event triggered: - for imageOnly image 3", event, identifier);
519+
}}
520+
/>
521+
522+
{renderStyledText("4. No dismiss button - no card height")}
523+
<ContentView
524+
key="4"
525+
data={IMAGE_ONLY_CONTENT_NO_DISMISS_BUTTON}
526+
/>
527+
528+
{renderStyledText("5. [image] Invalid")}
529+
<ContentView
530+
key="5"
531+
data={IMAGE_ONLY_CONTENT_INVALID_IMAGE}
532+
cardHeight={200}
533+
/>
534+
535+
536+
{renderStyledText("6.[action] No actionUrl")}
537+
<ContentView
538+
key="6"
539+
data={IMAGE_ONLY_CONTENT_NO_ACTION}
540+
cardHeight={200}
541+
/>
542+
543+
{renderStyledText("7.[style] Custom aspect ratio (1:1)")}
544+
<ContentView
545+
key="7"
546+
data={IMAGE_ONLY_CONTENT_ALL_FIELDS}
547+
cardHeight={200}
548+
styleOverrides={{
549+
imageOnlyStyle: {
550+
image: {
551+
aspectRatio: 1/ 1,
552+
},
553+
},
554+
}}
555+
listener={(event, identifier) => {
556+
console.log("Event triggered: - for imageOnly image 7", event, identifier);
557+
}}
558+
/>
559+
560+
{renderStyledText("8.[style] Custom height (150)")}
561+
<ContentView
562+
key="8"
563+
data={IMAGE_ONLY_CONTENT_ALL_FIELDS}
564+
cardHeight={400}
565+
styleOverrides={{
566+
imageOnlyStyle: {
567+
image: {
568+
height: 150,
569+
},
570+
},
571+
}}
572+
/>
573+
574+
{renderStyledText("9. [style] Custom width (80%), set image container backgroud color")}
575+
<ContentView
576+
key="9"
577+
data={IMAGE_ONLY_CONTENT_ALL_FIELDS}
578+
cardHeight={200}
579+
styleOverrides={{
580+
imageOnlyStyle: {
581+
image: {
582+
width: "80%",
583+
},
584+
imageContainer: {
585+
backgroundColor: "#79f4bbff",
586+
},
587+
},
588+
}}
589+
/>
590+
591+
{renderStyledText("10. [style] Card customization")}
592+
<ContentView
593+
key="10"
594+
data={IMAGE_ONLY_CONTENT_ALL_FIELDS}
595+
cardHeight={400}
596+
styleOverrides={{
597+
imageOnlyStyle: {
598+
card: {
599+
borderRadius: 80,
600+
margin: 30,
601+
},
602+
image: {
603+
width: '50%',
604+
resizeMode: 'stretch'
605+
},
606+
},
607+
}}
608+
/>
609+
610+
{renderStyledText("11.[style] Image container customization")}
611+
<ContentView
612+
key="11"
613+
data={IMAGE_ONLY_CONTENT_ALL_FIELDS}
614+
cardHeight={200}
615+
styleOverrides={{
616+
imageOnlyStyle: {
617+
imageContainer: {
618+
borderRadius: 15,
619+
borderWidth: 5,
620+
borderColor: "#FF69B4",
621+
maxHeight: 100,
622+
},
623+
image: {
624+
resizeMode: "center",
625+
backgroundColor: "#79f4bbff",
626+
},
627+
},
628+
}}
629+
/>
630+
631+
{renderStyledText("12.[style] Combined styles")}
632+
<ContentView
633+
key="12"
634+
data={IMAGE_ONLY_CONTENT_ALL_FIELDS}
635+
cardHeight={200}
636+
styleOverrides={{
637+
imageOnlyStyle: {
638+
card: {
639+
margin: 5,
640+
borderRadius: 0,
641+
},
642+
imageContainer: {
643+
backgroundColor: "#E6E6FA",
644+
minHeight: 180,
645+
},
646+
image: {
647+
resizeMode: "cover",
648+
},
649+
},
650+
}}
651+
/>
652+
653+
{renderStyledText("13.[image] No darkUrl (only light mode)")}
654+
<ContentView
655+
key="13"
656+
data={IMAGE_ONLY_CONTENT_NO_DARK_URL}
657+
cardHeight={200}
658+
/>
659+
660+
{renderStyledText("1.[image] No Light Mode (only dark mode) - no actionUrl")}
661+
<ContentView
662+
key="15"
663+
data={IMAGE_ONLY_CONTENT_NO_LIGHT_MODE}
664+
cardHeight={300}
665+
/>
666+
<View style={{ height: 200 }} />
495667
</View>
496668
)}
497669
{selectedView === "Remote" && (
@@ -985,13 +1157,120 @@ const LARGE_IMAGE_CONTENT_3_BUTTONS: ContentTemplate = {
9851157
const IMAGE_ONLY_CONTENT_ALL_FIELDS: ContentTemplate = {
9861158
id: "image-only-all-fields",
9871159
type: TemplateType.IMAGE_ONLY,
1160+
imageOnlyData: {
1161+
actionUrl: "https://www.adobe.com/",
1162+
image: {
1163+
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",
1165+
alt: "flight offer",
1166+
},
1167+
dismissBtn: {
1168+
style: "simple",
1169+
},
1170+
},
1171+
};
1172+
1173+
const IMAGE_ONLY_CONTENT_NO_DISMISS_BUTTON: ContentTemplate = {
1174+
id: "image-only-no-dismiss",
1175+
type: TemplateType.IMAGE_ONLY,
1176+
imageOnlyData: {
1177+
actionUrl: "https://google.com",
1178+
image: {
1179+
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",
1181+
alt: "flight offer",
1182+
},
1183+
},
1184+
};
1185+
1186+
const IMAGE_ONLY_CONTENT_DISMISS_BUTTON_CIRCLE: ContentTemplate = {
1187+
id: "image-only-dismiss-circle",
1188+
type: TemplateType.IMAGE_ONLY,
9881189
imageOnlyData: {
9891190
actionUrl: "https://google.com",
9901191
image: {
9911192
url: "https://i.ibb.co/0X8R3TG/Messages-24.png",
992-
darkUrl: "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:*",
9931194
alt: "flight offer",
9941195
},
1196+
dismissBtn: {
1197+
style: "circle",
1198+
},
1199+
},
1200+
};
1201+
1202+
const IMAGE_ONLY_CONTENT_INVALID_IMAGE: ContentTemplate = {
1203+
id: "image-only-invalid-image",
1204+
type: TemplateType.IMAGE_ONLY,
1205+
imageOnlyData: {
1206+
actionUrl: "https://google.com",
1207+
image: {
1208+
url: "https://invalid-url-that-will-fail",
1209+
darkUrl: "https://another-invalid-url",
1210+
alt: "broken image",
1211+
},
1212+
dismissBtn: {
1213+
style: "simple",
1214+
},
1215+
},
1216+
};
1217+
1218+
1219+
const IMAGE_ONLY_CONTENT_NO_ACTION: ContentTemplate = {
1220+
id: "image-only-no-action",
1221+
type: TemplateType.IMAGE_ONLY,
1222+
imageOnlyData: {
1223+
image: {
1224+
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",
1226+
alt: "non-clickable image",
1227+
},
1228+
dismissBtn: {
1229+
style: "simple",
1230+
},
1231+
},
1232+
};
1233+
1234+
const IMAGE_ONLY_CONTENT_NO_DARK_URL: ContentTemplate = {
1235+
id: "image-only-no-dark-url",
1236+
type: TemplateType.IMAGE_ONLY,
1237+
imageOnlyData: {
1238+
actionUrl: "https://google.com",
1239+
image: {
1240+
url: "https://cdn-icons-png.flaticon.com/256/3303/3303838.png",
1241+
alt: "light mode only image",
1242+
},
1243+
dismissBtn: {
1244+
style: "simple",
1245+
},
1246+
},
1247+
};
1248+
1249+
const IMAGE_ONLY_CONTENT_NO_LIGHT_MODE: ContentTemplate = {
1250+
id: "image-only-different-image",
1251+
type: TemplateType.IMAGE_ONLY,
1252+
imageOnlyData: {
1253+
image: {
1254+
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:*",
1256+
alt: "basketball icon",
1257+
},
1258+
dismissBtn: {
1259+
style: "circle",
1260+
},
1261+
},
1262+
};
1263+
1264+
const IMAGE_ONLY_CONTENT_WITH_ACTION_URL: ContentTemplate = {
1265+
id: "image-only-with-action-url",
1266+
type: TemplateType.IMAGE_ONLY,
1267+
imageOnlyData: {
1268+
actionUrl: "https://google.com",
1269+
image: {
1270+
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:*",
1272+
alt: "with action URL - Google Images",
1273+
},
9951274
dismissBtn: {
9961275
style: "simple",
9971276
},

‎packages/authoring-ui/src/ImageOnlyCard.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { ContentViewEvent } from "./common/ContentViewEvent";
1717

1818
export interface ImageOnlyContentProps {
1919
data: ImageOnlyContentData;
20+
height?: number;
2021
styleOverrides?: ImageOnlyContentStyle;
2122
listener?: (eventName: ContentViewEvent, interactId?: string) => void;
2223
}
@@ -30,7 +31,7 @@ export interface ImageOnlyContentProps {
3031
export const ImageOnlyContent: React.FC<ImageOnlyContentProps> = (
3132
props: ImageOnlyContentProps
3233
) => {
33-
const { data, styleOverrides, listener } = props;
34-
const component = convertImageOnlyContentToComponent(data, styleOverrides);
34+
const { data, height, styleOverrides, listener } = props;
35+
const component = convertImageOnlyContentToComponent(data, height, styleOverrides);
3536
return <ContentView component={component} onEvent={listener} />;
3637
};

0 commit comments

Comments
 (0)