chore: [IOBP-583] Added payment logo uri to ListItemNav and `ListIt…

…emRadio` (#220) ## Short description This PR introduces the possibility to set a remote image to the `ListItemNav` and `ListItemRadio` in order to show a payment logo dynamically ## List of changes proposed in this pull request - Edited `ListItemRadio` with a new payment logo with a `uri` props - Edited `ListItemNav` payment logo with the new one `paymentLogoUri` that accepts a URI to render the logo as icon
pagopa · Mar 18, 2024 · fbd3531 · fbd3531
1 parent 0d770c2
commit fbd3531
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 15 deletions.
diff --git a/example/src/pages/ListItem.tsx b/example/src/pages/ListItem.tsx
@@ -170,7 +170,7 @@ const renderListItemNav = () => (
         <ListItemNav
           value={"Value"}
           description="This is a list item nav with a payment logo"
-          paymentLogo="bancomatPay"
+          paymentLogoUri="https://github.com/pagopa/io-services-metadata/blob/master/logos/apps/paypal.png?raw=true"
           onPress={() => {
             alert("Action triggered");
           }}
@@ -179,7 +179,7 @@ const renderListItemNav = () => (
         <ListItemNav
           value={"Value"}
           description="This is a list item nav with a loading indicator"
-          paymentLogo="bancomatPay"
+          paymentLogoUri="https://github.com/pagopa/io-services-metadata/blob/master/logos/apps/paypal.png?raw=true"
           onPress={() => {
             alert("Action triggered");
           }}

diff --git a/example/src/pages/Selection.tsx b/example/src/pages/Selection.tsx
@@ -206,6 +206,13 @@ const mockRadioItems = (): ReadonlyArray<RadioItem<string>> => [
     ),
     id: "example-jsx-element"
   },
+  {
+    startImage: {
+      uri: "https://github.com/pagopa/io-services-metadata/blob/master/logos/apps/paypal.png?raw=true"
+    },
+    value: "PayPal",
+    id: "example-paypal"
+  },
   {
     value: "Let's try with a basic title",
     description:

diff --git a/src/components/listitems/ListItemNav.tsx b/src/components/listitems/ListItemNav.tsx
@@ -1,5 +1,11 @@
 import React, { useCallback } from "react";
-import { GestureResponderEvent, Pressable, View } from "react-native";
+import {
+  GestureResponderEvent,
+  Image,
+  Pressable,
+  StyleSheet,
+  View
+} from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -14,6 +20,7 @@ import {
   IOListItemStyles,
   IOListItemVisualParams,
   IOScaleValues,
+  IOSelectionListItemVisualParams,
   IOSpringValues,
   IOStyles,
   hexToRgba,
@@ -23,7 +30,6 @@ import {
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
-import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { HSpacer, VSpacer } from "../spacer";
 import { Caption, H6, LabelSmall } from "../typography";
 import { LoadingSpinner } from "../loadingSpinner";
@@ -50,19 +56,26 @@ type ListItemNavPartialProps = WithTestID<{
 }>;
 
 export type ListItemNavGraphicProps =
-  | { icon?: never; iconColor?: never; paymentLogo: IOLogoPaymentType }
-  | { icon: IOIcons; iconColor?: IOColors; paymentLogo?: never }
-  | { icon?: never; iconColor?: never; paymentLogo?: never };
+  | { icon?: never; iconColor?: never; paymentLogoUri: string }
+  | { icon: IOIcons; iconColor?: IOColors; paymentLogoUri?: never }
+  | { icon?: never; iconColor?: never; paymentLogoUri?: never };
 
 export type ListItemNav = ListItemNavPartialProps & ListItemNavGraphicProps;
 
+const styles = StyleSheet.create({
+  paymentLogoSize: {
+    width: IOSelectionListItemVisualParams.iconSize,
+    height: IOSelectionListItemVisualParams.iconSize
+  }
+});
+
 export const ListItemNav = ({
   value,
   description,
   onPress,
   icon,
   iconColor = "grey-450",
-  paymentLogo,
+  paymentLogoUri,
   accessibilityLabel,
   testID,
   hideChevron = false,
@@ -203,12 +216,16 @@ export const ListItemNav = ({
               />
             </View>
           )}
-          {paymentLogo && (
+          {paymentLogoUri && (
             <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-              <LogoPayment
-                name={paymentLogo}
-                size={IOListItemVisualParams.iconSize}
+              <Image
+                source={{ uri: paymentLogoUri }}
+                style={styles.paymentLogoSize}
               />
+              {/* <LogoPayment
+                name={paymentLogoUri}
+                size={IOListItemVisualParams.iconSize}
+              /> */}
             </View>
           )}
           <View style={IOStyles.flex}>{listItemNavContent}</View>

diff --git a/src/components/listitems/ListItemRadio.tsx b/src/components/listitems/ListItemRadio.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useCallback, useState } from "react";
-import { Pressable, View } from "react-native";
+import { Image, Pressable, StyleSheet, View } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
   Extrapolate,
@@ -30,8 +30,9 @@ import { HSpacer, VSpacer } from "../spacer";
 import { H6, LabelSmall } from "../typography";
 
 type ListItemRadioGraphicProps =
-  | { icon?: never; paymentLogo: IOLogoPaymentType }
-  | { icon: IOIcons; paymentLogo?: never };
+  | { icon?: never; paymentLogo: IOLogoPaymentType; uri?: never }
+  | { icon?: never; paymentLogo?: never; uri: string }
+  | { icon: IOIcons; paymentLogo?: never; uri?: never };
 
 type ListItemRadioLoadingProps =
   | {
@@ -64,6 +65,13 @@ type OwnProps = Props &
     "onPress" | "accessibilityLabel" | "disabled"
   >;
 
+const styles = StyleSheet.create({
+  imageSize: {
+    width: IOSelectionListItemVisualParams.iconSize,
+    height: IOSelectionListItemVisualParams.iconSize
+  }
+});
+
 /**
  * `ListItemRadio` component with the automatic state management that uses a {@link AnimatedCheckBox}
  * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
@@ -237,6 +245,9 @@ export const ListItemRadio = ({
                       size={IOSelectionListItemVisualParams.iconSize}
                     />
                   )}
+                  {startImage.uri && (
+                    <Image source={startImage} style={styles.imageSize} />
+                  )}
                   {startImage.paymentLogo && (
                     <LogoPayment
                       name={startImage.paymentLogo}