Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix AvatarWithImagePicker error styles #42735

Merged
merged 2 commits into from
May 29, 2024
Merged

Fix AvatarWithImagePicker error styles #42735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
29148f6
Fix AvatarWithImagePicker error styles
s77rt May 29, 2024
f40359a
fix lint
s77rt May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/components/AvatarWithImagePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,12 +303,11 @@ function AvatarWithImagePicker({
}, [isMenuVisible, windowWidth]);

return (
<View style={StyleSheet.flatten([styles.alignItemsCenter, style])}>
<View style={style}>
<View style={styles.w100}>
<OfflineWithFeedback
errors={errors}
errorRowStyles={errorRowStyles}
style={type === CONST.ICON_TYPE_AVATAR && styles.alignItemsCenter}
onClose={onErrorClose}
>
<Tooltip
Expand All @@ -327,7 +326,7 @@ function AvatarWithImagePicker({
accessibilityLabel={translate('avatarWithImagePicker.editImage')}
disabled={isAvatarCropModalOpen || (disabled && !enablePreview)}
disabledStyle={disabledStyle}
style={[styles.pRelative, avatarStyle]}
style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}
ref={anchorRef}
>
<OfflineWithFeedback pendingAction={pendingAction}>
Expand Down
1 change: 1 addition & 0 deletions src/pages/NewChatConfirmPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP
editIcon={Expensicons.Camera}
editIconStyle={styles.smallEditIconAccount}
shouldUseStyleUtilityForAnchorPosition
style={styles.w100}
/>
</View>
<MenuItemWithTopDescription
Expand Down
82 changes: 45 additions & 37 deletions src/pages/ReportDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,34 +230,51 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
/>
) : null;

const renderAvatar =
isGroupChat && !isThread ? (
<AvatarWithImagePicker
source={icons[0].source}
avatarID={icons[0].id}
isUsingDefaultAvatar={!report.avatarUrl}
size={CONST.AVATAR_SIZE.XLARGE}
avatarStyle={styles.avatarXLarge}
shouldDisableViewPhoto
onImageRemoved={() => {
// Calling this without a file will remove the avatar
Report.updateGroupChatAvatar(report.reportID ?? '');
}}
onImageSelected={(file) => Report.updateGroupChatAvatar(report.reportID ?? '', file)}
editIcon={Expensicons.Camera}
editIconStyle={styles.smallEditIconAccount}
pendingAction={report.pendingFields?.avatar ?? undefined}
errors={report.errorFields?.avatar ?? null}
errorRowStyles={styles.mt6}
onErrorClose={() => Report.clearAvatarErrors(report.reportID ?? '')}
shouldUseStyleUtilityForAnchorPosition
/>
) : (
<RoomHeaderAvatars
icons={icons}
reportID={report?.reportID}
/>
const renderAvatar = useMemo(() => {
if (isMoneyRequestReport || isInvoiceReport) {
return (
<View style={styles.mb3}>
<MultipleAvatars
icons={icons}
size={CONST.AVATAR_SIZE.LARGE}
/>
</View>
);
}
if (isGroupChat && !isThread) {
return (
<AvatarWithImagePicker
source={icons[0].source}
avatarID={icons[0].id}
isUsingDefaultAvatar={!report.avatarUrl}
size={CONST.AVATAR_SIZE.XLARGE}
avatarStyle={styles.avatarXLarge}
shouldDisableViewPhoto
onImageRemoved={() => {
// Calling this without a file will remove the avatar
Report.updateGroupChatAvatar(report.reportID ?? '');
}}
onImageSelected={(file) => Report.updateGroupChatAvatar(report.reportID ?? '', file)}
editIcon={Expensicons.Camera}
editIconStyle={styles.smallEditIconAccount}
pendingAction={report.pendingFields?.avatar ?? undefined}
errors={report.errorFields?.avatar ?? null}
errorRowStyles={styles.mt6}
onErrorClose={() => Report.clearAvatarErrors(report.reportID ?? '')}
shouldUseStyleUtilityForAnchorPosition
style={[styles.w100, styles.mb3]}
/>
);
}
return (
<View style={styles.mb3}>
<RoomHeaderAvatars
icons={icons}
reportID={report?.reportID}
/>
</View>
);
}, [report, icons, isMoneyRequestReport, isInvoiceReport, isGroupChat, isThread, styles]);

const reportName =
ReportUtils.isDeprecatedGroupDM(report) || ReportUtils.isGroupChat(report)
Expand All @@ -273,16 +290,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
/>
<ScrollView style={[styles.flex1]}>
<View style={styles.reportDetailsTitleContainer}>
<View style={styles.mb3}>
{isMoneyRequestReport || isInvoiceReport ? (
<MultipleAvatars
icons={icons}
size={CONST.AVATAR_SIZE.LARGE}
/>
) : (
renderAvatar
)}
</View>
{renderAvatar}
<View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
<View style={[styles.alignSelfCenter, styles.w100, styles.mt1]}>
<DisplayNames
Expand Down
Loading