Merge pull request #61840 from software-mansion-labs/Guccio163/wideViewFollowups

(cherry picked from commit d919997)

(cherry-picked to staging by mountiny)

Author: mountiny

src/CONST.ts

@@ -1504,6 +1504,7 @@ const CONST = {
         },
         RESERVED_ROOM_NAMES: ['#admins', '#announce'],
         MAX_PREVIEW_AVATARS: 4,
+        TRANSACTION_PREVIEW_WIDTH_WIDE: 303,
         MAX_ROOM_NAME_LENGTH: 99,
         LAST_MESSAGE_TEXT_MAX_LENGTH: 200,
         MIN_LENGTH_LAST_MESSAGE_WITH_ELLIPSIS: 20,

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

@@ -105,7 +105,8 @@ function MoneyRequestReportPreviewContent({
     lastTransactionViolations,
     isDelegateAccessRestricted,
     renderTransactionItem,
-    onLayout,
+    onCarouselLayout,
+    onWrapperLayout,
     currentWidth,
     reportPreviewStyles,
     shouldDisplayContextMenu = true,
@@ -410,7 +411,10 @@ function MoneyRequestReportPreviewContent({
     };
 
     // The button should expand up to transaction width
-    const buttonMaxWidth = !shouldUseNarrowLayout && reportPreviewStyles.transactionPreviewStyle.width >= 303 ? {maxWidth: reportPreviewStyles.transactionPreviewStyle.width} : {};
+    const buttonMaxWidth =
+        !shouldUseNarrowLayout && reportPreviewStyles.transactionPreviewStyle.width >= CONST.REPORT.TRANSACTION_PREVIEW_WIDTH_WIDE
+            ? {maxWidth: reportPreviewStyles.transactionPreviewStyle.width}
+            : {};
 
     const approvedOrSettledIcon = (iouSettled || isApproved) && (
         <ImageSVG
@@ -581,14 +585,17 @@ function MoneyRequestReportPreviewContent({
     };
 
     return (
-        <View onLayout={onLayout}>
+        <View onLayout={onWrapperLayout}>
             <OfflineWithFeedback
                 pendingAction={iouReport?.pendingFields?.preview}
                 shouldDisableOpacity={!!(action.pendingAction ?? action.isOptimisticAction)}
                 needsOffscreenAlphaCompositing
                 style={styles.mt1}
             >
-                <View style={[styles.chatItemMessage, isReportDeleted && [styles.cursorDisabled, styles.pointerEventsAuto], containerStyles]}>
+                <View
+                    style={[styles.chatItemMessage, isReportDeleted && [styles.cursorDisabled, styles.pointerEventsAuto], containerStyles]}
+                    onLayout={onCarouselLayout}
+                >
                     <PressableWithoutFeedback
                         onPress={onPress}
                         onPressIn={() => canUseTouchScreen() && ControlSelection.block()}

src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

@@ -59,9 +59,10 @@ function MoneyRequestReportPreview({
     const isTrackExpenseAction = isTrackExpenseActionReportActionsUtils(action);
     const isSplitBillAction = isSplitBillActionReportActionsUtils(action);
     const [currentWidth, setCurrentWidth] = useState(256);
+    const [currentWrapperWidth, setCurrentWrapperWidth] = useState(256);
     const reportPreviewStyles = useMemo(
-        () => StyleUtils.getMoneyRequestReportPreviewStyle(shouldUseNarrowLayout, currentWidth, transactions.length === 1),
-        [StyleUtils, currentWidth, shouldUseNarrowLayout, transactions.length],
+        () => StyleUtils.getMoneyRequestReportPreviewStyle(shouldUseNarrowLayout, currentWidth, currentWrapperWidth, transactions.length === 1),
+        [StyleUtils, currentWidth, currentWrapperWidth, shouldUseNarrowLayout, transactions.length],
     );
 
     const shouldShowIOUData = useMemo(() => {
@@ -127,9 +128,12 @@ function MoneyRequestReportPreview({
             lastTransactionViolations={lastTransactionViolations}
             isDelegateAccessRestricted={isDelegateAccessRestricted}
             renderTransactionItem={renderItem}
-            onLayout={(e: LayoutChangeEvent) => {
+            onCarouselLayout={(e: LayoutChangeEvent) => {
                 setCurrentWidth(e.nativeEvent.layout.width ?? 255);
             }}
+            onWrapperLayout={(e: LayoutChangeEvent) => {
+                setCurrentWrapperWidth(e.nativeEvent.layout.width ?? 255);
+            }}
             currentWidth={currentWidth}
             reportPreviewStyles={reportPreviewStyles}
             shouldDisplayContextMenu={shouldDisplayContextMenu}

src/components/ReportActionItem/MoneyRequestReportPreview/types.ts

@@ -81,8 +81,11 @@ type MoneyRequestReportPreviewContentProps = MoneyRequestReportPreviewContentOny
         /** MoneyRequestReportPreview's current width */
         currentWidth: number;
 
-        /** Callback passed to onLayout  */
-        onLayout: (e: LayoutChangeEvent) => void;
+        /** Callback passed to Carousel's onLayout  */
+        onCarouselLayout: (e: LayoutChangeEvent) => void;
+
+        /** Callback passed to Component wrapper view's onLayout */
+        onWrapperLayout: (e: LayoutChangeEvent) => void;
 
         /** Callback to render a transaction preview item */
         renderTransactionItem: ListRenderItem<Transaction>;

src/pages/home/report/PureReportActionItem.tsx

@@ -433,7 +433,7 @@ function PureReportActionItem({
         [StyleUtils, isReportActionLinked, theme.messageHighlightBG],
     );
 
-    const reportPreviewStyles = StyleUtils.getMoneyRequestReportPreviewStyle(shouldUseNarrowLayout, undefined, true);
+    const reportPreviewStyles = StyleUtils.getMoneyRequestReportPreviewStyle(shouldUseNarrowLayout, undefined, undefined, true);
 
     const isDeletedParentAction = isDeletedParentActionUtils(action);
 

src/stories/MoneyRequestReportPreview.stories.tsx

@@ -34,7 +34,7 @@ const mockTransactionsBig = Array.from({length: 12}).map((item, index) => {
     return {...transactionR14932, transactionID: `${transactionR14932.transactionID}${index}`};
 });
 
-const reportPreviewStyle = getMoneyRequestReportPreviewStyle(false, 400, false);
+const reportPreviewStyle = getMoneyRequestReportPreviewStyle(false, 400, 400, false);
 
 const mockRenderItem: ListRenderItem<Transaction> = ({item}) => (
     <TransactionPreviewContent

src/styles/utils/getMoneyRequestReportPreviewStyle/index.ts

@@ -3,6 +3,7 @@ import type {MoneyRequestReportPreviewStyleType} from '@components/ReportActionI
 import sizing from '@styles/utils/sizing';
 // eslint-disable-next-line no-restricted-imports
 import spacing from '@styles/utils/spacing';
+import CONST from '@src/CONST';
 
 const componentsSpacing = {
     flatListStyle: [spacing.mhn4],
@@ -11,7 +12,7 @@ const componentsSpacing = {
 };
 
 const NEXT_TRANSACTION_PEEK = 32;
-const TRANSACTION_WIDTH_WIDE = 303;
+const TRANSACTION_WIDTH_WIDE = CONST.REPORT.TRANSACTION_PREVIEW_WIDTH_WIDE;
 
 const mobileStyle = (currentWidth: number, isSingleTransaction?: boolean) => {
     const peek = isSingleTransaction ? spacing.p4.padding : NEXT_TRANSACTION_PEEK;
@@ -23,20 +24,25 @@ const mobileStyle = (currentWidth: number, isSingleTransaction?: boolean) => {
     };
 };
 
-const desktopStyle = (currentWidth: number, isSingleTransaction?: boolean) => {
+const desktopStyle = (currentWrapperWidth: number, isSingleTransaction?: boolean) => {
     const peek = isSingleTransaction ? spacing.p4.padding : NEXT_TRANSACTION_PEEK;
-    const transactionPreviewWidth = currentWidth - spacing.p4.padding - peek;
+    const transactionPreviewWidth = currentWrapperWidth - spacing.p4.padding - peek;
     const minimalWrapperWidth = TRANSACTION_WIDTH_WIDE + spacing.p4.padding + peek;
     return {
-        transactionPreviewStyle: {width: currentWidth > minimalWrapperWidth ? TRANSACTION_WIDTH_WIDE : transactionPreviewWidth},
+        transactionPreviewStyle: {width: currentWrapperWidth > minimalWrapperWidth ? TRANSACTION_WIDTH_WIDE : transactionPreviewWidth},
         componentStyle: [{maxWidth: 'min(680px, 100%)'}, {width: 'min-content'}],
         expenseCountVisible: transactionPreviewWidth >= TRANSACTION_WIDTH_WIDE,
     };
 };
 
-const getMoneyRequestReportPreviewStyle = (shouldUseNarrowLayout: boolean, currentWidth?: number, isSingleTransaction?: boolean): MoneyRequestReportPreviewStyleType => ({
+const getMoneyRequestReportPreviewStyle = (
+    shouldUseNarrowLayout: boolean,
+    currentWidth?: number,
+    currentWrapperWidth?: number,
+    isSingleTransaction?: boolean,
+): MoneyRequestReportPreviewStyleType => ({
     ...componentsSpacing,
-    ...(shouldUseNarrowLayout ? mobileStyle(currentWidth ?? 256, isSingleTransaction) : desktopStyle(currentWidth ?? 1000, isSingleTransaction)),
+    ...(shouldUseNarrowLayout ? mobileStyle(currentWidth ?? 256, isSingleTransaction) : desktopStyle(currentWrapperWidth ?? 1000, isSingleTransaction)),
 });
 
 export default getMoneyRequestReportPreviewStyle;