128 lines
3.5 KiB
TypeScript
128 lines
3.5 KiB
TypeScript
import { Colors } from '@/constants/Colors';
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import React from 'react';
|
|
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
|
|
|
|
interface DietInputCardProps {
|
|
cardId: string;
|
|
dietTextInputs: Record<string, string>;
|
|
onDietTextInputChange: (cardId: string, value: string) => void;
|
|
onSubmitDietText: (cardId: string) => void;
|
|
onBackToDietOptions: (cardId: string) => void;
|
|
onShowDietPhotoActionSheet: (cardId: string) => void;
|
|
}
|
|
|
|
const DietInputCard: React.FC<DietInputCardProps> = ({
|
|
cardId,
|
|
dietTextInputs,
|
|
onDietTextInputChange,
|
|
onSubmitDietText,
|
|
onBackToDietOptions,
|
|
onShowDietPhotoActionSheet
|
|
}) => {
|
|
const colorScheme = useColorScheme();
|
|
const theme = Colors[colorScheme ?? 'light'];
|
|
|
|
return (
|
|
<View style={[styles.bubble, { backgroundColor: theme.surface }]}>
|
|
<View style={styles.dietInputHeader}>
|
|
<TouchableOpacity
|
|
style={styles.dietBackBtn}
|
|
onPress={() => onBackToDietOptions(cardId)}
|
|
>
|
|
<Ionicons name="arrow-back" size={16} color={theme.text} />
|
|
</TouchableOpacity>
|
|
<Text style={[styles.dietInputTitle, { color: theme.text }]}>记录饮食</Text>
|
|
<TouchableOpacity
|
|
style={[styles.photoBtn, { backgroundColor: `${theme.primary}20` }]}
|
|
onPress={() => onShowDietPhotoActionSheet(cardId)}
|
|
>
|
|
<Ionicons name="camera" size={16} color={theme.primary} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<TextInput
|
|
style={[styles.dietTextInput, {
|
|
color: theme.text,
|
|
borderColor: theme.border,
|
|
backgroundColor: theme.background
|
|
}]}
|
|
placeholder="描述你吃了什么，比如：早餐吃了一个苹果、一杯牛奶..."
|
|
placeholderTextColor={theme.textMuted}
|
|
value={dietTextInputs[cardId] || ''}
|
|
onChangeText={(text) => onDietTextInputChange(cardId, text)}
|
|
multiline
|
|
textAlignVertical="top"
|
|
/>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.dietSubmitBtn, { backgroundColor: theme.primary }]}
|
|
onPress={() => onSubmitDietText(cardId)}
|
|
>
|
|
<Text style={[styles.submitButtonText, { color: theme.onPrimary }]}>提交</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
bubble: {
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 10,
|
|
borderRadius: 16,
|
|
maxWidth: '85%',
|
|
alignSelf: 'flex-start',
|
|
gap: 12,
|
|
minWidth: 300
|
|
},
|
|
dietInputHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
dietBackBtn: {
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: 14,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: 'rgba(0,0,0,0.06)',
|
|
},
|
|
dietInputTitle: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
flex: 1,
|
|
textAlign: 'center',
|
|
},
|
|
photoBtn: {
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: 14,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
dietTextInput: {
|
|
minHeight: 80,
|
|
borderWidth: 1,
|
|
borderRadius: 12,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 10,
|
|
fontSize: 15,
|
|
textAlignVertical: 'top',
|
|
},
|
|
dietSubmitBtn: {
|
|
height: 40,
|
|
paddingHorizontal: 16,
|
|
borderRadius: 10,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
alignSelf: 'flex-end',
|
|
},
|
|
submitButtonText: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
});
|
|
|
|
export default DietInputCard; |