@@ -6,14 +6,21 @@ import getBankIcon from '@components/Icon/BankIcons';
66import type { ListItem , TransactionWithdrawalIDGroupListItemType } from '@components/SelectionList/types' ;
77import TextWithTooltip from '@components/TextWithTooltip' ;
88import useLocalize from '@hooks/useLocalize' ;
9+ import useResponsiveLayout from '@hooks/useResponsiveLayout' ;
10+ import useStyleUtils from '@hooks/useStyleUtils' ;
911import useThemeStyles from '@hooks/useThemeStyles' ;
1012import DateUtils from '@libs/DateUtils' ;
1113import CONST from '@src/CONST' ;
14+ import ActionCell from './ActionCell' ;
15+ import TotalCell from './TotalCell' ;
1216
1317type WithdrawalIDListItemHeaderProps < TItem extends ListItem > = {
1418 /** The withdrawal ID currently being looked at */
1519 withdrawalID : TransactionWithdrawalIDGroupListItemType ;
1620
21+ /** Callback to fire when the item is pressed */
22+ onSelectRow : ( item : TItem ) => void ;
23+
1724 /** Callback to fire when a checkbox is pressed */
1825 onCheckboxPress ?: ( item : TItem ) => void ;
1926
@@ -24,18 +31,24 @@ type WithdrawalIDListItemHeaderProps<TItem extends ListItem> = {
2431 canSelectMultiple : boolean | undefined ;
2532} ;
2633
27- function WithdrawalIDListItemHeader < TItem extends ListItem > ( { withdrawalID : withdrawalIDItem , onCheckboxPress, isDisabled, canSelectMultiple} : WithdrawalIDListItemHeaderProps < TItem > ) {
34+ function WithdrawalIDListItemHeader < TItem extends ListItem > ( {
35+ withdrawalID : withdrawalIDItem ,
36+ onSelectRow,
37+ onCheckboxPress,
38+ isDisabled,
39+ canSelectMultiple,
40+ } : WithdrawalIDListItemHeaderProps < TItem > ) {
2841 const styles = useThemeStyles ( ) ;
42+ const StyleUtils = useStyleUtils ( ) ;
2943 const { translate} = useLocalize ( ) ;
30-
44+ const { isLargeScreenWidth } = useResponsiveLayout ( ) ;
3145 const { icon, iconSize, iconStyles} = getBankIcon ( { bankName : withdrawalIDItem . bankName , styles} ) ;
3246 const formattedBankName = CONST . BANK_NAMES_USER_FRIENDLY [ withdrawalIDItem . bankName ] ;
3347 const formattedWithdrawalDate = DateUtils . formatWithUTCTimeZone (
3448 withdrawalIDItem . debitPosted ,
3549 DateUtils . doesDateBelongToAPastYear ( withdrawalIDItem . debitPosted ) ? CONST . DATE . MONTH_DAY_YEAR_ABBR_FORMAT : CONST . DATE . MONTH_DAY_ABBR_FORMAT ,
3650 ) ;
37-
38- // s77rt add total cell, action cell and collapse/expand button
51+ const shouldShowAction = isLargeScreenWidth ;
3952
4053 return (
4154 < View >
@@ -49,16 +62,16 @@ function WithdrawalIDListItemHeader<TItem extends ListItem>({withdrawalID: withd
4962 accessibilityLabel = { translate ( 'common.select' ) }
5063 />
5164 ) }
52- < View style = { [ styles . flexRow , styles . gap3 ] } >
65+ < View style = { [ styles . flexRow , styles . flex1 , styles . gap3 ] } >
5366 < Icon
5467 src = { icon }
5568 width = { iconSize }
5669 height = { iconSize }
5770 additionalStyles = { iconStyles }
5871 />
59- < View style = { [ styles . gapHalf ] } >
72+ < View style = { [ styles . gapHalf , styles . flexShrink1 ] } >
6073 < TextWithTooltip
61- text = { `${ formattedBankName } ${ withdrawalIDItem . accountNumber } ` }
74+ text = { `${ formattedBankName } xx ${ withdrawalIDItem . accountNumber . slice ( - 4 ) } ` }
6275 style = { [ styles . optionDisplayName , styles . sidebarLinkTextBold , styles . pre ] }
6376 />
6477 < TextWithTooltip
@@ -68,9 +81,21 @@ function WithdrawalIDListItemHeader<TItem extends ListItem>({withdrawalID: withd
6881 </ View >
6982 </ View >
7083 </ View >
71- </ View >
72- < View style = { [ styles . pv2 , styles . ph3 ] } >
73- < View style = { [ styles . borderBottom ] } />
84+ < View style = { [ styles . flexShrink0 , styles . mr3 ] } >
85+ < TotalCell
86+ total = { withdrawalIDItem . total }
87+ currency = { withdrawalIDItem . currency }
88+ />
89+ </ View >
90+ { shouldShowAction && (
91+ < View style = { [ StyleUtils . getReportTableColumnStyles ( CONST . SEARCH . TABLE_COLUMNS . ACTION ) ] } >
92+ < ActionCell
93+ action = { CONST . SEARCH . ACTION_TYPES . VIEW }
94+ goToItem = { ( ) => onSelectRow ( withdrawalIDItem as unknown as TItem ) }
95+ isSelected = { withdrawalIDItem . isSelected }
96+ />
97+ </ View >
98+ ) }
7499 </ View >
75100 </ View >
76101 ) ;
0 commit comments