Merge pull request #42370 from dragnoir/40944-fix

Fix: apply style utility for unstable anchorPosition
Expensify · May 27, 2024 · 077297e · 077297e
2 parents 50ec4d5 + f586090
commit 077297e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx
@@ -123,6 +123,9 @@ type AvatarWithImagePickerProps = {
 
     /** Optionally override the default "Edit" icon */
     editIcon?: IconAsset;
+
+    /** Determines if a style utility function should be used for calculating the PopoverMenu anchor position. */
+    shouldUseStyleUtilityForAnchorPosition?: boolean;
 };
 
 function AvatarWithImagePicker({
@@ -152,6 +155,7 @@ function AvatarWithImagePicker({
     enablePreview = false,
     shouldDisableViewPhoto = false,
     editIcon = Expensicons.Pencil,
+    shouldUseStyleUtilityForAnchorPosition = false,
 }: AvatarWithImagePickerProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -393,7 +397,7 @@ function AvatarWithImagePicker({
                                             }
                                         }}
                                         menuItems={menuItems}
-                                        anchorPosition={popoverPosition}
+                                        anchorPosition={shouldUseStyleUtilityForAnchorPosition ? styles.popoverMenuOffset(windowWidth) : popoverPosition}
                                         anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
                                         withoutOverlay
                                         anchorRef={anchorRef}

diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx
@@ -128,6 +128,7 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP
                     shouldDisableViewPhoto
                     editIcon={Expensicons.Camera}
                     editIconStyle={styles.smallEditIconAccount}
+                    shouldUseStyleUtilityForAnchorPosition
                 />
             </View>
             <MenuItemWithTopDescription

diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
@@ -250,6 +250,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                 errors={report.errorFields?.avatar ?? null}
                 errorRowStyles={styles.mt6}
                 onErrorClose={() => Report.clearAvatarErrors(report.reportID ?? '')}
+                shouldUseStyleUtilityForAnchorPosition
             />
         ) : (
             <RoomHeaderAvatars

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -3519,6 +3519,12 @@ const styles = (theme: ThemeColors) =>
                 horizontal: windowWidth - 140,
             } satisfies AnchorPosition),
 
+        popoverMenuOffset: (windowWidth: number) =>
+            ({
+                ...getPopOverVerticalOffset(180),
+                horizontal: windowWidth - 355,
+            } satisfies AnchorPosition),
+
         iPhoneXSafeArea: {
             backgroundColor: theme.inverse,
             flex: 1,