Skip to content

Commit 559fa63

Browse files
SzymczakJSzymczakJ
committed
fix PR comments
1 parent 5a580ca commit 559fa63

4 files changed

Lines changed: 79 additions & 26 deletions

File tree

‎src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import {View} from 'react-native';
3+
import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
4+
import Text from '@components/Text';
5+
import useLocalize from '@hooks/useLocalize';
6+
import useResponsiveLayout from '@hooks/useResponsiveLayout';
7+
import useThemeStyles from '@hooks/useThemeStyles';
8+
import {convertToDisplayString} from '@libs/CurrencyUtils';
9+
import type * as OnyxTypes from '@src/types/onyx';
10+
11+
type MoneyRequestReportTotalSpendProps = {
12+
hasComments: boolean;
13+
isLoadingReportActions: boolean;
14+
isEmptyTransactions: boolean;
15+
totalDisplaySpend: number;
16+
report: OnyxTypes.Report;
17+
hasPendingAction: boolean;
18+
};
19+
20+
function MoneyRequestReportTotalSpend({hasComments, isLoadingReportActions, isEmptyTransactions, totalDisplaySpend, report, hasPendingAction}: MoneyRequestReportTotalSpendProps) {
21+
const styles = useThemeStyles();
22+
const {translate} = useLocalize();
23+
const {shouldUseNarrowLayout} = useResponsiveLayout();
24+
25+
return (
26+
<View style={[styles.dFlex, styles.flexRow, styles.ph5, styles.justifyContentBetween, styles.mb2]}>
27+
<Animated.Text
28+
style={[styles.textLabelSupporting]}
29+
entering={hasComments ? undefined : FadeIn}
30+
exiting={FadeOut}
31+
>
32+
{hasComments || isLoadingReportActions ? translate('common.comments') : ''}
33+
</Animated.Text>
34+
{!isEmptyTransactions && (
35+
<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pr3]}>
36+
<Text style={[styles.mr3, styles.textLabelSupporting]}>{translate('common.total')}</Text>
37+
<Text style={[shouldUseNarrowLayout ? styles.mnw64p : styles.mnw100p, styles.textAlignRight, styles.textBold, hasPendingAction && styles.opacitySemiTransparent]}>
38+
{convertToDisplayString(totalDisplaySpend, report?.currency)}
39+
</Text>
40+
</View>
41+
)}
42+
</View>
43+
);
44+
}
45+
46+
MoneyRequestReportTotalSpend.displayName = 'MoneyRequestReportTotalSpend';
47+
48+
export default MoneyRequestReportTotalSpend;

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ function MoneyRequestReportTransactionItem({
6363

6464
const viewRef = useRef<View>(null);
6565

66+
// This useEffect scrolls to this transaction when it is newly added to the report
6667
useEffect(() => {
6768
if (!transaction.shouldBeHighlighted || !scrollToNewTransaction) {
6869
return;
@@ -120,4 +121,6 @@ function MoneyRequestReportTransactionItem({
120121
);
121122
}
122123

124+
MoneyRequestReportTransactionItem.displayName = 'MoneyRequestReportTransactionItem';
125+
123126
export default MoneyRequestReportTransactionItem;

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {useFocusEffect} from '@react-navigation/native';
22
import isEmpty from 'lodash/isEmpty';
33
import React, {memo, useCallback, useMemo, useState} from 'react';
44
import {View} from 'react-native';
5-
import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
65
import type {TupleToUnion} from 'type-fest';
76
import Checkbox from '@components/Checkbox';
87
import * as Expensicons from '@components/Icon/Expensicons';
@@ -34,6 +33,7 @@ import NAVIGATORS from '@src/NAVIGATORS';
3433
import ROUTES from '@src/ROUTES';
3534
import type * as OnyxTypes from '@src/types/onyx';
3635
import MoneyRequestReportTableHeader from './MoneyRequestReportTableHeader';
36+
import MoneyRequestReportTotalSpend from './MoneyRequestReportTotalSpend';
3737
import MoneyRequestReportTransactionItem from './MoneyRequestReportTransactionItem';
3838
import SearchMoneyRequestReportEmptyState from './SearchMoneyRequestReportEmptyState';
3939

@@ -110,10 +110,9 @@ function MoneyRequestReportTransactionList({
110110
const shouldShowBreakdown = !!nonReimbursableSpend && !!reimbursableSpend;
111111
const transactionsWithoutPendingDelete = useMemo(() => transactions.filter((t) => !isTransactionPendingDelete(t)), [transactions]);
112112

113-
const pendingActionsOpacity = useMemo(() => {
114-
const pendingAction = transactions.some(getTransactionPendingAction);
115-
return pendingAction && styles.opacitySemiTransparent;
116-
}, [styles.opacitySemiTransparent, transactions]);
113+
const hasPendingAction = useMemo(() => {
114+
return transactions.some(getTransactionPendingAction);
115+
}, [transactions]);
117116

118117
const {selectedTransactionIDs, setSelectedTransactions, clearSelectedTransactions} = useSearchContext();
119118
const isMobileSelectionModeEnabled = useMobileSelectionMode();
@@ -223,7 +222,19 @@ function MoneyRequestReportTransactionList({
223222
const listHorizontalPadding = styles.ph5;
224223

225224
if (isEmptyTransactions) {
226-
return <SearchMoneyRequestReportEmptyState />;
225+
return (
226+
<>
227+
<SearchMoneyRequestReportEmptyState />
228+
<MoneyRequestReportTotalSpend
229+
hasComments={hasComments}
230+
isLoadingReportActions={!!isLoadingReportActions}
231+
isEmptyTransactions={isEmptyTransactions}
232+
totalDisplaySpend={totalDisplaySpend}
233+
report={report}
234+
hasPendingAction={hasPendingAction}
235+
/>
236+
</>
237+
);
227238
}
228239

229240
return (
@@ -279,7 +290,8 @@ function MoneyRequestReportTransactionList({
279290
dateColumnSize={dateColumnSize}
280291
amountColumnSize={amountColumnSize}
281292
taxAmountColumnSize={taxAmountColumnSize}
282-
scrollToNewTransaction={scrollToNewTransaction}
293+
// if we add few new transactions, then we need to scroll to the first one
294+
scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
283295
/>
284296
);
285297
})}
@@ -307,6 +319,14 @@ function MoneyRequestReportTransactionList({
307319
))}
308320
</View>
309321
)}
322+
<MoneyRequestReportTotalSpend
323+
hasComments={hasComments}
324+
isLoadingReportActions={!!isLoadingReportActions}
325+
isEmptyTransactions={isEmptyTransactions}
326+
totalDisplaySpend={totalDisplaySpend}
327+
report={report}
328+
hasPendingAction={hasPendingAction}
329+
/>
310330
<Modal
311331
isVisible={isModalVisible}
312332
type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
@@ -325,24 +345,6 @@ function MoneyRequestReportTransactionList({
325345
}}
326346
/>
327347
</Modal>
328-
329-
<View style={[styles.dFlex, styles.flexRow, listHorizontalPadding, styles.justifyContentBetween, styles.mb2]}>
330-
<Animated.Text
331-
style={[styles.textLabelSupporting]}
332-
entering={hasComments ? undefined : FadeIn}
333-
exiting={FadeOut}
334-
>
335-
{hasComments || isLoadingReportActions ? translate('common.comments') : ''}
336-
</Animated.Text>
337-
{!isEmptyTransactions && (
338-
<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pr3]}>
339-
<Text style={[styles.mr3, styles.textLabelSupporting]}>{translate('common.total')}</Text>
340-
<Text style={[shouldUseNarrowLayout ? styles.mnw64p : styles.mnw100p, styles.textAlignRight, styles.textBold, pendingActionsOpacity]}>
341-
{convertToDisplayString(totalDisplaySpend, report?.currency)}
342-
</Text>
343-
</View>
344-
)}
345-
</View>
346348
</>
347349
);
348350
}

‎src/components/SelectionList/Search/UserInfoAndActionButtonRow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function UserInfoAndActionButtonRow({
3636
participantToDisplayName={participantToDisplayName}
3737
participantTo={item?.to}
3838
avatarSize={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
39-
style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap2]}
39+
style={[styles.flexRow, styles.alignItemsCenter, styles.gap2]}
4040
infoCellsTextStyle={{...styles.textMicroBold, lineHeight: 14}}
4141
infoCellsAvatarStyle={styles.pr1}
4242
fromRecipientStyle={!shouldShowToRecipient ? styles.mw100 : {}}

0 commit comments

Comments
 (0)