Skip to content

Commit a9a498c

Browse files
mountinymountiny
authored
Merge pull request #62288 from linhvovan29546/fix/62109-hide-to-recipient
fix: hide To recipient when From and To recipient are the same
2 parents 3856029 + 377eab8 commit a9a498c

File tree

3 files changed

+74
-46
lines changed

3 files changed

+74
-46
lines changed

‎src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {memo} from 'react';
1+
import React, {memo, useMemo} from 'react';
22
import {View} from 'react-native';
33
import type {StyleProp, ViewStyle} from 'react-native';
44
import {getButtonRole} from '@components/Button/utils';
@@ -9,7 +9,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
99
import useTheme from '@hooks/useTheme';
1010
import useThemeStyles from '@hooks/useThemeStyles';
1111
import {isCorrectSearchUserName} from '@libs/SearchUIUtils';
12-
import variables from '@styles/variables';
12+
import CONST from '@src/CONST';
1313
import type {SearchPersonalDetails, SearchTransactionAction} from '@src/types/onyx/SearchResults';
1414
import ActionCell from './ActionCell';
1515
import UserInfoCellsWithArrow from './UserInfoCellsWithArrow';
@@ -53,7 +53,7 @@ function ExpenseItemHeaderNarrow({
5353

5454
// It might happen that we are missing display names for `From` or `To`, we only display arrow icon if both names exist
5555
const shouldDisplayArrowIcon = isCorrectSearchUserName(participantFromDisplayName) && isCorrectSearchUserName(participantToDisplayName);
56-
56+
const shouldShowAction = useMemo(() => action !== CONST.SEARCH.ACTION_TYPES.VIEW && action !== CONST.SEARCH.ACTION_TYPES.REVIEW, [action]);
5757
return (
5858
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mb3, styles.gap2, containerStyle]}>
5959
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2, styles.flex1]}>
@@ -77,23 +77,28 @@ function ExpenseItemHeaderNarrow({
7777
</View>
7878
</PressableWithFeedback>
7979
)}
80-
<UserInfoCellsWithArrow
81-
shouldDisplayArrowIcon={!!shouldDisplayArrowIcon}
82-
participantFrom={participantFrom}
83-
participantFromDisplayName={participantFromDisplayName}
84-
participantTo={participantTo}
85-
participantToDisplayName={participantToDisplayName}
86-
/>
87-
</View>
88-
<View style={[StyleUtils.getWidthStyle(variables.w80)]}>
89-
<ActionCell
90-
action={action}
91-
goToItem={onButtonPress}
92-
isLargeScreenWidth={false}
93-
isSelected={isSelected}
94-
isLoading={isLoading}
95-
/>
80+
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap2]}>
81+
<UserInfoCellsWithArrow
82+
shouldDisplayArrowIcon={!!shouldDisplayArrowIcon}
83+
participantFrom={participantFrom}
84+
participantFromDisplayName={participantFromDisplayName}
85+
participantTo={participantTo}
86+
participantToDisplayName={participantToDisplayName}
87+
fromRecipientStyle={!shouldDisplayArrowIcon ? styles.mw100 : {}}
88+
/>
89+
</View>
9690
</View>
91+
{shouldShowAction && (
92+
<View>
93+
<ActionCell
94+
action={action}
95+
goToItem={onButtonPress}
96+
isLargeScreenWidth={false}
97+
isSelected={isSelected}
98+
isLoading={isLoading}
99+
/>
100+
</View>
101+
)}
97102
</View>
98103
);
99104
}

‎src/components/SelectionList/Search/ReportListItemHeader.tsx

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, {useMemo} from 'react';
22
import {View} from 'react-native';
33
import type {OnyxEntry} from 'react-native-onyx';
44
import Checkbox from '@components/Checkbox';
@@ -163,8 +163,11 @@ function ReportListItemHeader<TItem extends ListItem>({
163163
const {translate} = useLocalize();
164164
const {isLargeScreenWidth} = useResponsiveLayout();
165165
const thereIsFromAndTo = !!reportItem?.from && !!reportItem?.to;
166-
const showArrowComponent = reportItem.type === CONST.REPORT.TYPE.IOU && thereIsFromAndTo;
167-
166+
const showArrowComponent = (reportItem.type === CONST.REPORT.TYPE.IOU && thereIsFromAndTo) || (reportItem.type === CONST.REPORT.TYPE.EXPENSE && !!reportItem?.from);
167+
const shouldShowToRecipient = useMemo(
168+
() => thereIsFromAndTo && reportItem?.from?.accountID !== reportItem?.to?.accountID,
169+
[thereIsFromAndTo, reportItem?.from?.accountID, reportItem?.to?.accountID],
170+
);
168171
const handleOnButtonPress = () => {
169172
handleActionButtonPress(currentSearchHash, reportItem, () => onSelectRow(item));
170173
};
@@ -178,19 +181,33 @@ function ReportListItemHeader<TItem extends ListItem>({
178181
isDisabled={isDisabled}
179182
canSelectMultiple={canSelectMultiple}
180183
/>
181-
<View style={[styles.pt0, styles.flexRow, styles.alignItemsCenter, showArrowComponent ? styles.justifyContentBetween : styles.justifyContentEnd, styles.pr3, styles.pl3]}>
182-
{showArrowComponent && (
183-
<UserInfoCellsWithArrow
184-
shouldDisplayArrowIcon
185-
participantFrom={reportItem?.from}
186-
participantFromDisplayName={reportItem?.from?.displayName ?? reportItem?.from?.login ?? translate('common.hidden')}
187-
participantToDisplayName={reportItem?.to?.displayName ?? reportItem?.to?.login ?? translate('common.hidden')}
188-
participantTo={reportItem?.to}
189-
avatarSize="mid-subscript"
190-
infoCellsTextStyle={{...styles.textMicroBold, lineHeight: 14}}
191-
infoCellsAvatarStyle={styles.pr1}
192-
/>
193-
)}
184+
<View
185+
style={[
186+
styles.pt0,
187+
styles.flexRow,
188+
styles.alignItemsCenter,
189+
showArrowComponent ? styles.justifyContentBetween : styles.justifyContentEnd,
190+
styles.pr3,
191+
styles.pl3,
192+
styles.gap2,
193+
]}
194+
>
195+
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap2]}>
196+
{showArrowComponent && (
197+
<UserInfoCellsWithArrow
198+
shouldDisplayArrowIcon={shouldShowToRecipient}
199+
shouldShowToRecipient={shouldShowToRecipient}
200+
participantFrom={reportItem?.from}
201+
participantFromDisplayName={reportItem?.from?.displayName ?? reportItem?.from?.login ?? translate('common.hidden')}
202+
participantToDisplayName={reportItem?.to?.displayName ?? reportItem?.to?.login ?? translate('common.hidden')}
203+
participantTo={reportItem?.to}
204+
avatarSize="mid-subscript"
205+
infoCellsTextStyle={{...styles.textMicroBold, lineHeight: 14}}
206+
infoCellsAvatarStyle={styles.pr1}
207+
fromRecipientStyle={!shouldShowToRecipient ? styles.mw100 : {}}
208+
/>
209+
)}
210+
</View>
194211
<View>
195212
<ActionCell
196213
action={reportItem.action}

‎src/components/SelectionList/Search/UserInfoCellsWithArrow.tsx

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,33 @@ import UserInfoCell from './UserInfoCell';
1313

1414
function UserInfoCellsWithArrow({
1515
shouldDisplayArrowIcon,
16+
shouldShowToRecipient = true,
1617
participantFrom,
1718
participantFromDisplayName,
1819
participantTo,
1920
participantToDisplayName,
2021
avatarSize,
2122
infoCellsTextStyle,
2223
infoCellsAvatarStyle,
24+
fromRecipientStyle,
2325
}: {
2426
shouldDisplayArrowIcon: boolean;
27+
shouldShowToRecipient?: boolean;
2528
participantFrom: SearchPersonalDetails | PersonalDetails;
2629
participantFromDisplayName: string;
2730
participantTo: SearchPersonalDetails | PersonalDetails;
2831
participantToDisplayName: string;
2932
avatarSize?: AvatarSizeName;
3033
infoCellsTextStyle?: TextStyle;
3134
infoCellsAvatarStyle?: ViewStyle;
35+
fromRecipientStyle?: ViewStyle;
3236
}) {
3337
const styles = useThemeStyles();
3438
const theme = useTheme();
3539

3640
return (
3741
<>
38-
<View style={[styles.mw50]}>
42+
<View style={[styles.mw50, fromRecipientStyle]}>
3943
<UserInfoCell
4044
accountID={participantFrom.accountID}
4145
avatar={participantFrom.avatar}
@@ -53,16 +57,18 @@ function UserInfoCellsWithArrow({
5357
fill={theme.icon}
5458
/>
5559
)}
56-
<View style={[styles.flex1, styles.mw50]}>
57-
<UserInfoCell
58-
accountID={participantTo.accountID}
59-
avatar={participantTo.avatar}
60-
displayName={participantToDisplayName}
61-
avatarSize={avatarSize}
62-
textStyle={infoCellsTextStyle}
63-
avatarStyle={infoCellsAvatarStyle}
64-
/>
65-
</View>
60+
{shouldShowToRecipient && (
61+
<View style={[styles.flex1, styles.mw50]}>
62+
<UserInfoCell
63+
accountID={participantTo.accountID}
64+
avatar={participantTo.avatar}
65+
displayName={participantToDisplayName}
66+
avatarSize={avatarSize}
67+
textStyle={infoCellsTextStyle}
68+
avatarStyle={infoCellsAvatarStyle}
69+
/>
70+
</View>
71+
)}
6672
</>
6773
);
6874
}

0 commit comments

Comments
 (0)