@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 { View, Text, TouchableOpacity, StyleSheet, Image } 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',
  image,
  imageSize = 20,
  title,
  subtitle,
  theme,
  onPress,
  isFirst = false,
  isLast = false,
  showChevron = true,
  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;
  const itemStyles = [styles.groupedItem, isFirst && styles.firstGroupedItem, isLast && styles.lastGroupedItem, {
    backgroundColor: selected ? selectedBackgroundColor : secondaryBackgroundColor
  }];
  const content = /*#__PURE__*/_jsxs(View, {
    style: [styles.groupedItemContent, multiRow && styles.groupedItemContentMultiRow, dense && styles.groupedItemContentDense],
    children: [customIcon ? /*#__PURE__*/_jsx(View, {
      style: styles.actionIcon,
      children: customIcon
    }) : image ? /*#__PURE__*/_jsx(Image, {
      source: {
        uri: image
      },
      style: [styles.actionImage, {
        width: imageSize,
        height: imageSize
      }]
    }) : icon ? /*#__PURE__*/_jsx(View, {
      style: [styles.iconContainer, {
        backgroundColor: `${iconColor}20`
      }],
      children: /*#__PURE__*/_jsx(Ionicons, {
        name: icon,
        size: 20,
        color: iconColor
      })
    }) : null, /*#__PURE__*/_jsxs(View, {
      style: [styles.actionTextContainer, multiRow && styles.actionTextContainerMultiRow],
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.actionButtonText, {
          color: textColor
        }],
        children: title
      }), subtitle && /*#__PURE__*/_jsx(Text, {
        style: [styles.actionButtonSubtext, {
          color: isDarkTheme ? '#98989D' : '#8E8E93'
        }],
        children: subtitle
      }), customContentBelow]
    }), customContent, selected ? /*#__PURE__*/_jsx(Ionicons, {
      name: "checkmark-circle",
      size: 20,
      color: iconColor || '#007AFF'
    }) : showChevron ? /*#__PURE__*/_jsx(Ionicons, {
      name: "chevron-forward",
      size: 16,
      color: isDarkTheme ? '#636366' : '#C7C7CC'
    }) : null]
  });
  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: StyleSheet.hairlineWidth,
    overflow: 'hidden',
    width: '100%'
  },
  firstGroupedItem: {
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16
  },
  lastGroupedItem: {
    borderBottomLeftRadius: 16,
    borderBottomRightRadius: 16,
    marginBottom: 0
  },
  groupedItemContent: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 14,
    paddingHorizontal: 16,
    width: '100%'
  },
  groupedItemContentDense: {
    paddingVertical: 12,
    paddingHorizontal: 16
  },
  actionIcon: {
    marginRight: 12
  },
  iconContainer: {
    width: 32,
    height: 32,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12
  },
  actionImage: {
    marginRight: 12,
    borderRadius: 12
  },
  actionTextContainer: {
    flex: 1
  },
  actionButtonText: {
    fontSize: 17,
    fontWeight: '400',
    marginBottom: 2,
    letterSpacing: -0.2
  },
  actionButtonSubtext: {
    fontSize: 15,
    lineHeight: 20,
    marginTop: 1
  },
  groupedItemContentMultiRow: {
    alignItems: 'flex-start',
    paddingVertical: 12
  },
  actionTextContainerMultiRow: {
    alignItems: 'flex-start'
  }
});
export default GroupedItem;
//# sourceMappingURL=GroupedItem.js.map