@oxyhq/services
Version:
85 lines (84 loc) • 2.18 kB
JavaScript
"use strict";
import React from 'react';
import { View, Text, Switch, StyleSheet } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Reusable setting row component with switch
* Extracted from PrivacySettingsScreen for reuse across settings screens
*/
const SettingRow = ({
title,
description,
value,
onValueChange,
disabled = false,
textColor,
mutedTextColor,
borderColor,
activeColor = '#d169e5',
inactiveColor = '#767577',
accessibilityLabel
}) => {
return /*#__PURE__*/_jsxs(View, {
style: [styles.settingRow, borderColor ? {
borderBottomColor: borderColor
} : undefined],
accessibilityRole: "none",
children: [/*#__PURE__*/_jsxs(View, {
style: styles.settingInfo,
children: [/*#__PURE__*/_jsx(Text, {
style: [styles.settingTitle, textColor ? {
color: textColor
} : undefined],
accessibilityRole: "text",
children: title
}), description && /*#__PURE__*/_jsx(Text, {
style: [styles.settingDescription, mutedTextColor ? {
color: mutedTextColor
} : undefined],
accessibilityRole: "text",
children: description
})]
}), /*#__PURE__*/_jsx(Switch, {
value: value,
onValueChange: onValueChange,
disabled: disabled,
trackColor: {
false: inactiveColor,
true: activeColor
},
thumbColor: value ? '#fff' : '#f4f3f4',
accessibilityRole: "switch",
accessibilityLabel: accessibilityLabel || title,
accessibilityState: {
checked: value,
disabled
},
accessibilityHint: description
})]
});
};
const styles = StyleSheet.create({
settingRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 16,
borderBottomWidth: 1
},
settingInfo: {
flex: 1,
marginRight: 16
},
settingTitle: {
fontSize: 16,
fontWeight: '500',
marginBottom: 4
},
settingDescription: {
fontSize: 14,
opacity: 0.7
}
});
export default /*#__PURE__*/React.memo(SettingRow);
//# sourceMappingURL=SettingRow.js.map