Skip to content

Commit 86bc739

Browse files
JakubKorytkoJakubKorytko
committed
Fix Unable to open room avatar in full screen
1 parent 3bcba2f commit 86bc739

3 files changed

Lines changed: 67 additions & 6 deletions

File tree

‎src/components/ReportActionAvatars/ReportActionAvatar.tsx‎

Lines changed: 56 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ import type {ValueOf} from 'type-fest';
66
import Avatar from '@components/Avatar';
77
import Icon from '@components/Icon';
88
import {WorkspaceBuilding} from '@components/Icon/WorkspaceDefaultAvatars';
9+
import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
910
import Text from '@components/Text';
1011
import Tooltip from '@components/Tooltip';
1112
import UserDetailsTooltip from '@components/UserDetailsTooltip';
13+
import useLocalize from '@hooks/useLocalize';
1214
import useOnyx from '@hooks/useOnyx';
1315
import useStyleUtils from '@hooks/useStyleUtils';
1416
import useTheme from '@hooks/useTheme';
@@ -18,9 +20,11 @@ import {getCardFeedIcon} from '@libs/CardUtils';
1820
import localeCompare from '@libs/LocaleCompare';
1921
import {getUserDetailTooltipText} from '@libs/ReportUtils';
2022
import type {AvatarSource} from '@libs/UserUtils';
23+
import Navigation from '@navigation/Navigation';
2124
import variables from '@styles/variables';
2225
import CONST from '@src/CONST';
2326
import ONYXKEYS from '@src/ONYXKEYS';
27+
import ROUTES from '@src/ROUTES';
2428
import type {CompanyCardFeed, OnyxInputOrEntry, PersonalDetailsList} from '@src/types/onyx';
2529
import type {Icon as IconType} from '@src/types/onyx/OnyxCommon';
2630

@@ -61,6 +65,38 @@ type AvatarSizeToStyles = typeof CONST.AVATAR_SIZE.SMALL | typeof CONST.AVATAR_S
6165

6266
type AvatarSizeToStylesMap = Record<AvatarSizeToStyles, AvatarStyles>;
6367

68+
function ProfileAvatar(props: Parameters<typeof Avatar>[0] & {useOriginal?: boolean}) {
69+
const {translate} = useLocalize();
70+
const {avatarID, useOriginal, type} = props;
71+
72+
if (useOriginal) {
73+
return (
74+
/* eslint-disable-next-line react/jsx-props-no-spreading */
75+
<Avatar {...{...props, useOriginal: undefined}} />
76+
);
77+
}
78+
79+
const isWorkspace = type === CONST.ICON_TYPE_WORKSPACE;
80+
81+
const onPress = () => {
82+
if (isWorkspace) {
83+
return Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(String(avatarID)));
84+
}
85+
return Navigation.navigate(ROUTES.PROFILE_AVATAR.getRoute(Number(avatarID), Navigation.getActiveRoute()));
86+
};
87+
88+
return (
89+
<PressableWithoutFocus
90+
onPress={onPress}
91+
accessibilityLabel={translate(isWorkspace ? 'common.workspaces' : 'common.profile')}
92+
accessibilityRole={CONST.ROLE.BUTTON}
93+
>
94+
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
95+
<Avatar {...{...props, useOriginal: undefined}} />
96+
</PressableWithoutFocus>
97+
);
98+
}
99+
64100
function ReportActionAvatarSingle({
65101
avatar,
66102
size,
@@ -70,6 +106,7 @@ function ReportActionAvatarSingle({
70106
accountID,
71107
fallbackIcon,
72108
isInReportAction,
109+
useProfileAvatar,
73110
}: {
74111
avatar: IconType | undefined;
75112
size: ValueOf<typeof CONST.AVATAR_SIZE>;
@@ -79,6 +116,7 @@ function ReportActionAvatarSingle({
79116
delegateAccountID?: number;
80117
fallbackIcon?: AvatarSource;
81118
isInReportAction?: boolean;
119+
useProfileAvatar?: boolean;
82120
}) {
83121
const StyleUtils = useStyleUtils();
84122
const avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
@@ -94,7 +132,8 @@ function ReportActionAvatarSingle({
94132
shouldRender={shouldShowTooltip}
95133
>
96134
<View>
97-
<Avatar
135+
<ProfileAvatar
136+
useOriginal={!useProfileAvatar}
98137
containerStyles={containerStyles ?? avatarContainerStyles}
99138
source={avatar?.source}
100139
type={avatar?.type ?? CONST.ICON_TYPE_AVATAR}
@@ -118,6 +157,7 @@ function ReportActionAvatarSubscript({
118157
noRightMarginOnContainer,
119158
subscriptAvatarBorderColor,
120159
subscriptCardFeed,
160+
useProfileAvatars,
121161
}: {
122162
primaryAvatar: IconType;
123163
secondaryAvatar: IconType;
@@ -126,6 +166,7 @@ function ReportActionAvatarSubscript({
126166
noRightMarginOnContainer?: boolean;
127167
subscriptAvatarBorderColor?: ColorValue;
128168
subscriptCardFeed?: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK;
169+
useProfileAvatars?: boolean;
129170
}) {
130171
const theme = useTheme();
131172
const styles = useThemeStyles();
@@ -167,7 +208,8 @@ function ReportActionAvatarSubscript({
167208
}}
168209
>
169210
<View>
170-
<Avatar
211+
<ProfileAvatar
212+
useOriginal={!useProfileAvatars}
171213
containerStyles={StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(size || CONST.AVATAR_SIZE.DEFAULT))}
172214
source={primaryAvatar.source}
173215
size={size}
@@ -191,7 +233,8 @@ function ReportActionAvatarSubscript({
191233
// https://stackoverflow.com/questions/56338939/hover-in-css-is-not-working-with-electron
192234
dataSet={{dragArea: false}}
193235
>
194-
<Avatar
236+
<ProfileAvatar
237+
useOriginal={!useProfileAvatars}
195238
iconAdditionalStyles={[
196239
StyleUtils.getAvatarBorderWidth(isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : subscriptAvatarSize),
197240
StyleUtils.getBorderColorStyle(subscriptAvatarBorderColor ?? theme.componentBG),
@@ -266,11 +309,13 @@ function ReportActionAvatarMultipleHorizontal({
266309
icons: unsortedIcons,
267310
isInReportAction,
268311
sort: sortAvatars,
312+
useProfileAvatars,
269313
}: HorizontalStacking & {
270314
size: ValueOf<typeof CONST.AVATAR_SIZE>;
271315
shouldShowTooltip: boolean;
272316
icons: IconType[];
273317
isInReportAction: boolean;
318+
useProfileAvatars?: boolean;
274319
}) {
275320
const theme = useTheme();
276321
const styles = useThemeStyles();
@@ -335,7 +380,8 @@ function ReportActionAvatarMultipleHorizontal({
335380
shouldRender={shouldShowTooltip}
336381
>
337382
<View style={[StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize), StyleUtils.getAvatarBorderRadius(size, icon.type)]}>
338-
<Avatar
383+
<ProfileAvatar
384+
useOriginal={!useProfileAvatars}
339385
iconAdditionalStyles={[
340386
StyleUtils.getHorizontalStackedAvatarBorderStyle({
341387
theme,
@@ -404,6 +450,7 @@ function ReportActionAvatarMultipleDiagonal({
404450
useMidSubscriptSize,
405451
secondaryAvatarContainerStyle,
406452
isHovered = false,
453+
useProfileAvatars,
407454
}: {
408455
size: ValueOf<typeof CONST.AVATAR_SIZE>;
409456
shouldShowTooltip: boolean;
@@ -412,6 +459,7 @@ function ReportActionAvatarMultipleDiagonal({
412459
useMidSubscriptSize: boolean;
413460
secondaryAvatarContainerStyle?: StyleProp<ViewStyle>;
414461
isHovered?: boolean;
462+
useProfileAvatars?: boolean;
415463
}) {
416464
const theme = useTheme();
417465
const styles = useThemeStyles();
@@ -478,7 +526,8 @@ function ReportActionAvatarMultipleDiagonal({
478526
>
479527
{/* View is necessary for tooltip to show for multiple avatars in LHN */}
480528
<View>
481-
<Avatar
529+
<ProfileAvatar
530+
useOriginal={!useProfileAvatars}
482531
source={icons.at(0)?.source ?? WorkspaceBuilding}
483532
size={avatarSize}
484533
imageStyles={[singleAvatarStyle]}
@@ -507,7 +556,8 @@ function ReportActionAvatarMultipleDiagonal({
507556
shouldRender={shouldShowTooltip}
508557
>
509558
<View>
510-
<Avatar
559+
<ProfileAvatar
560+
useOriginal={!useProfileAvatars}
511561
source={icons.at(1)?.source ?? WorkspaceBuilding}
512562
size={avatarSize}
513563
imageStyles={[singleAvatarStyle]}

‎src/components/ReportActionAvatars/index.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@ type ReportActionAvatarsProps = {
5151

5252
/** Subscript card feed to display instead of the second avatar */
5353
subscriptCardFeed?: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK;
54+
55+
/** Whether we want to be redirected to profile on avatars click */
56+
useProfileAvatars?: boolean;
5457
};
5558

5659
/**
@@ -77,6 +80,7 @@ function ReportActionAvatars({
7780
secondaryAvatarContainerStyle,
7881
useMidSubscriptSizeForMultipleAvatars = false,
7982
isInReportAction = false,
83+
useProfileAvatars,
8084
}: ReportActionAvatarsProps) {
8185
const accountIDs = passedAccountIDs.filter((accountID) => accountID !== CONST.DEFAULT_NUMBER_ID);
8286

@@ -126,6 +130,7 @@ function ReportActionAvatars({
126130
noRightMarginOnContainer={noRightMarginOnSubscriptContainer}
127131
subscriptAvatarBorderColor={subscriptAvatarBorderColor}
128132
subscriptCardFeed={subscriptCardFeed}
133+
useProfileAvatars={useProfileAvatars}
129134
/>
130135
);
131136
}
@@ -139,6 +144,7 @@ function ReportActionAvatars({
139144
icons={icons}
140145
isInReportAction={isInReportAction}
141146
shouldShowTooltip={shouldShowTooltip}
147+
useProfileAvatars={useProfileAvatars}
142148
/>
143149
);
144150
}
@@ -153,6 +159,7 @@ function ReportActionAvatars({
153159
useMidSubscriptSize={useMidSubscriptSizeForMultipleAvatars}
154160
secondaryAvatarContainerStyle={secondaryAvatarContainerStyle}
155161
isHovered={isHovered}
162+
useProfileAvatars={useProfileAvatars}
156163
/>
157164
);
158165
}
@@ -166,6 +173,7 @@ function ReportActionAvatars({
166173
accountID={Number(delegateAccountID ?? primaryAvatar.id ?? CONST.DEFAULT_NUMBER_ID)}
167174
delegateAccountID={source.action?.delegateAccountID}
168175
fallbackIcon={primaryAvatar.fallbackIcon}
176+
useProfileAvatar={useProfileAvatars}
169177
/>
170178
);
171179
}

‎src/pages/ReportDetailsPage.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -576,11 +576,14 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail
576576
<ReportActionAvatars
577577
noRightMarginOnSubscriptContainer
578578
size={CONST.AVATAR_SIZE.X_LARGE}
579+
useProfileAvatars
580+
singleAvatarContainerStyle={[]}
579581
reportID={report?.reportID ?? moneyRequestReport?.reportID}
580582
/>
581583
</View>
582584
);
583585
}
586+
584587
return (
585588
<AvatarWithImagePicker
586589
source={icons.at(0)?.source}

0 commit comments

Comments
 (0)