fix: updated submenu styles & code refactoring

a-ghorbani · Feb 5, 2025 · 65d38b3 · 65d38b3
1 parent 42716d4
commit 65d38b3
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 39 deletions.
diff --git a/src/components/ChatGenerationSettingsSheet/index.ts b/src/components/ChatGenerationSettingsSheet/index.ts
@@ -0,0 +1 @@
+export * from './ChatGenerationSettingsSheet';
diff --git a/src/components/HeaderRight/HeaderRight.tsx b/src/components/HeaderRight/HeaderRight.tsx
@@ -22,7 +22,7 @@ import {
 } from '../../assets/icons';
 import {Menu} from '../Menu';
 import {L10nContext} from '../../utils';
-import {ChatGenerationSettingsSheet} from '../ChatGenerationSettingsSheet/ChatGenerationSettingsSheet';
+import {ChatGenerationSettingsSheet} from '..';
 import {Model} from '../../utils/types';
 
 export const HeaderRight: React.FC = observer(() => {

diff --git a/src/components/Menu/MenuItem/MenuItem.tsx b/src/components/Menu/MenuItem/MenuItem.tsx
@@ -3,7 +3,10 @@ import React, {useRef, useState, useEffect} from 'react';
 import {StyleProp, TextStyle, ViewStyle} from 'react-native';
 
 import {Menu as PaperMenu, Icon} from 'react-native-paper';
-import {MenuItemProps as PaperMenuItemProps} from 'react-native-paper';
+import {
+  MenuItemProps as PaperMenuItemProps,
+  MenuProps as PaperMenuProps,
+} from 'react-native-paper';
 import {IconSource} from 'react-native-paper/lib/typescript/components/Icon';
 
 import {SubMenu} from '../SubMenu/SubMenu';
@@ -25,6 +28,7 @@ export interface MenuItemProps
   onSubmenuOpen?: () => void;
   onSubmenuClose?: () => void;
   selectable?: boolean;
+  submenuProps?: Omit<PaperMenuProps, 'theme'>;
 }
 
 export const MenuItem: React.FC<MenuItemProps> = ({
@@ -41,6 +45,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   onSubmenuOpen,
   onSubmenuClose,
   selectable = false,
+  submenuProps,
   ...menuItemProps
 }) => {
   const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
@@ -114,6 +119,16 @@ export const MenuItem: React.FC<MenuItemProps> = ({
     </View>
   );
 
+  const getTrailingIcon = () => {
+    if (submenu) {
+      return renderSubmenuIcon;
+    }
+    if (trailingIcon || icon) {
+      return renderTrailingIcon;
+    }
+    return undefined;
+  };
+
   const handlePress = (e: any) => {
     if (submenu) {
       itemRef.current?.measure((x, y, width, height, pageX, pageY) => {
@@ -157,7 +172,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
         {...(!selectable && !leadingIcon
           ? {}
           : {leadingIcon: renderLeadingIcon})}
-        trailingIcon={submenu ? renderSubmenuIcon : renderTrailingIcon}
+        trailingIcon={getTrailingIcon()}
       />
       {submenu && (
         <SubMenu
@@ -166,7 +181,8 @@ export const MenuItem: React.FC<MenuItemProps> = ({
             setIsSubmenuOpen(false);
             onSubmenuClose?.();
           }}
-          anchorPosition={submenuPosition}>
+          anchor={submenuPosition}
+          {...submenuProps}>
           {submenu}
         </SubMenu>
       )}

diff --git a/src/components/Menu/MenuItem/styles.ts b/src/components/Menu/MenuItem/styles.ts
@@ -8,19 +8,21 @@ export const createStyles = (theme: Theme) =>
       backgroundColor: 'transparent',
       paddingRight: 16,
       paddingLeft: 16,
-      width: 250,
+      maxWidth: 'auto',
     },
     leadingContainer: {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'flex-start',
     },
     contentContainer: {
-      flex: 1,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'flex-start',
       marginLeft: 10,
+      marginRight: 10,
+      maxWidth: 'auto',
+      flexGrow: 1,
     },
     label: {
       ...theme.fonts.titleSmall,

diff --git a/src/components/Menu/SubMenu/SubMenu.tsx b/src/components/Menu/SubMenu/SubMenu.tsx
@@ -1,23 +1,22 @@
 import React from 'react';
 
-import {Menu as PaperMenu} from 'react-native-paper';
+import {
+  Menu as PaperMenu,
+  MenuProps as PaperMenuProps,
+} from 'react-native-paper';
 
 import {useTheme} from '../../../hooks';
 
 import {createStyles} from './styles';
 
-interface SubMenuProps {
-  visible: boolean;
-  onDismiss: () => void;
-  children: React.ReactNode;
-  anchorPosition?: {x: number; y: number};
-}
+interface SubMenuProps extends Omit<PaperMenuProps, 'theme'> {}
 
 export const SubMenu: React.FC<SubMenuProps> = ({
   visible,
   onDismiss,
   children,
-  anchorPosition,
+  style,
+  ...menuProps
 }) => {
   const theme = useTheme();
   const styles = createStyles(theme);
@@ -26,9 +25,9 @@ export const SubMenu: React.FC<SubMenuProps> = ({
     <PaperMenu
       visible={visible}
       onDismiss={onDismiss}
-      anchor={anchorPosition}
-      style={styles.menu}
-      contentStyle={styles.content}>
+      style={[styles.menu, style]}
+      contentStyle={styles.content}
+      {...menuProps}>
       {children}
     </PaperMenu>
   );

diff --git a/src/components/Menu/SubMenu/__tests__/SubMenu.test.tsx b/src/components/Menu/SubMenu/__tests__/SubMenu.test.tsx
@@ -6,10 +6,7 @@ import {MenuItem} from '../../MenuItem';
 describe('SubMenu', () => {
   it('renders when visible', () => {
     const {getByText} = render(
-      <SubMenu
-        visible={true}
-        onDismiss={() => {}}
-        anchorPosition={{x: 100, y: 100}}>
+      <SubMenu visible={true} onDismiss={() => {}} anchor={{x: 100, y: 100}}>
         <MenuItem label="SubMenu Item" onPress={() => {}} />
       </SubMenu>,
     );
@@ -19,10 +16,7 @@ describe('SubMenu', () => {
 
   it('does not render when not visible', () => {
     const {queryByText} = render(
-      <SubMenu
-        visible={false}
-        onDismiss={() => {}}
-        anchorPosition={{x: 100, y: 100}}>
+      <SubMenu visible={false} onDismiss={() => {}} anchor={{x: 100, y: 100}}>
         <MenuItem label="SubMenu Item" onPress={() => {}} />
       </SubMenu>,
     );
@@ -32,10 +26,7 @@ describe('SubMenu', () => {
 
   it('handles multiple menu items', () => {
     const {getByText} = render(
-      <SubMenu
-        visible={true}
-        onDismiss={() => {}}
-        anchorPosition={{x: 100, y: 100}}>
+      <SubMenu visible={true} onDismiss={() => {}} anchor={{x: 100, y: 100}}>
         <MenuItem label="Item 1" onPress={() => {}} />
         <MenuItem label="Item 2" onPress={() => {}} />
         <MenuItem label="Item 3" onPress={() => {}} />

diff --git a/src/components/Menu/SubMenu/styles.ts b/src/components/Menu/SubMenu/styles.ts
@@ -5,7 +5,7 @@ import {Theme} from '../../../utils/types';
 export const createStyles = (theme: Theme) =>
   StyleSheet.create({
     menu: {
-      //minWidth: 220,
+      maxWidth: '90%',
       marginTop: 0,
       marginLeft: 0,
     },

diff --git a/src/components/Menu/styles.ts b/src/components/Menu/styles.ts
@@ -10,6 +10,7 @@ export const createStyles = (theme: Theme) =>
       shadowOffset: {width: 0, height: 0},
       elevation: 5,
       borderRadius: 12,
+      maxWidth: '90%',
     },
     menuWithSubmenu: {
       elevation: 0,

diff --git a/src/components/ModelsHeaderRight/ModelsHeaderRight.tsx b/src/components/ModelsHeaderRight/ModelsHeaderRight.tsx
@@ -74,7 +74,7 @@ export const ModelsHeaderRight = observer(() => {
         }
         anchorPosition="bottom">
         {/* Filter section */}
-        <Menu.Item label="Filters" isGroupLabel style={styles.menuItem} />
+        <Menu.Item label="Filters" isGroupLabel />
         <Menu.Item
           icon={({size}) => (
             <Image
@@ -85,24 +85,21 @@ export const ModelsHeaderRight = observer(() => {
           onPress={() => toggleFilter('hf')}
           label={l10n.menuTitleHf}
           selected={filters.includes('hf')}
-          style={styles.menuItem}
         />
         <Menu.Item
           icon={filters.includes('downloaded') ? 'download-circle' : 'download'}
           onPress={() => toggleFilter('downloaded')}
           label={l10n.menuTitleDownloaded}
           selected={filters.includes('downloaded')}
-          style={styles.menuItem}
         />
 
         {/* View section */}
-        <Menu.Item label="View" isGroupLabel style={styles.menuItem} />
+        <Menu.Item label="View" isGroupLabel />
         <Menu.Item
           icon={filters.includes('grouped') ? 'layers' : 'layers-outline'}
           onPress={() => toggleFilter('grouped')}
           label={l10n.menuTitleGrouped}
           selected={filters.includes('grouped')}
-          style={styles.menuItem}
         />
 
         {/* Actions section */}
@@ -114,7 +111,6 @@ export const ModelsHeaderRight = observer(() => {
             showResetDialog();
           }}
           label={l10n.menuTitleReset}
-          style={styles.menuItem}
         />
       </Menu>
     </View>

diff --git a/src/components/ModelsHeaderRight/styles.ts b/src/components/ModelsHeaderRight/styles.ts
@@ -11,7 +11,4 @@ export const createStyles = () =>
       margin: 0,
       marginHorizontal: 4,
     },
-    menuItem: {
-      width: 220,
-    },
   });
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -3,6 +3,7 @@ export * from './AttachmentButton';
 export * from './Avatar';
 export * from './BottomSheetSearchbar';
 export * from './Bubble';
+export * from './ChatGenerationSettingsSheet';
 export * from './ChatInput';
 export * from './ChatView';
 export * from './Checkbox';