Merge pull request #35499 from dragnoir/34316-fix

fix: EReceipt icon via props no state
Expensify · Feb 9, 2024 · 2017a3a · 2017a3a
2 parents 383b428 + e88350f
commit 2017a3a
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 28 deletions.
diff --git a/src/components/EReceipt.tsx b/src/components/EReceipt.tsx
@@ -51,7 +51,10 @@ function EReceipt({transaction, transactionID}: EReceiptProps) {
     return (
         <View style={[styles.eReceiptContainer, primaryColor ? StyleUtils.getBackgroundColorStyle(primaryColor) : undefined]}>
             <View style={styles.fullScreen}>
-                <EReceiptThumbnail transactionID={transactionID} />
+                <EReceiptThumbnail
+                    transactionID={transactionID}
+                    centerIconV={false}
+                />
             </View>
             <View style={[styles.alignItemsCenter, styles.ph8, styles.pb14, styles.pt8]}>
                 <View style={[StyleUtils.getWidthAndHeightStyle(variables.eReceiptIconWidth, variables.eReceiptIconHeight)]} />

diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx
@@ -1,5 +1,4 @@
-import React, {useMemo, useState} from 'react';
-import type {LayoutChangeEvent} from 'react-native';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
@@ -20,10 +19,18 @@ type EReceiptThumbnailOnyxProps = {
     transaction: OnyxEntry<Transaction>;
 };
 
+type IconSize = 'small' | 'medium' | 'large';
+
 type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & {
     /** TransactionID of the transaction this EReceipt corresponds to. It's used by withOnyx HOC */
     // eslint-disable-next-line react/no-unused-prop-types
     transactionID: string;
+
+    /** Center the eReceipt Icon vertically */
+    centerIconV?: boolean;
+
+    /** Size of the eReceipt icon. Possible values 'small', 'medium' or 'large' */
+    iconSize?: IconSize;
 };
 
 const backgroundImages = {
@@ -35,41 +42,28 @@ const backgroundImages = {
     [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink,
 };
 
-function EReceiptThumbnail({transaction}: EReceiptThumbnailProps) {
+function EReceiptThumbnail({transaction, centerIconV = true, iconSize = 'large'}: EReceiptThumbnailProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
-    const [containerWidth, setContainerWidth] = useState(0);
-    const [containerHeight, setContainerHeight] = useState(0);
-
     const backgroundImage = useMemo(() => backgroundImages[StyleUtils.getEReceiptColorCode(transaction)], [StyleUtils, transaction]);
 
     const colorStyles = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction));
     const primaryColor = colorStyles?.backgroundColor;
     const secondaryColor = colorStyles?.color;
-
-    const onContainerLayout = (event: LayoutChangeEvent) => {
-        const {width, height} = event.nativeEvent.layout;
-        setContainerWidth(width);
-        setContainerHeight(height);
-    };
-
     const transactionDetails = ReportUtils.getTransactionDetails(transaction);
     const transactionMCCGroup = transactionDetails?.mccGroup;
     const MCCIcon = transactionMCCGroup ? MCCIcons[`${transactionMCCGroup}`] : undefined;
 
-    const isSmall = containerWidth && containerWidth < variables.eReceiptThumbnailSmallBreakpoint;
-    const isMedium = containerWidth && containerWidth < variables.eReceiptThumbnailMediumBreakpoint;
-
     let receiptIconWidth: number = variables.eReceiptIconWidth;
     let receiptIconHeight: number = variables.eReceiptIconHeight;
     let receiptMCCSize: number = variables.eReceiptMCCHeightWidth;
 
-    if (isSmall) {
+    if (iconSize === 'small') {
         receiptIconWidth = variables.eReceiptIconWidthSmall;
         receiptIconHeight = variables.eReceiptIconHeightSmall;
         receiptMCCSize = variables.eReceiptMCCHeightWidthSmall;
-    } else if (isMedium) {
+    } else if (iconSize === 'medium') {
         receiptIconWidth = variables.eReceiptIconWidthMedium;
         receiptIconHeight = variables.eReceiptIconHeightMedium;
         receiptMCCSize = variables.eReceiptMCCHeightWidthMedium;
@@ -82,9 +76,8 @@ function EReceiptThumbnail({transaction}: EReceiptThumbnailProps) {
                 primaryColor ? StyleUtils.getBackgroundColorStyle(primaryColor) : {},
                 styles.overflowHidden,
                 styles.alignItemsCenter,
-                containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint ? styles.justifyContentCenter : {},
+                centerIconV ? styles.justifyContentCenter : {},
             ]}
-            onLayout={onContainerLayout}
         >
             <Image
                 source={backgroundImage}

diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx
@@ -17,6 +17,8 @@ import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import CONST from '@src/CONST';
 import type {Transaction} from '@src/types/onyx';
 
+type IconSize = 'small' | 'medium' | 'large';
+
 type ReportActionItemImageProps = {
     /** thumbnail URI for the image */
     thumbnail?: string | ImageSourcePropType | null;
@@ -38,6 +40,9 @@ type ReportActionItemImageProps = {
 
     /** Filename of attachment */
     filename?: string;
+
+    /** number of images displayed in the same parent container */
+    iconSize?: IconSize;
 };
 
 /**
@@ -46,7 +51,16 @@ type ReportActionItemImageProps = {
  * and optional preview modal as well.
  */
 
-function ReportActionItemImage({thumbnail, image, enablePreviewModal = false, transaction, canEditReceipt = false, isLocalFile = false, filename}: ReportActionItemImageProps) {
+function ReportActionItemImage({
+    thumbnail,
+    image,
+    enablePreviewModal = false,
+    transaction,
+    canEditReceipt = false,
+    isLocalFile = false,
+    filename,
+    iconSize = 'large',
+}: ReportActionItemImageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const imageSource = tryResolveUrlFromApiRoot(image ?? '');
@@ -58,7 +72,10 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal = false, tr
     if (isEReceipt) {
         receiptImageComponent = (
             <View style={[styles.w100, styles.h100]}>
-                <EReceiptThumbnail transactionID={transaction.transactionID} />
+                <EReceiptThumbnail
+                    transactionID={transaction.transactionID}
+                    iconSize={iconSize as IconSize}
+                />
             </View>
         );
     } else if (thumbnail && !isLocalFile && !Str.isPDF(imageSource as string)) {

diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx
@@ -58,6 +58,9 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report
         heightStyle = StyleUtils.getHeight(variables.reportActionImagesMultipleImageHeight);
     }
 
+    // The icon size varies depending on the number of images we are displaying.
+    const iconSize = numberOfShownImages > 2 ? 'small' : 'medium';
+
     const hoverStyle = isHovered ? styles.reportPreviewBoxHoverBorder : undefined;
 
     const triangleWidth = variables.reportActionItemImagesMoreCornerTriangleWidth;
@@ -80,6 +83,7 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report
                             image={image}
                             isLocalFile={isLocalFile}
                             transaction={transaction}
+                            iconSize={iconSize}
                         />
                         {isLastImage && remaining > 0 && (
                             <View style={[styles.reportActionItemImagesMoreContainer]}>

diff --git a/src/stories/EReceiptThumbail.stories.js b/src/stories/EReceiptThumbail.stories.js
@@ -17,23 +17,38 @@ function Template(args) {
     return (
         <View style={{display: 'flex', flexDirection: 'column', gap: 12}}>
             <View>
-                <EReceiptThumbnail {...args} />
+                <EReceiptThumbnail
+                    {...args}
+                    iconSize="large"
+                />
             </View>
 
             <View style={{height: 116, width: 89, borderRadius: 0, overflow: 'hidden'}}>
-                <EReceiptThumbnail {...args} />
+                <EReceiptThumbnail
+                    {...args}
+                    iconSize="small"
+                />
             </View>
 
             <View style={{height: 140, width: 143, borderRadius: 16, overflow: 'hidden'}}>
-                <EReceiptThumbnail {...args} />
+                <EReceiptThumbnail
+                    {...args}
+                    iconSize="medium"
+                />
             </View>
 
             <View style={{height: 140, width: 283, borderRadius: 16, overflow: 'hidden'}}>
-                <EReceiptThumbnail {...args} />
+                <EReceiptThumbnail
+                    {...args}
+                    iconSize="medium"
+                />
             </View>
 
             <View style={{height: 175, width: 335, borderRadius: 16, overflow: 'hidden'}}>
-                <EReceiptThumbnail {...args} />
+                <EReceiptThumbnail
+                    {...args}
+                    iconSize="large"
+                />
             </View>
         </View>
     );