@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/components/GroupedItem.tsx

@@ -1,179 +1,181 @@
-import type React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
+import React, { memo, useMemo } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+// @ts-ignore - MaterialCommunityIcons is available at runtime
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { useHapticPress } from '../hooks/use-haptic-press';
+import { darkenColor } from '../utils/colorUtils';
+import { normalizeColorScheme } from '../utils/themeUtils';
+import { Colors } from '../constants/theme';
+
+/**
+ * Maps Ionicons-style icon names to valid MaterialCommunityIcons names
+ */
+const mapIconName = (iconName: string): string => {
+    const iconMap: Record<string, string> = {
+        'person': 'account',
+        'person-circle': 'account-circle',
+        'person-outline': 'account-outline',
+        'person-add': 'account-plus',
+        'shield-checkmark': 'shield-check',
+        'notifications': 'bell',
+        'people': 'account-group',
+        'time': 'clock',
+        'time-outline': 'clock-outline',
+        'trash': 'delete',
+        'trash-outline': 'delete-outline',
+        'search': 'magnify',
+        'language': 'translate',
+        'language-outline': 'translate',
+        'settings': 'cog',
+        'document-text': 'file-document',
+        'information-circle': 'information',
+        'information-circle-outline': 'information-outline',
+        'log-out': 'logout',
+    };
+
+    return iconMap[iconName] || iconName;
+};
 
 interface GroupedItemProps {
     icon?: string;
     iconColor?: string;
-    image?: string;
-    imageSize?: number;
     title: string;
     subtitle?: string;
-    theme: 'light' | 'dark';
     onPress?: () => void;
     isFirst?: boolean;
     isLast?: boolean;
     showChevron?: boolean;
     disabled?: boolean;
-    selected?: boolean;
     customContent?: React.ReactNode;
     customIcon?: React.ReactNode;
-    multiRow?: boolean;
-    customContentBelow?: React.ReactNode;
-    dense?: boolean; // reduces internal padding
 }
 
-const GroupedItem: React.FC<GroupedItemProps> = ({
+const GroupedItemComponent = ({
     icon,
-    iconColor = '#007AFF',
-    image,
-    imageSize = 20,
+    iconColor,
     title,
     subtitle,
-    theme,
     onPress,
     isFirst = false,
     isLast = false,
-    showChevron = true,
+    showChevron = false,
     disabled = false,
-    selected = false,
     customContent,
     customIcon,
-    multiRow = false,
-    customContentBelow,
-    dense = false,
-}) => {
-    const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const secondaryBackgroundColor = isDarkTheme ? '#1C1C1E' : '#FFFFFF';
-    const selectedBackgroundColor = selected ? `${iconColor}15` : secondaryBackgroundColor;
+}: GroupedItemProps) => {
+    const hookColorScheme = useColorScheme();
+    const colorScheme = normalizeColorScheme(hookColorScheme);
+    // GroupedItem is a leaf component without a theme prop, so it should directly use Colors
+    // instead of useThemeStyles which expects a theme prop from screen components
+    const colors = Colors[colorScheme];
+    // Use fallback color when iconColor is not provided
+    const finalIconColor = iconColor || colors.iconSecurity;
 
-    const itemStyles = [
-        styles.groupedItem,
-        isFirst && styles.firstGroupedItem,
-        isLast && styles.lastGroupedItem,
-        {
-            backgroundColor: selected ? selectedBackgroundColor : secondaryBackgroundColor,
-        },
-    ];
+    const itemStyles = useMemo(
+        () => [
+            styles.groupedItem,
+            isFirst && styles.firstGroupedItem,
+            isLast && styles.lastGroupedItem,
+            {
+                backgroundColor: colors.card,
+            },
+        ],
+        [colors.card, isFirst, isLast],
+    );
 
     const content = (
-        <View style={[
-            styles.groupedItemContent,
-            multiRow && styles.groupedItemContentMultiRow,
-            dense && styles.groupedItemContentDense,
-        ]}>
+        <View style={styles.groupedItemContent}>
             {customIcon ? (
-                <View style={styles.actionIcon}>
-                    {customIcon}
-                </View>
-            ) : image ? (
-                <Image
-                    source={{ uri: image }}
-                    style={[styles.actionImage, { width: imageSize, height: imageSize }]}
-                />
+                <View style={styles.actionIcon}>{customIcon}</View>
             ) : icon ? (
-                <View style={[styles.iconContainer, { backgroundColor: `${iconColor}20` }]}>
-                    <Ionicons name={icon as any} size={20} color={iconColor} />
+                <View style={[styles.iconContainer, { backgroundColor: finalIconColor }]}>
+                    <MaterialCommunityIcons name={mapIconName(icon) as any} size={22} color={darkenColor(finalIconColor)} />
                 </View>
             ) : null}
-            <View style={[styles.actionTextContainer, multiRow && styles.actionTextContainerMultiRow]}>
-                <Text style={[styles.actionButtonText, { color: textColor }]}>{title}</Text>
+            <View style={styles.actionTextContainer}>
+                <Text style={[styles.actionButtonText, { color: colors.text }]}>{title}</Text>
                 {subtitle && (
-                    <Text style={[styles.actionButtonSubtext, { color: isDarkTheme ? '#98989D' : '#8E8E93' }]}>
+                    <Text style={[styles.actionButtonSubtext, { color: colors.secondaryText }]}>
                         {subtitle}
                     </Text>
                 )}
-                {customContentBelow}
             </View>
             {customContent}
-            {selected ? (
-                <Ionicons name="checkmark-circle" size={20} color={iconColor || '#007AFF'} />
-            ) : showChevron ? (
-                <Ionicons name="chevron-forward" size={16} color={isDarkTheme ? '#636366' : '#C7C7CC'} />
-            ) : null}
+            {showChevron && (
+                <Ionicons name="chevron-forward" size={20} color={colors.icon} />
+            )}
         </View>
     );
 
+    const handlePressIn = useHapticPress();
+
     if (onPress && !disabled) {
         return (
-            <TouchableOpacity style={itemStyles} onPress={onPress}>
+            <TouchableOpacity
+                style={itemStyles}
+                onPressIn={disabled ? undefined : handlePressIn}
+                onPress={onPress}
+                activeOpacity={0.7}
+            >
                 {content}
             </TouchableOpacity>
         );
     }
 
-    return (
-        <View style={itemStyles}>
-            {content}
-        </View>
-    );
+    return <View style={itemStyles}>{content}</View>;
 };
 
+GroupedItemComponent.displayName = 'GroupedItem';
+
+export const GroupedItem = memo(GroupedItemComponent);
+
 const styles = StyleSheet.create({
     groupedItem: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        marginBottom: StyleSheet.hairlineWidth,
         overflow: 'hidden',
         width: '100%',
     },
     firstGroupedItem: {
-        borderTopLeftRadius: 16,
-        borderTopRightRadius: 16,
+        borderTopLeftRadius: 18,
+        borderTopRightRadius: 18,
     },
     lastGroupedItem: {
-        borderBottomLeftRadius: 16,
-        borderBottomRightRadius: 16,
-        marginBottom: 0,
+        borderBottomLeftRadius: 18,
+        borderBottomRightRadius: 18,
     },
     groupedItemContent: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingVertical: 14,
-        paddingHorizontal: 16,
+        paddingVertical: 8,
+        paddingHorizontal: 10,
         width: '100%',
-    },
-    groupedItemContentDense: {
-        paddingVertical: 12,
-        paddingHorizontal: 16,
+        gap: 10,
     },
     actionIcon: {
-        marginRight: 12,
+        // marginRight handled by gap
     },
     iconContainer: {
-        width: 32,
-        height: 32,
-        borderRadius: 12,
+        width: 36,
+        height: 36,
+        borderRadius: 18,
         alignItems: 'center',
         justifyContent: 'center',
-        marginRight: 12,
-    },
-    actionImage: {
-        marginRight: 12,
-        borderRadius: 12,
+        // marginRight handled by gap
     },
     actionTextContainer: {
         flex: 1,
     },
     actionButtonText: {
-        fontSize: 17,
+        fontSize: 14,
         fontWeight: '400',
-        marginBottom: 2,
-        letterSpacing: -0.2,
     },
     actionButtonSubtext: {
-        fontSize: 15,
-        lineHeight: 20,
-        marginTop: 1,
-    },
-    groupedItemContentMultiRow: {
-        alignItems: 'flex-start',
-        paddingVertical: 12,
-    },
-    actionTextContainerMultiRow: {
-        alignItems: 'flex-start',
+        fontSize: 12,
+        marginTop: 2,
     },
 });
 

package/src/ui/components/GroupedSection.tsx

@@ -1,59 +1,54 @@
-import type React from 'react';
+import React, { memo } from 'react';
 import { View } from 'react-native';
-import GroupedItem from './GroupedItem';
+import { GroupedItem } from './GroupedItem';
+import { Ionicons } from '@expo/vector-icons';
 
 interface GroupedSectionItem {
     id: string;
     icon?: string;
     iconColor?: string;
-    image?: string;
-    imageSize?: number;
     title: string;
     subtitle?: string;
     onPress?: () => void;
     showChevron?: boolean;
     disabled?: boolean;
-    selected?: boolean;
     customContent?: React.ReactNode;
     customIcon?: React.ReactNode;
     multiRow?: boolean;
-    customContentBelow?: React.ReactNode;
     dense?: boolean;
+    customContentBelow?: React.ReactNode;
 }
 
 interface GroupedSectionProps {
     items: GroupedSectionItem[];
-    theme: 'light' | 'dark';
 }
 
-const GroupedSection: React.FC<GroupedSectionProps> = ({ items, theme }) => {
+const GroupedSectionComponent = ({ items }: GroupedSectionProps) => {
     return (
         <View style={{ width: '100%' }}>
             {items.map((item, index) => (
-                <GroupedItem
-                    key={item.id}
-                    icon={item.icon}
-                    iconColor={item.iconColor}
-                    image={item.image}
-                    imageSize={item.imageSize}
-                    title={item.title}
-                    subtitle={item.subtitle}
-                    theme={theme}
-                    onPress={item.onPress}
-                    isFirst={index === 0}
-                    isLast={index === items.length - 1}
-                    showChevron={item.showChevron}
-                    disabled={item.disabled}
-                    selected={item.selected}
-                    customContent={item.customContent}
-                    customIcon={item.customIcon}
-                    multiRow={item.multiRow}
-                    dense={item.dense}
-                    customContentBelow={item.customContentBelow}
-                />
+                <View key={item.id} style={{ marginBottom: index < items.length - 1 ? 4 : 0 }}>
+                    <GroupedItem
+                        icon={item.icon}
+                        iconColor={item.iconColor}
+                        title={item.title}
+                        subtitle={item.subtitle}
+                        onPress={item.onPress}
+                        isFirst={index === 0}
+                        isLast={index === items.length - 1}
+                        showChevron={item.showChevron}
+                        disabled={item.disabled}
+                        customContent={item.customContent}
+                        customIcon={item.customIcon}
+                    />
+                </View>
             ))}
         </View>
     );
 };
 
+GroupedSectionComponent.displayName = 'GroupedSection';
+
+export const GroupedSection = memo(GroupedSectionComponent);
+
 export default GroupedSection;