@oxyhq/services/lib/module/ui/components/GroupedItem.js

Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀

"use strict";

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const GroupedItem = ({
  icon,
  iconColor = '#007AFF',
  title,
  subtitle,
  theme,
  onPress,
  isFirst = false,
  isLast = false,
  showChevron = true,
  disabled = false,
  customContent
}) => {
  const isDarkTheme = theme === 'dark';
  const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
  const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
  const itemStyles = [styles.groupedItem, isFirst && styles.firstGroupedItem, isLast && styles.lastGroupedItem, {
    backgroundColor: secondaryBackgroundColor
  }];
  const content = /*#__PURE__*/_jsxs(View, {
    style: styles.groupedItemContent,
    children: [icon && /*#__PURE__*/_jsx(Ionicons, {
      name: icon,
      size: 20,
      color: iconColor,
      style: styles.actionIcon
    }), /*#__PURE__*/_jsxs(View, {
      style: styles.actionTextContainer,
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.actionButtonText, {
          color: textColor
        }],
        children: title
      }), subtitle && /*#__PURE__*/_jsx(Text, {
        style: [styles.actionButtonSubtext, {
          color: isDarkTheme ? '#BBBBBB' : '#666666'
        }],
        children: subtitle
      })]
    }), customContent, showChevron && /*#__PURE__*/_jsx(Ionicons, {
      name: "chevron-forward",
      size: 16,
      color: isDarkTheme ? '#666666' : '#999999'
    })]
  });
  if (onPress && !disabled) {
    return /*#__PURE__*/_jsx(TouchableOpacity, {
      style: itemStyles,
      onPress: onPress,
      children: content
    });
  }
  return /*#__PURE__*/_jsx(View, {
    style: itemStyles,
    children: content
  });
};
const styles = StyleSheet.create({
  groupedItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 2,
    overflow: 'hidden'
  },
  firstGroupedItem: {
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24
  },
  lastGroupedItem: {
    borderBottomLeftRadius: 24,
    borderBottomRightRadius: 24,
    marginBottom: 8
  },
  groupedItemContent: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    width: '100%'
  },
  actionIcon: {
    marginRight: 12
  },
  actionTextContainer: {
    flex: 1
  },
  actionButtonText: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 2
  },
  actionButtonSubtext: {
    fontSize: 13,
    lineHeight: 18
  }
});
export default GroupedItem;
//# sourceMappingURL=GroupedItem.js.map