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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _vectorIcons = require("@expo/vector-icons");
var _jsxRuntime = require("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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [styles.groupedItemContent, multiRow && styles.groupedItemContentMultiRow, dense && styles.groupedItemContentDense],
    children: [customIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.actionIcon,
      children: customIcon
    }) : image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
      source: {
        uri: image
      },
      style: [styles.actionImage, {
        width: imageSize,
        height: imageSize
      }]
    }) : icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.iconContainer, {
        backgroundColor: `${iconColor}20`
      }],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
        name: icon,
        size: 20,
        color: iconColor
      })
    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [styles.actionTextContainer, multiRow && styles.actionTextContainerMultiRow],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.actionButtonText, {
          color: textColor
        }],
        children: title
      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.actionButtonSubtext, {
          color: isDarkTheme ? '#98989D' : '#8E8E93'
        }],
        children: subtitle
      }), customContentBelow]
    }), customContent, selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
      name: "checkmark-circle",
      size: 20,
      color: iconColor || '#007AFF'
    }) : showChevron ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
      name: "chevron-forward",
      size: 16,
      color: isDarkTheme ? '#636366' : '#C7C7CC'
    }) : null]
  });
  if (onPress && !disabled) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
      style: itemStyles,
      onPress: onPress,
      children: content
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: itemStyles,
    children: content
  });
};
const styles = _reactNative.StyleSheet.create({
  groupedItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: _reactNative.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'
  }
});
var _default = exports.default = GroupedItem;
//# sourceMappingURL=GroupedItem.js.map