@oxyhq/services
Version:
Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀
109 lines (108 loc) • 3.07 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _vectorIcons = require("@expo/vector-icons");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.groupedItemContent,
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: icon,
size: 20,
color: iconColor,
style: styles.actionIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.actionTextContainer,
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 ? '#BBBBBB' : '#666666'
}],
children: subtitle
})]
}), customContent, showChevron && /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "chevron-forward",
size: 16,
color: isDarkTheme ? '#666666' : '#999999'
})]
});
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: 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
}
});
var _default = exports.default = GroupedItem;
//# sourceMappingURL=GroupedItem.js.map