|
| 1 | +import React from 'react'; |
| 2 | +import {View} from 'react-native'; |
| 3 | +import Checkbox from '@components/Checkbox'; |
| 4 | +import Icon from '@components/Icon'; |
| 5 | +import getBankIcon from '@components/Icon/BankIcons'; |
| 6 | +import type {ListItem, TransactionWithdrawalIDGroupListItemType} from '@components/SelectionList/types'; |
| 7 | +import TextWithTooltip from '@components/TextWithTooltip'; |
| 8 | +import useLocalize from '@hooks/useLocalize'; |
| 9 | +import useResponsiveLayout from '@hooks/useResponsiveLayout'; |
| 10 | +import useStyleUtils from '@hooks/useStyleUtils'; |
| 11 | +import useThemeStyles from '@hooks/useThemeStyles'; |
| 12 | +import DateUtils from '@libs/DateUtils'; |
| 13 | +import CONST from '@src/CONST'; |
| 14 | +import ActionCell from './ActionCell'; |
| 15 | +import TotalCell from './TotalCell'; |
| 16 | + |
| 17 | +type WithdrawalIDListItemHeaderProps<TItem extends ListItem> = { |
| 18 | + /** The withdrawal ID currently being looked at */ |
| 19 | + withdrawalID: TransactionWithdrawalIDGroupListItemType; |
| 20 | + |
| 21 | + /** Callback to fire when the item is pressed */ |
| 22 | + onSelectRow: (item: TItem) => void; |
| 23 | + |
| 24 | + /** Callback to fire when a checkbox is pressed */ |
| 25 | + onCheckboxPress?: (item: TItem) => void; |
| 26 | + |
| 27 | + /** Whether this section items disabled for selection */ |
| 28 | + isDisabled?: boolean | null; |
| 29 | + |
| 30 | + /** Whether selecting multiple transactions at once is allowed */ |
| 31 | + canSelectMultiple: boolean | undefined; |
| 32 | +}; |
| 33 | + |
| 34 | +function WithdrawalIDListItemHeader<TItem extends ListItem>({ |
| 35 | + withdrawalID: withdrawalIDItem, |
| 36 | + onSelectRow, |
| 37 | + onCheckboxPress, |
| 38 | + isDisabled, |
| 39 | + canSelectMultiple, |
| 40 | +}: WithdrawalIDListItemHeaderProps<TItem>) { |
| 41 | + const styles = useThemeStyles(); |
| 42 | + const StyleUtils = useStyleUtils(); |
| 43 | + const {translate} = useLocalize(); |
| 44 | + const {isLargeScreenWidth} = useResponsiveLayout(); |
| 45 | + const {icon, iconSize, iconStyles} = getBankIcon({bankName: withdrawalIDItem.bankName, styles}); |
| 46 | + const formattedBankName = CONST.BANK_NAMES_USER_FRIENDLY[withdrawalIDItem.bankName]; |
| 47 | + const formattedWithdrawalDate = DateUtils.formatWithUTCTimeZone( |
| 48 | + withdrawalIDItem.debitPosted, |
| 49 | + DateUtils.doesDateBelongToAPastYear(withdrawalIDItem.debitPosted) ? CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT : CONST.DATE.MONTH_DAY_ABBR_FORMAT, |
| 50 | + ); |
| 51 | + const shouldShowAction = isLargeScreenWidth; |
| 52 | + |
| 53 | + return ( |
| 54 | + <View> |
| 55 | + <View style={[styles.pv1Half, styles.ph3, styles.flexRow, styles.alignItemsCenter, styles.justifyContentStart]}> |
| 56 | + <View style={[styles.flexRow, styles.alignItemsCenter, styles.mnh40, styles.flex1, styles.gap3]}> |
| 57 | + {!!canSelectMultiple && ( |
| 58 | + <Checkbox |
| 59 | + onPress={() => onCheckboxPress?.(withdrawalIDItem as unknown as TItem)} |
| 60 | + isChecked={withdrawalIDItem.isSelected} |
| 61 | + disabled={!!isDisabled || withdrawalIDItem.isDisabledCheckbox} |
| 62 | + accessibilityLabel={translate('common.select')} |
| 63 | + /> |
| 64 | + )} |
| 65 | + <View style={[styles.flexRow, styles.flex1, styles.gap3]}> |
| 66 | + <Icon |
| 67 | + src={icon} |
| 68 | + width={iconSize} |
| 69 | + height={iconSize} |
| 70 | + additionalStyles={iconStyles} |
| 71 | + /> |
| 72 | + <View style={[styles.gapHalf, styles.flexShrink1]}> |
| 73 | + <TextWithTooltip |
| 74 | + text={`${formattedBankName} xx${withdrawalIDItem.accountNumber.slice(-4)}`} |
| 75 | + style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre]} |
| 76 | + /> |
| 77 | + <TextWithTooltip |
| 78 | + text={`${formattedWithdrawalDate} ${translate('common.withdrawalID')}: ${withdrawalIDItem.entryID}`} |
| 79 | + style={[styles.textLabelSupporting, styles.lh16, styles.pre]} |
| 80 | + /> |
| 81 | + </View> |
| 82 | + </View> |
| 83 | + </View> |
| 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 | + )} |
| 99 | + </View> |
| 100 | + </View> |
| 101 | + ); |
| 102 | +} |
| 103 | + |
| 104 | +WithdrawalIDListItemHeader.displayName = 'WithdrawalIDListItemHeader'; |
| 105 | + |
| 106 | +export default WithdrawalIDListItemHeader; |
0 commit comments