fix additional error

Expensify · Oct 16, 2024 · 626d6f4 · 626d6f4
1 parent 121c162
commit 626d6f4
Showing 1 changed file with 43 additions and 36 deletions.
diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import lodashIsEqual from 'lodash/isEqual';
-import type {RefObject} from 'react';
-import React, {Fragment, useLayoutEffect, useState} from 'react';
+import type {ReactNode, RefObject} from 'react';
+import React, {useLayoutEffect, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import type {ModalProps} from 'react-native-modal';
@@ -128,6 +128,14 @@ type PopoverMenuProps = Partial<PopoverModalProps> & {
     shouldUpdateFocusedIndex?: boolean;
 };
 
+const renderWithConditionalWrapper = (shouldUseScrollView: boolean, contentContainerStyle: StyleProp<ViewStyle>, children: ReactNode): React.JSX.Element => {
+    if (shouldUseScrollView) {
+        return <ScrollView contentContainerStyle={contentContainerStyle}>{children}</ScrollView>;
+    }
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{children}</>;
+};
+
 function PopoverMenu({
     menuItems,
     onItemSelected,
@@ -168,7 +176,6 @@ function PopoverMenu({
     const {windowHeight} = useWindowDimensions();
 
     const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: currentMenuItemsFocusedIndex, maxIndex: currentMenuItems.length - 1, isActive: isVisible});
-    const WrapComponent = shouldUseScrollView ? ScrollView : Fragment;
 
     const selectItem = (index: number) => {
         const selectedItem = currentMenuItems.at(index);
@@ -266,6 +273,38 @@ function PopoverMenu({
         setCurrentMenuItems(menuItems);
     }, [menuItems]);
 
+    const renderedMenuItems = currentMenuItems.map((item, menuIndex) => {
+        const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item;
+
+        return (
+            <OfflineWithFeedback
+                // eslint-disable-next-line react/no-array-index-key
+                key={`${item.text}_${menuIndex}`}
+                pendingAction={item.pendingAction}
+            >
+                <FocusableMenuItem
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={`${item.text}_${menuIndex}`}
+                    title={text}
+                    onPress={() => selectItem(menuIndex)}
+                    focused={focusedIndex === menuIndex}
+                    shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}
+                    shouldCheckActionAllowedOnPress={false}
+                    onFocus={() => {
+                        if (!shouldUpdateFocusedIndex) {
+                            return;
+                        }
+                        setFocusedIndex(menuIndex);
+                    }}
+                    style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}}
+                    titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])}
+                    // Spread other props dynamically
+                    {...menuItemProps}
+                />
+            </OfflineWithFeedback>
+        );
+    });
+
     return (
         <PopoverWithMeasuredContent
             anchorPosition={anchorPosition}
@@ -295,39 +334,7 @@ function PopoverMenu({
                 <View style={[isSmallScreenWidth ? {maxHeight: windowHeight - 250} : styles.createMenuContainer, containerStyles]}>
                     {renderHeaderText()}
                     {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
-                    {/** eslint-disable-next-line react/jsx-props-no-spreading */}
-                    <WrapComponent {...(shouldUseScrollView && {contentContainerStyle: scrollContainerStyle})}>
-                        {currentMenuItems.map((item, menuIndex) => {
-                            const {text, onSelected, subMenuItems, shouldCallAfterModalHide, ...menuItemProps} = item;
-                            return (
-                                <OfflineWithFeedback
-                                    // eslint-disable-next-line react/no-array-index-key
-                                    key={`${item.text}_${menuIndex}`}
-                                    pendingAction={item.pendingAction}
-                                >
-                                    <FocusableMenuItem
-                                        // eslint-disable-next-line react/no-array-index-key
-                                        key={`${item.text}_${menuIndex}`}
-                                        title={text}
-                                        onPress={() => selectItem(menuIndex)}
-                                        focused={focusedIndex === menuIndex}
-                                        shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}
-                                        shouldCheckActionAllowedOnPress={false}
-                                        onFocus={() => {
-                                            if (!shouldUpdateFocusedIndex) {
-                                                return;
-                                            }
-                                            setFocusedIndex(menuIndex);
-                                        }}
-                                        style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}}
-                                        titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])}
-                                        // eslint-disable-next-line react/jsx-props-no-spreading
-                                        {...menuItemProps}
-                                    />
-                                </OfflineWithFeedback>
-                            );
-                        })}
-                    </WrapComponent>
+                    {renderWithConditionalWrapper(shouldUseScrollView, scrollContainerStyle, renderedMenuItems)}
                 </View>
             </FocusTrapForModal>
         </PopoverWithMeasuredContent>