Skip to content

Commit f875773

Browse files
mountinymountiny
authored
Merge pull request Expensify#64234 from software-mansion-labs/Guccio163/MoneyRequestReportPreviewStylesCleanup
[Better Expense Reports] Stand-alone TransactionPreviews' jumping fix
2 parents b92b8f2 + 4d6dd93 commit f875773

6 files changed

Lines changed: 31 additions & 69 deletions

File tree

‎src/components/ReportActionItem/MoneyRequestAction.tsx‎

Lines changed: 8 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import {useRoute} from '@react-navigation/native';
22
import lodashIsEmpty from 'lodash/isEmpty';
3-
import React, {useMemo, useState} from 'react';
4-
import type {LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
5-
import {ActivityIndicator, View} from 'react-native';
3+
import React, {useMemo} from 'react';
4+
import type {StyleProp, ViewStyle} from 'react-native';
65
import RenderHTML from '@components/RenderHTML';
76
import useLocalize from '@hooks/useLocalize';
87
import useNetwork from '@hooks/useNetwork';
98
import useOnyx from '@hooks/useOnyx';
109
import useResponsiveLayout from '@hooks/useResponsiveLayout';
1110
import useStyleUtils from '@hooks/useStyleUtils';
12-
import useTheme from '@hooks/useTheme';
1311
import useThemeStyles from '@hooks/useThemeStyles';
1412
import {isIOUReportPendingCurrencyConversion} from '@libs/IOUUtils';
1513
import Navigation from '@libs/Navigation/Navigation';
@@ -26,7 +24,6 @@ import {
2624
import {generateReportID} from '@libs/ReportUtils';
2725
import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
2826
import {contextMenuRef} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
29-
import variables from '@styles/variables';
3027
import CONST from '@src/CONST';
3128
import type {TranslationPaths} from '@src/languages/types';
3229
import ONYXKEYS from '@src/ONYXKEYS';
@@ -89,30 +86,18 @@ function MoneyRequestAction({
8986
const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReportID}`, {canEvict: false, canBeMissing: true});
9087
const StyleUtils = useStyleUtils();
9188
const styles = useThemeStyles();
92-
const theme = useTheme();
9389
const {translate} = useLocalize();
9490
const {isOffline} = useNetwork();
9591
const {shouldUseNarrowLayout} = useResponsiveLayout();
9692
const route = useRoute<PlatformStackRouteProp<TransactionDuplicateNavigatorParamList, typeof SCREENS.TRANSACTION_DUPLICATE.REVIEW>>();
9793
const isReviewDuplicateTransactionPage = route.name === SCREENS.TRANSACTION_DUPLICATE.REVIEW;
9894
const isSplitBillAction = isSplitBillActionReportActionsUtils(action);
9995
const isTrackExpenseAction = isTrackExpenseActionReportActionsUtils(action);
100-
const [previewWidth, setPreviewWidth] = useState(0);
10196
const containerStyles = useMemo(
10297
() => [styles.cursorPointer, isHovered ? styles.reportPreviewBoxHoverBorder : undefined, style],
10398
[isHovered, style, styles.cursorPointer, styles.reportPreviewBoxHoverBorder],
10499
);
105100

106-
const transactionPreviewContainerStyles = useMemo(
107-
() => [
108-
{
109-
width: previewWidth,
110-
maxWidth: previewWidth,
111-
},
112-
styles.borderNone,
113-
],
114-
[previewWidth, styles.borderNone],
115-
);
116101
const reportPreviewStyles = StyleUtils.getMoneyRequestReportPreviewStyle(shouldUseNarrowLayout, 1, undefined, undefined);
117102

118103
const onMoneyRequestPreviewPressed = () => {
@@ -160,59 +145,29 @@ function MoneyRequestAction({
160145
return <RenderHTML html={`<deleted-action ${CONST.REVERSED_TRANSACTION_ATTRIBUTE}="${isReversedTransaction}">${translate(message)}</deleted-action>`} />;
161146
}
162147

163-
const renderCondition = !(lodashIsEmpty(iouReport) && !(isSplitBillAction || isTrackExpenseAction)) && isReviewDuplicateTransactionPage;
164-
const isLayoutWidthInvalid = (layoutWidth: number) => {
165-
return (shouldUseNarrowLayout && layoutWidth > variables.mobileResponsiveWidthBreakpoint) || (!shouldUseNarrowLayout && layoutWidth > variables.sideBarWidth);
166-
};
167-
168-
const singleTransactionPreviewWidth = shouldUseNarrowLayout ? styles.w100.width : reportPreviewStyles.transactionPreviewStyle.width;
169-
const singleTransactionPreviewStyles = [shouldUseNarrowLayout ? {...styles.w100, ...styles.mw100} : reportPreviewStyles.transactionPreviewStyle, styles.mt2];
148+
if (lodashIsEmpty(iouReport) && !(isSplitBillAction || isTrackExpenseAction)) {
149+
return null;
150+
}
170151

171-
const TransactionPreviewComponent = (
152+
return (
172153
<TransactionPreview
173154
iouReportID={requestReportID}
174155
chatReportID={chatReportID}
175156
reportID={reportID}
176157
action={action}
177-
transactionPreviewWidth={renderCondition ? previewWidth : singleTransactionPreviewWidth}
158+
transactionPreviewWidth={reportPreviewStyles.transactionPreviewStandaloneStyle.width}
178159
isBillSplit={isSplitBillAction}
179160
isTrackExpense={isTrackExpenseAction}
180161
contextMenuAnchor={contextMenuAnchor}
181162
checkIfContextMenuActive={checkIfContextMenuActive}
182163
shouldShowPendingConversionMessage={shouldShowPendingConversionMessage}
183164
onPreviewPressed={onMoneyRequestPreviewPressed}
184-
containerStyles={renderCondition ? [containerStyles, transactionPreviewContainerStyles] : singleTransactionPreviewStyles}
165+
containerStyles={[reportPreviewStyles.transactionPreviewStandaloneStyle, isReviewDuplicateTransactionPage ? [containerStyles, styles.borderNone] : styles.mt2]}
185166
isHovered={isHovered}
186167
isWhisper={isWhisper}
187168
shouldDisplayContextMenu={shouldDisplayContextMenu}
188169
/>
189170
);
190-
191-
if (!renderCondition) {
192-
return TransactionPreviewComponent;
193-
}
194-
195-
return (
196-
<View
197-
onLayout={(e: LayoutChangeEvent) => {
198-
if (isLayoutWidthInvalid(e.nativeEvent.layout.width)) {
199-
return;
200-
}
201-
setPreviewWidth(e.nativeEvent.layout.width);
202-
}}
203-
>
204-
{!previewWidth ? (
205-
<View style={[{height: CONST.REPORT.TRANSACTION_PREVIEW.DUPLICATE.WIDE_HEIGHT}, styles.justifyContentCenter]}>
206-
<ActivityIndicator
207-
color={theme.spinner}
208-
size={40}
209-
/>
210-
</View>
211-
) : (
212-
TransactionPreviewComponent
213-
)}
214-
</View>
215-
);
216171
}
217172

218173
MoneyRequestAction.displayName = 'MoneyRequestAction';

‎src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -349,11 +349,11 @@ function MoneyRequestReportPreviewContent({
349349
const [optimisticIndex, setOptimisticIndex] = useState<number | undefined>(undefined);
350350
const carouselRef = useRef<FlatList<Transaction> | null>(null);
351351
const visibleItemsOnEndCount = useMemo(() => {
352-
const lastItemWidth = transactions.length > 10 ? footerWidth : reportPreviewStyles.transactionPreviewStyle.width;
352+
const lastItemWidth = transactions.length > 10 ? footerWidth : reportPreviewStyles.transactionPreviewCarouselStyle.width;
353353
const lastItemWithGap = lastItemWidth + styles.gap2.gap;
354-
const itemWithGap = reportPreviewStyles.transactionPreviewStyle.width + styles.gap2.gap;
354+
const itemWithGap = reportPreviewStyles.transactionPreviewCarouselStyle.width + styles.gap2.gap;
355355
return Math.floor((currentWidth - 2 * styles.pl2.paddingLeft - lastItemWithGap) / itemWithGap) + 1;
356-
}, [transactions.length, footerWidth, reportPreviewStyles.transactionPreviewStyle.width, currentWidth, styles.pl2.paddingLeft, styles.gap2.gap]);
356+
}, [transactions.length, footerWidth, reportPreviewStyles.transactionPreviewCarouselStyle.width, styles.gap2.gap, styles.pl2.paddingLeft, currentWidth]);
357357
const viewabilityConfig = useMemo(() => {
358358
return {itemVisiblePercentThreshold: 100};
359359
}, []);
@@ -408,8 +408,8 @@ function MoneyRequestReportPreviewContent({
408408

409409
// The button should expand up to transaction width
410410
const buttonMaxWidth =
411-
!shouldUseNarrowLayout && reportPreviewStyles.transactionPreviewStyle.width >= CONST.REPORT.TRANSACTION_PREVIEW.CAROUSEL.WIDE_WIDTH
412-
? {maxWidth: reportPreviewStyles.transactionPreviewStyle.width}
411+
!shouldUseNarrowLayout && reportPreviewStyles.transactionPreviewCarouselStyle.width >= CONST.REPORT.TRANSACTION_PREVIEW.CAROUSEL.WIDE_WIDTH
412+
? {maxWidth: reportPreviewStyles.transactionPreviewCarouselStyle.width}
413413
: {};
414414

415415
const approvedOrSettledIcon = (iouSettled || isApproved) && (
@@ -727,13 +727,13 @@ function MoneyRequestReportPreviewContent({
727727
<FlatList
728728
snapToAlignment="start"
729729
decelerationRate="fast"
730-
snapToInterval={reportPreviewStyles.transactionPreviewStyle.width + styles.gap2.gap}
730+
snapToInterval={reportPreviewStyles.transactionPreviewCarouselStyle.width + styles.gap2.gap}
731731
horizontal
732732
data={carouselTransactions}
733733
ref={carouselRef}
734734
nestedScrollEnabled
735735
bounces={false}
736-
keyExtractor={(item) => `${item.transactionID}_${reportPreviewStyles.transactionPreviewStyle.width}`}
736+
keyExtractor={(item) => `${item.transactionID}_${reportPreviewStyles.transactionPreviewCarouselStyle.width}`}
737737
contentContainerStyle={[styles.gap2]}
738738
style={reportPreviewStyles.flatListStyle}
739739
showsHorizontalScrollIndicator={false}

‎src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,9 @@ function MoneyRequestReportPreview({
9393
isWhisper={isWhisper}
9494
isHovered={isHovered}
9595
iouReportID={iouReportID}
96-
containerStyles={[styles.h100, reportPreviewStyles.transactionPreviewStyle]}
96+
containerStyles={[styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle]}
9797
shouldDisplayContextMenu={shouldDisplayContextMenu}
98-
transactionPreviewWidth={reportPreviewStyles.transactionPreviewStyle.width}
98+
transactionPreviewWidth={reportPreviewStyles.transactionPreviewCarouselStyle.width}
9999
transactionID={item.transactionID}
100100
reportPreviewAction={action}
101101
onPreviewPressed={openReportFromPreview}

‎src/components/ReportActionItem/MoneyRequestReportPreview/types.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,20 @@ import type {TransactionPreviewStyleType} from '@components/ReportActionItem/Tra
44
import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
55
import type {PersonalDetails, Policy, Report, ReportAction, Transaction, TransactionViolation, TransactionViolations} from '@src/types/onyx';
66

7-
type TransactionPreviewStyle = {
7+
type TransactionPreviewCarouselStyle = {
88
[key in keyof TransactionPreviewStyleType]: number;
99
};
1010

11+
type TransactionPreviewStandaloneStyle = {
12+
[key in keyof TransactionPreviewStyleType]: string;
13+
};
14+
1115
type MoneyRequestReportPreviewStyleType = {
1216
flatListStyle: StyleProp<ViewStyle>;
1317
wrapperStyle: ViewStyle;
1418
contentContainerStyle: ViewStyle;
15-
transactionPreviewStyle: TransactionPreviewStyle;
19+
transactionPreviewCarouselStyle: TransactionPreviewCarouselStyle;
20+
transactionPreviewStandaloneStyle: TransactionPreviewStandaloneStyle;
1621
componentStyle: StyleProp<ViewStyle>;
1722
expenseCountVisible: boolean;
1823
};

‎src/pages/home/report/PureReportActionItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -874,8 +874,8 @@ function PureReportActionItem({
874874
shouldDisplayContextMenu={shouldDisplayContextMenu}
875875
isBillSplit={isSplitBillActionReportActionsUtils(action)}
876876
transactionID={shouldShowSplitPreview ? moneyRequestOriginalMessage?.IOUTransactionID : undefined}
877-
containerStyles={[shouldUseNarrowLayout ? {...styles.w100, ...styles.mw100} : reportPreviewStyles.transactionPreviewStyle, styles.mt1]}
878-
transactionPreviewWidth={shouldUseNarrowLayout ? styles.w100.width : reportPreviewStyles.transactionPreviewStyle.width}
877+
containerStyles={[reportPreviewStyles.transactionPreviewStandaloneStyle, styles.mt1]}
878+
transactionPreviewWidth={reportPreviewStyles.transactionPreviewStandaloneStyle.width}
879879
onPreviewPressed={() => {
880880
if (shouldShowSplitPreview) {
881881
Navigation.navigate(ROUTES.SPLIT_BILL_DETAILS.getRoute(chatReportID, action.reportActionID, Navigation.getReportRHPActiveRoute()));

‎src/styles/utils/getMoneyRequestReportPreviewStyle/index.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@ const getPeek = (isSingleTransaction: boolean) => {
2424
const mobileStyle = (currentWidth: number, transactionsCount: number) => {
2525
const transactionPreviewWidth = currentWidth - CAROUSEL_ONE_SIDE_PADDING - getPeek(transactionsCount === 1);
2626
return {
27-
transactionPreviewStyle: {width: transactionPreviewWidth, maxWidth: transactionPreviewWidth},
28-
componentStyle: [sizing.mw100, {width: '100%'}],
27+
transactionPreviewCarouselStyle: {width: transactionPreviewWidth, maxWidth: transactionPreviewWidth},
28+
transactionPreviewStandaloneStyle: {...sizing.w100, ...sizing.mw100},
29+
componentStyle: [sizing.mw100, sizing.w100],
2930
expenseCountVisible: false,
3031
};
3132
};
@@ -36,7 +37,8 @@ const desktopStyle = (currentWrapperWidth: number, transactionsCount: number) =>
3637
const spaceForTransactions = Math.max(transactionsCount, 1);
3738
const carouselExactMaxWidth = Math.min(minimalWrapperWidth + (TRANSACTION_WIDTH_WIDE + CAROUSEL_GAP) * (spaceForTransactions - 1), CAROUSEL_MAX_WIDTH_WIDE);
3839
return {
39-
transactionPreviewStyle: {width: currentWrapperWidth > minimalWrapperWidth || currentWrapperWidth === 0 ? TRANSACTION_WIDTH_WIDE : transactionPreviewWidth},
40+
transactionPreviewCarouselStyle: {width: currentWrapperWidth > minimalWrapperWidth || currentWrapperWidth === 0 ? TRANSACTION_WIDTH_WIDE : transactionPreviewWidth},
41+
transactionPreviewStandaloneStyle: {width: `min(100%, ${TRANSACTION_WIDTH_WIDE}px)`, maxWidth: `min(100%, ${TRANSACTION_WIDTH_WIDE}px)`},
4042
componentStyle: [{maxWidth: `min(${carouselExactMaxWidth}px, 100%)`}, {width: currentWrapperWidth > minimalWrapperWidth ? 'min-content' : '100%'}],
4143
expenseCountVisible: transactionPreviewWidth >= TRANSACTION_WIDTH_WIDE,
4244
};

0 commit comments

Comments
 (0)