Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix rendering TransactionListItemRow #42986

Merged
merged 1 commit into from
Jun 4, 2024
Merged

Fix rendering TransactionListItemRow #42986

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 19 additions & 45 deletions src/components/SelectionList/Search/TransactionListItemRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {memo} from 'react';
import React from 'react';
import type {StyleProp, ViewStyle} from 'react-native';
import {View} from 'react-native';
import Button from '@components/Button';
Expand Down Expand Up @@ -26,8 +26,6 @@ type CellProps = {
// eslint-disable-next-line react/no-unused-prop-types
showTooltip: boolean;
// eslint-disable-next-line react/no-unused-prop-types
keyForList: string;
// eslint-disable-next-line react/no-unused-prop-types
isLargeScreenWidth: boolean;
};

Expand Down Expand Up @@ -65,15 +63,7 @@ const getTypeIcon = (type?: SearchTransactionType) => {
}
};

function arePropsEqual(prevProps: CellProps, nextProps: CellProps) {
return prevProps.keyForList === nextProps.keyForList;
}

function areReceiptPropsEqual(prevProps: ReceiptCellProps, nextProps: ReceiptCellProps) {
return prevProps.keyForList === nextProps.keyForList && prevProps.isHovered === nextProps.isHovered;
}

const ReceiptCell = memo(({transactionItem, isHovered = false}: ReceiptCellProps) => {
function ReceiptCell({transactionItem, isHovered = false}: ReceiptCellProps) {
const theme = useTheme();
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
Expand All @@ -94,9 +84,9 @@ const ReceiptCell = memo(({transactionItem, isHovered = false}: ReceiptCellProps
/>
</View>
);
}, areReceiptPropsEqual);
}

const DateCell = memo(({transactionItem, showTooltip, isLargeScreenWidth}: TransactionCellProps) => {
function DateCell({transactionItem, showTooltip, isLargeScreenWidth}: TransactionCellProps) {
const styles = useThemeStyles();
const date = TransactionUtils.getCreated(transactionItem, CONST.DATE.MONTH_DAY_ABBR_FORMAT);

Expand All @@ -107,9 +97,9 @@ const DateCell = memo(({transactionItem, showTooltip, isLargeScreenWidth}: Trans
style={[styles.label, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : [styles.textMicro, styles.textSupporting]]}
/>
);
}, arePropsEqual);
}

const MerchantCell = memo(({transactionItem, showTooltip}: TransactionCellProps) => {
function MerchantCell({transactionItem, showTooltip}: TransactionCellProps) {
const styles = useThemeStyles();
const description = TransactionUtils.getDescription(transactionItem);

Expand All @@ -120,9 +110,9 @@ const MerchantCell = memo(({transactionItem, showTooltip}: TransactionCellProps)
style={[styles.label, styles.pre, styles.justifyContentCenter]}
/>
);
}, arePropsEqual);
}

const TotalCell = memo(({showTooltip, isLargeScreenWidth, transactionItem}: TransactionCellProps) => {
function TotalCell({showTooltip, isLargeScreenWidth, transactionItem}: TransactionCellProps) {
const styles = useThemeStyles();
const currency = TransactionUtils.getCurrency(transactionItem);

Expand All @@ -133,9 +123,9 @@ const TotalCell = memo(({showTooltip, isLargeScreenWidth, transactionItem}: Tran
style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
/>
);
}, arePropsEqual);
}

const TypeCell = memo(({transactionItem, isLargeScreenWidth}: TransactionCellProps) => {
function TypeCell({transactionItem, isLargeScreenWidth}: TransactionCellProps) {
const theme = useTheme();
const typeIcon = getTypeIcon(transactionItem.type);

Expand All @@ -147,9 +137,9 @@ const TypeCell = memo(({transactionItem, isLargeScreenWidth}: TransactionCellPro
width={isLargeScreenWidth ? 20 : 12}
/>
);
}, arePropsEqual);
}

const ActionCell = memo(({onButtonPress}: ActionCellProps) => {
function ActionCell({onButtonPress}: ActionCellProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();

Expand All @@ -162,9 +152,9 @@ const ActionCell = memo(({onButtonPress}: ActionCellProps) => {
style={[styles.p0]}
/>
);
}, arePropsEqual);
}

const CategoryCell = memo(({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) => {
function CategoryCell({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) {
const styles = useThemeStyles();
return isLargeScreenWidth ? (
<TextWithTooltip
Expand All @@ -179,9 +169,9 @@ const CategoryCell = memo(({isLargeScreenWidth, showTooltip, transactionItem}: T
text={transactionItem?.category}
/>
);
}, arePropsEqual);
}

const TagCell = memo(({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) => {
function TagCell({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) {
const styles = useThemeStyles();
return isLargeScreenWidth ? (
<TextWithTooltip
Expand All @@ -196,9 +186,9 @@ const TagCell = memo(({isLargeScreenWidth, showTooltip, transactionItem}: Transa
text={transactionItem?.tag}
/>
);
}, arePropsEqual);
}

const TaxCell = memo(({transactionItem, showTooltip}: TransactionCellProps) => {
function TaxCell({transactionItem, showTooltip}: TransactionCellProps) {
const styles = useThemeStyles();

const isFromExpenseReport = transactionItem.reportType === CONST.REPORT.TYPE.EXPENSE;
Expand All @@ -212,7 +202,7 @@ const TaxCell = memo(({transactionItem, showTooltip}: TransactionCellProps) => {
style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter, styles.textAlignRight]}
/>
);
}, arePropsEqual);
}

function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeaderOnNarrowLayout = true, containerStyle, isHovered = false}: TransactionListItemRowProps) {
const styles = useThemeStyles();
Expand All @@ -237,7 +227,6 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
<View style={[styles.flexRow, styles.justifyContentBetween, styles.gap3]}>
<ReceiptCell
transactionItem={item}
keyForList={item.keyForList ?? ''}
isLargeScreenWidth={false}
showTooltip={false}
isHovered={isHovered}
Expand All @@ -246,12 +235,10 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
<MerchantCell
transactionItem={item}
showTooltip={showTooltip}
keyForList={item.keyForList ?? ''}
isLargeScreenWidth={false}
/>
<View style={[styles.flexRow, styles.flex1, styles.alignItemsEnd, styles.gap3]}>
<CategoryCell
keyForList={item.keyForList ?? ''}
isLargeScreenWidth={isLargeScreenWidth}
showTooltip={showTooltip}
transactionItem={item}
Expand All @@ -260,7 +247,6 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
showTooltip={showTooltip}
transactionItem={item}
isLargeScreenWidth={isLargeScreenWidth}
keyForList={item.keyForList ?? ''}
/>
</View>
</View>
Expand All @@ -269,20 +255,17 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
showTooltip={showTooltip}
transactionItem={item}
isLargeScreenWidth={isLargeScreenWidth}
keyForList={item.keyForList ?? ''}
/>
<View style={[styles.flexRow, styles.gap1, styles.justifyContentCenter]}>
<TypeCell
transactionItem={item}
isLargeScreenWidth={isLargeScreenWidth}
keyForList={item.keyForList ?? ''}
showTooltip={false}
/>
<DateCell
transactionItem={item}
showTooltip={showTooltip}
isLargeScreenWidth={isLargeScreenWidth}
keyForList={item.keyForList ?? ''}
/>
</View>
</View>
Expand All @@ -297,7 +280,6 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
<View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.RECEIPT)]}>
<ReceiptCell
transactionItem={item}
keyForList={item.keyForList ?? ''}
isLargeScreenWidth={false}
showTooltip={false}
isHovered={isHovered}
Expand All @@ -308,14 +290,12 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
transactionItem={item}
showTooltip={showTooltip}
isLargeScreenWidth={isLargeScreenWidth}
keyForList={item.keyForList ?? ''}
/>
</View>
<View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.MERCHANT)]}>
<MerchantCell
transactionItem={item}
showTooltip={showTooltip}
keyForList={item.keyForList ?? ''}
isLargeScreenWidth={false}
/>
</View>
Expand All @@ -334,7 +314,6 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
{item.shouldShowCategory && (
<View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.CATEGORY)]}>
<CategoryCell
keyForList={item.keyForList ?? ''}
isLargeScreenWidth={isLargeScreenWidth}
showTooltip={showTooltip}
transactionItem={item}
Expand All @@ -344,7 +323,6 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
{item.shouldShowTag && (
<View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAG)]}>
<TagCell
keyForList={item.keyForList ?? ''}
isLargeScreenWidth={isLargeScreenWidth}
showTooltip={showTooltip}
transactionItem={item}
Expand All @@ -355,7 +333,6 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
<View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT)]}>
<TaxCell
transactionItem={item}
keyForList={item.keyForList ?? ''}
isLargeScreenWidth={isLargeScreenWidth}
showTooltip={showTooltip}
/>
Expand All @@ -367,21 +344,18 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
showTooltip={showTooltip}
transactionItem={item}
isLargeScreenWidth={isLargeScreenWidth}
keyForList={item.keyForList ?? ''}
/>
</View>
<View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)]}>
<TypeCell
transactionItem={item}
isLargeScreenWidth={isLargeScreenWidth}
keyForList={item.keyForList ?? ''}
showTooltip={false}
/>
</View>
<View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)]}>
<ActionCell
onButtonPress={onButtonPress}
keyForList={item.keyForList ?? ''}
showTooltip={false}
isLargeScreenWidth={false}
/>
Expand Down
Loading