add title style to menu item

Expensify · May 6, 2024 · 3adc309 · 3adc309
1 parent 5497a13
commit 3adc309
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
@@ -105,6 +105,8 @@ type MenuItemBaseProps = {
     /** The fill color to pass into the secondary icon. */
     secondaryIconFill?: string;
 
+    isSecondaryIconHoverable?: boolean;
+
     /** Icon Width */
     iconWidth?: number;
 
@@ -170,6 +172,12 @@ type MenuItemBaseProps = {
     /** Text to display for the item */
     title?: string;
 
+    /** Component to display as the title */
+    titleComponent?: ReactElement;
+
+    /** Any additional styles to apply to the container for title components */
+    titleContainerStyle?: StyleProp<ViewStyle>;
+
     /** A right-aligned subtitle for this menu option */
     subtitle?: string | number;
 
@@ -285,6 +293,7 @@ function MenuItem(
         secondaryIcon,
         secondaryIconFill,
         iconType = CONST.ICON_TYPE_ICON,
+        isSecondaryIconHoverable = false,
         iconWidth,
         iconHeight,
         iconStyles,
@@ -302,6 +311,8 @@ function MenuItem(
         focused = false,
         disabled = false,
         title,
+        titleComponent,
+        titleContainerStyle,
         subtitle,
         shouldShowBasicTitle,
         label,
@@ -528,7 +539,13 @@ function MenuItem(
                                             </View>
                                         )}
                                         {secondaryIcon && (
-                                            <View style={[styles.popoverMenuIcon, iconStyles]}>
+                                            <View
+                                                style={[
+                                                    styles.popoverMenuIcon,
+                                                    iconStyles,
+                                                    isSecondaryIconHoverable && StyleUtils.getBackgroundAndBorderStyle(focused || isHovered ? theme.hoverComponentBG : theme.overlay),
+                                                ]}
+                                            >
                                                 <Icon
                                                     contentFit={contentFit}
                                                     src={secondaryIcon}
@@ -540,7 +557,7 @@ function MenuItem(
                                                 />
                                             </View>
                                         )}
-                                        <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu)]}>
+                                        <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu), titleContainerStyle]}>
                                             {!!description && shouldShowDescriptionOnTop && (
                                                 <Text
                                                     style={descriptionTextStyles}
@@ -604,6 +621,7 @@ function MenuItem(
                                                     </Text>
                                                 </View>
                                             )}
+                                            {titleComponent}
                                         </View>
                                     </View>
                                 </View>

diff --git a/src/components/ReportActionItem/TripDetailsView.tsx b/src/components/ReportActionItem/TripDetailsView.tsx
@@ -124,9 +124,9 @@ function ReservationView({reservation}: ReservationViewProps) {
 
     const formattedDate = getFormattedDate();
 
-    const bottomDescription = `${reservation.confirmations.length > 0 ? `${reservation.confirmations[0].value} • ` : ''}${
+    const bottomDescription = `${reservation.confirmations?.length > 0 ? `${reservation.confirmations[0].value} • ` : ''}${
         reservation.type === CONST.RESERVATION_TYPE.FLIGHT
-            ? `${reservation.company.longName} • ${reservation.company.shortName ?? ''} ${reservation.route.number}`
+            ? `${reservation.company?.longName} • ${reservation?.company?.shortName ?? ''} ${reservation.route?.number}`
             : reservation.start.address
     }`;
 
@@ -148,7 +148,7 @@ function ReservationView({reservation}: ReservationViewProps) {
                     numberOfLines={1}
                     style={[styles.textNormalBold, styles.lh20]}
                 >
-                    {reservation.company.longName}
+                    {reservation.company?.longName}
                 </Text>
             )}
             <Text style={[styles.textSupportingSmallSize, styles.lh14]}>{bottomDescription}</Text>
@@ -158,7 +158,7 @@ function ReservationView({reservation}: ReservationViewProps) {
     return (
         <MenuItemWithTopDescription
             description={formattedDate}
-            descriptionTextStyle={[styles.textLabelSupporting, styles.lh16, styles.tripDescriptionMargin]}
+            descriptionTextStyle={[styles.textLabelSupporting, styles.lh16]}
             titleComponent={titleComponent}
             titleContainerStyle={styles.justifyContentStart}
             secondaryIcon={reservationIcon}