83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import { Colors } from '@/constants/Colors';
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
|
import React from 'react';
|
|
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
|
|
|
|
interface WeightInputCardProps {
|
|
cardId: string;
|
|
weightInputs: Record<string, string>;
|
|
onWeightInputChange: (cardId: string, value: string) => void;
|
|
onSaveWeight: (cardId: string) => void;
|
|
}
|
|
|
|
const WeightInputCard: React.FC<WeightInputCardProps> = ({
|
|
cardId,
|
|
weightInputs,
|
|
onWeightInputChange,
|
|
onSaveWeight
|
|
}) => {
|
|
const colorScheme = useColorScheme();
|
|
const theme = Colors[colorScheme ?? 'light'];
|
|
|
|
return (
|
|
<View style={[styles.bubble, { backgroundColor: theme.surface }]}>
|
|
<View style={styles.weightRow}>
|
|
<TextInput
|
|
style={[styles.weightInput, { color: theme.text, borderColor: theme.border }]}
|
|
placeholder="输入体重"
|
|
placeholderTextColor={theme.textMuted}
|
|
value={weightInputs[cardId] || ''}
|
|
onChangeText={(text) => onWeightInputChange(cardId, text)}
|
|
keyboardType="numeric"
|
|
/>
|
|
<Text style={[styles.weightUnit, { color: theme.text }]}>kg</Text>
|
|
<TouchableOpacity
|
|
style={[styles.weightSaveBtn, { backgroundColor: theme.primary }]}
|
|
onPress={() => onSaveWeight(cardId)}
|
|
>
|
|
<Text style={[styles.saveButtonText, { color: theme.onPrimary }]}>保存</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
bubble: {
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 10,
|
|
borderRadius: 16,
|
|
maxWidth: '85%',
|
|
alignSelf: 'flex-start',
|
|
minWidth: 250
|
|
},
|
|
weightRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
},
|
|
weightInput: {
|
|
flex: 1,
|
|
height: 36,
|
|
borderWidth: 1,
|
|
borderRadius: 8,
|
|
paddingHorizontal: 10,
|
|
backgroundColor: 'rgba(255,255,255,0.9)',
|
|
},
|
|
weightUnit: {
|
|
fontWeight: '700',
|
|
},
|
|
weightSaveBtn: {
|
|
height: 36,
|
|
paddingHorizontal: 12,
|
|
borderRadius: 8,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
saveButtonText: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
});
|
|
|
|
export default WeightInputCard; |