Skip to content

Commit

Permalink
Merge pull request #42986 from software-mansion-labs/fix-search-rows
Browse files Browse the repository at this point in the history 
Fix rendering TransactionListItemRow
  • Loading branch information
@luacmartins
luacmartins authored Jun 4, 2024
2 parents 287cd6a + db83333 commit f4abddf
Showing 1 changed file with 19 additions and 45 deletions.
64 changes: 19 additions & 45 deletions src/components/SelectionList/Search/TransactionListItemRow.tsx
View file
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

0 comments on commit f4abddf

Please sign in to comment.