diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx index cb1ef3fdc6e..c0c1a9415b3 100644 --- a/src/components/SelectionList/Search/TransactionListItemRow.tsx +++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx @@ -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'; @@ -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; }; @@ -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(); @@ -94,9 +84,9 @@ const ReceiptCell = memo(({transactionItem, isHovered = false}: ReceiptCellProps /> ); -}, 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); @@ -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); @@ -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); @@ -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); @@ -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(); @@ -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 ? ( ); -}, arePropsEqual); +} -const TagCell = memo(({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) => { +function TagCell({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) { const styles = useThemeStyles(); return isLargeScreenWidth ? ( ); -}, arePropsEqual); +} -const TaxCell = memo(({transactionItem, showTooltip}: TransactionCellProps) => { +function TaxCell({transactionItem, showTooltip}: TransactionCellProps) { const styles = useThemeStyles(); const isFromExpenseReport = transactionItem.reportType === CONST.REPORT.TYPE.EXPENSE; @@ -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(); @@ -237,7 +227,6 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade @@ -269,20 +255,17 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade showTooltip={showTooltip} transactionItem={item} isLargeScreenWidth={isLargeScreenWidth} - keyForList={item.keyForList ?? ''} /> @@ -297,7 +280,6 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade @@ -334,7 +314,6 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade {item.shouldShowCategory && ( @@ -367,21 +344,18 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade showTooltip={showTooltip} transactionItem={item} isLargeScreenWidth={isLargeScreenWidth} - keyForList={item.keyForList ?? ''} />