@oxyhq/services
Version:
142 lines (141 loc) • 4.19 kB
JavaScript
"use strict";
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/useColorScheme.js";
import { darkenColor } from "../utils/colorUtils.js";
import { normalizeColorScheme } from "../utils/themeUtils.js";
import { Colors } from "../constants/theme.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const GroupedItemComponent = ({
icon,
iconColor,
title,
subtitle,
onPress,
isFirst = false,
isLast = false,
showChevron = false,
disabled = false,
customContent,
customIcon,
accessibilityLabel,
accessibilityHint
}) => {
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 = useMemo(() => [styles.groupedItem, isFirst && styles.firstGroupedItem, isLast && styles.lastGroupedItem, {
backgroundColor: colors.card
}], [colors.card, isFirst, isLast]);
const content = /*#__PURE__*/_jsxs(View, {
style: styles.groupedItemContent,
children: [customIcon ? /*#__PURE__*/_jsx(View, {
style: styles.actionIcon,
children: customIcon
}) : icon ? /*#__PURE__*/_jsx(View, {
style: [styles.iconContainer, {
backgroundColor: finalIconColor
}],
children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
name: icon,
size: 22,
color: darkenColor(finalIconColor)
})
}) : null, /*#__PURE__*/_jsxs(View, {
style: styles.actionTextContainer,
children: [/*#__PURE__*/_jsx(Text, {
style: [styles.actionButtonText, {
color: colors.text
}],
children: title
}), subtitle && /*#__PURE__*/_jsx(Text, {
style: [styles.actionButtonSubtext, {
color: colors.secondaryText
}],
children: subtitle
})]
}), customContent, showChevron && /*#__PURE__*/_jsx(Ionicons, {
name: "chevron-forward",
size: 20,
color: colors.icon
})]
});
if (onPress && !disabled) {
return /*#__PURE__*/_jsx(TouchableOpacity, {
style: itemStyles,
onPress: onPress,
activeOpacity: 0.7,
accessibilityRole: "button",
accessibilityLabel: accessibilityLabel || title,
accessibilityHint: accessibilityHint || subtitle,
accessibilityState: {
disabled
},
children: content
});
}
return /*#__PURE__*/_jsx(View, {
style: itemStyles,
accessibilityRole: "text",
accessibilityLabel: accessibilityLabel || title,
children: content
});
};
GroupedItemComponent.displayName = 'GroupedItem';
export const GroupedItem = /*#__PURE__*/memo(GroupedItemComponent);
const styles = StyleSheet.create({
groupedItem: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
overflow: 'hidden',
width: '100%'
},
firstGroupedItem: {
borderTopLeftRadius: 18,
borderTopRightRadius: 18
},
lastGroupedItem: {
borderBottomLeftRadius: 18,
borderBottomRightRadius: 18
},
groupedItemContent: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 8,
paddingHorizontal: 10,
width: '100%',
gap: 10
},
actionIcon: {
// marginRight handled by gap
},
iconContainer: {
width: 36,
height: 36,
borderRadius: 18,
alignItems: 'center',
justifyContent: 'center'
// marginRight handled by gap
},
actionTextContainer: {
flex: 1
},
actionButtonText: {
fontSize: 14,
fontWeight: '400'
},
actionButtonSubtext: {
fontSize: 12,
marginTop: 2
}
});
export default GroupedItem;
//# sourceMappingURL=GroupedItem.js.map