Skip to content

Commit ad134d7

Browse files
SzymczakJSzymczakJ
committed
remove redundant views from MoneyRequestReportTransactionList
1 parent ada7989 commit ad134d7

1 file changed

Lines changed: 98 additions & 98 deletions

File tree

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

Lines changed: 98 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -221,111 +221,111 @@ function MoneyRequestReportTransactionList({
221221
);
222222

223223
const listHorizontalPadding = styles.ph5;
224+
225+
if (isEmptyTransactions) {
226+
return <SearchMoneyRequestReportEmptyState />;
227+
}
228+
224229
return (
225230
<>
226-
{!isEmptyTransactions ? (
227-
<>
228-
{!shouldUseNarrowLayout && (
229-
<View style={[styles.dFlex, styles.flexRow, styles.pl5, styles.pr8, styles.alignItemsCenter]}>
230-
<View style={[styles.dFlex, styles.flexRow, styles.pv2, styles.pr4, StyleUtils.getPaddingLeft(variables.w12)]}>
231-
<Checkbox
232-
onPress={() => {
233-
if (selectedTransactionIDs.length !== 0) {
234-
clearSelectedTransactions(true);
235-
} else {
236-
setSelectedTransactions(transactionsWithoutPendingDelete.map((t) => t.transactionID));
237-
}
238-
}}
239-
accessibilityLabel={CONST.ROLE.CHECKBOX}
240-
isIndeterminate={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length !== transactionsWithoutPendingDelete.length}
241-
isChecked={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length === transactionsWithoutPendingDelete.length}
242-
/>
243-
{isMediumScreenWidth && <Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>}
244-
</View>
245-
{!isMediumScreenWidth && (
246-
<MoneyRequestReportTableHeader
247-
shouldShowSorting
248-
sortBy={sortBy}
249-
sortOrder={sortOrder}
250-
dateColumnSize={dateColumnSize}
251-
amountColumnSize={amountColumnSize}
252-
taxAmountColumnSize={taxAmountColumnSize}
253-
onSortPress={(selectedSortBy, selectedSortOrder) => {
254-
if (!isSortableColumnName(selectedSortBy)) {
255-
return;
256-
}
257-
258-
setSortConfig((prevState) => ({...prevState, sortBy: selectedSortBy, sortOrder: selectedSortOrder}));
259-
}}
260-
isIOUReport={isIOUReport(report)}
261-
/>
262-
)}
263-
</View>
264-
)}
265-
<View style={[listHorizontalPadding, styles.gap2, styles.pb4]}>
266-
{sortedTransactions.map((transaction) => {
267-
return (
268-
<MoneyRequestReportTransactionItem
269-
key={transaction.transactionID}
270-
transaction={transaction}
271-
isSelectionModeEnabled={isMobileSelectionModeEnabled}
272-
toggleTransaction={toggleTransaction}
273-
isSelected={isTransactionSelected(transaction.transactionID)}
274-
handleOnPress={handleOnPress}
275-
handleLongPress={handleLongPress}
276-
dateColumnSize={dateColumnSize}
277-
amountColumnSize={amountColumnSize}
278-
taxAmountColumnSize={taxAmountColumnSize}
279-
scrollToNewTransaction={scrollToNewTransaction}
280-
/>
281-
);
282-
})}
283-
</View>
284-
{shouldShowBreakdown && (
285-
<View style={[styles.dFlex, styles.alignItemsEnd, listHorizontalPadding, styles.gap2, styles.mb2]}>
286-
{[
287-
{text: translate('cardTransactions.outOfPocket'), value: formattedOutOfPocketAmount},
288-
{text: translate('cardTransactions.companySpend'), value: formattedCompanySpendAmount},
289-
].map(({text, value}) => (
290-
<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pr3]}>
291-
<Text
292-
style={[styles.textLabelSupporting, styles.mr3]}
293-
numberOfLines={1}
294-
>
295-
{text}
296-
</Text>
297-
<Text
298-
numberOfLines={1}
299-
style={[styles.textLabelSupporting, styles.textNormal, shouldUseNarrowLayout ? styles.mnw64p : styles.mnw100p, styles.textAlignRight]}
300-
>
301-
{value}
302-
</Text>
303-
</View>
304-
))}
305-
</View>
306-
)}
307-
<Modal
308-
isVisible={isModalVisible}
309-
type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
310-
onClose={() => setIsModalVisible(false)}
311-
shouldPreventScrollOnFocus
312-
>
313-
<MenuItem
314-
title={translate('common.select')}
315-
icon={Expensicons.CheckSquare}
231+
{!shouldUseNarrowLayout && (
232+
<View style={[styles.dFlex, styles.flexRow, styles.pl5, styles.pr8, styles.alignItemsCenter]}>
233+
<View style={[styles.dFlex, styles.flexRow, styles.pv2, styles.pr4, StyleUtils.getPaddingLeft(variables.w12)]}>
234+
<Checkbox
316235
onPress={() => {
317-
if (!isMobileSelectionModeEnabled) {
318-
turnOnMobileSelectionMode();
236+
if (selectedTransactionIDs.length !== 0) {
237+
clearSelectedTransactions(true);
238+
} else {
239+
setSelectedTransactions(transactionsWithoutPendingDelete.map((t) => t.transactionID));
240+
}
241+
}}
242+
accessibilityLabel={CONST.ROLE.CHECKBOX}
243+
isIndeterminate={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length !== transactionsWithoutPendingDelete.length}
244+
isChecked={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length === transactionsWithoutPendingDelete.length}
245+
/>
246+
{isMediumScreenWidth && <Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>}
247+
</View>
248+
{!isMediumScreenWidth && (
249+
<MoneyRequestReportTableHeader
250+
shouldShowSorting
251+
sortBy={sortBy}
252+
sortOrder={sortOrder}
253+
dateColumnSize={dateColumnSize}
254+
amountColumnSize={amountColumnSize}
255+
taxAmountColumnSize={taxAmountColumnSize}
256+
onSortPress={(selectedSortBy, selectedSortOrder) => {
257+
if (!isSortableColumnName(selectedSortBy)) {
258+
return;
319259
}
320-
toggleTransaction(selectedTransactionID);
321-
setIsModalVisible(false);
260+
261+
setSortConfig((prevState) => ({...prevState, sortBy: selectedSortBy, sortOrder: selectedSortOrder}));
322262
}}
263+
isIOUReport={isIOUReport(report)}
323264
/>
324-
</Modal>
325-
</>
326-
) : (
327-
<SearchMoneyRequestReportEmptyState />
265+
)}
266+
</View>
328267
)}
268+
<View style={[listHorizontalPadding, styles.gap2, styles.pb4]}>
269+
{sortedTransactions.map((transaction) => {
270+
return (
271+
<MoneyRequestReportTransactionItem
272+
key={transaction.transactionID}
273+
transaction={transaction}
274+
isSelectionModeEnabled={isMobileSelectionModeEnabled}
275+
toggleTransaction={toggleTransaction}
276+
isSelected={isTransactionSelected(transaction.transactionID)}
277+
handleOnPress={handleOnPress}
278+
handleLongPress={handleLongPress}
279+
dateColumnSize={dateColumnSize}
280+
amountColumnSize={amountColumnSize}
281+
taxAmountColumnSize={taxAmountColumnSize}
282+
scrollToNewTransaction={scrollToNewTransaction}
283+
/>
284+
);
285+
})}
286+
</View>
287+
{shouldShowBreakdown && (
288+
<View style={[styles.dFlex, styles.alignItemsEnd, listHorizontalPadding, styles.gap2, styles.mb2]}>
289+
{[
290+
{text: translate('cardTransactions.outOfPocket'), value: formattedOutOfPocketAmount},
291+
{text: translate('cardTransactions.companySpend'), value: formattedCompanySpendAmount},
292+
].map(({text, value}) => (
293+
<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pr3]}>
294+
<Text
295+
style={[styles.textLabelSupporting, styles.mr3]}
296+
numberOfLines={1}
297+
>
298+
{text}
299+
</Text>
300+
<Text
301+
numberOfLines={1}
302+
style={[styles.textLabelSupporting, styles.textNormal, shouldUseNarrowLayout ? styles.mnw64p : styles.mnw100p, styles.textAlignRight]}
303+
>
304+
{value}
305+
</Text>
306+
</View>
307+
))}
308+
</View>
309+
)}
310+
<Modal
311+
isVisible={isModalVisible}
312+
type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
313+
onClose={() => setIsModalVisible(false)}
314+
shouldPreventScrollOnFocus
315+
>
316+
<MenuItem
317+
title={translate('common.select')}
318+
icon={Expensicons.CheckSquare}
319+
onPress={() => {
320+
if (!isMobileSelectionModeEnabled) {
321+
turnOnMobileSelectionMode();
322+
}
323+
toggleTransaction(selectedTransactionID);
324+
setIsModalVisible(false);
325+
}}
326+
/>
327+
</Modal>
328+
329329
<View style={[styles.dFlex, styles.flexRow, listHorizontalPadding, styles.justifyContentBetween, styles.mb2]}>
330330
<Animated.Text
331331
style={[styles.textLabelSupporting]}

0 commit comments

Comments
 (0)