bca6670390
- Introduced new translation files for medication, personal, and weight management in Chinese. - Updated the main index file to include the new translation modules. - Enhanced the medication type definitions to include 'ointment'. - Refactored workout type labels to utilize i18n for better localization support. - Improved sleep quality descriptions and recommendations with i18n integration.
726 lines
22 KiB
TypeScript
726 lines
22 KiB
TypeScript
import { useAppSelector } from '@/hooks/redux';
|
||
import { useCosUpload } from '@/hooks/useCosUpload';
|
||
import { useI18n } from '@/hooks/useI18n';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import { BlurView } from 'expo-blur';
|
||
import { Image } from 'expo-image';
|
||
import * as ImagePicker from 'expo-image-picker';
|
||
import { LinearGradient } from 'expo-linear-gradient';
|
||
import React, { useEffect, useMemo, useState } from 'react';
|
||
import {
|
||
ActivityIndicator,
|
||
Alert,
|
||
Dimensions,
|
||
Keyboard,
|
||
KeyboardAvoidingView,
|
||
Modal,
|
||
Platform,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
TextInput,
|
||
TouchableOpacity,
|
||
View,
|
||
} from 'react-native';
|
||
|
||
const CTA_GRADIENT: [string, string] = ['#5E8BFF', '#6B6CFF'];
|
||
const CTA_DISABLED_GRADIENT: [string, string] = ['#d3d7e8', '#c1c6da'];
|
||
|
||
export interface CreateCustomFoodModalProps {
|
||
visible: boolean;
|
||
onClose: () => void;
|
||
onSave: (foodData: CustomFoodData) => void;
|
||
}
|
||
|
||
export interface CustomFoodData {
|
||
name: string;
|
||
defaultAmount: number;
|
||
caloriesUnit: string;
|
||
calories: number;
|
||
imageUrl?: string;
|
||
protein?: number;
|
||
fat?: number;
|
||
carbohydrate?: number;
|
||
}
|
||
|
||
export function CreateCustomFoodModal({
|
||
visible,
|
||
onClose,
|
||
onSave
|
||
}: CreateCustomFoodModalProps) {
|
||
const { t } = useI18n();
|
||
const [foodName, setFoodName] = useState('');
|
||
const [defaultAmount, setDefaultAmount] = useState('100');
|
||
const [caloriesUnit, setCaloriesUnit] = useState(t('createCustomFood.units.kcal'));
|
||
const [calories, setCalories] = useState('100');
|
||
const [imageUrl, setImageUrl] = useState<string>('');
|
||
const [protein, setProtein] = useState('0');
|
||
const [fat, setFat] = useState('0');
|
||
const [carbohydrate, setCarbohydrate] = useState('0');
|
||
const [keyboardHeight, setKeyboardHeight] = useState(0);
|
||
|
||
// 获取用户ID和上传功能
|
||
const accountProfile = useAppSelector((s) => (s as any)?.user?.profile as any);
|
||
const userId: string | undefined = useMemo(() => {
|
||
return (
|
||
accountProfile?.userId ||
|
||
accountProfile?.id ||
|
||
accountProfile?._id ||
|
||
accountProfile?.uid ||
|
||
undefined
|
||
) as string | undefined;
|
||
}, [accountProfile]);
|
||
|
||
const { upload, uploading } = useCosUpload();
|
||
|
||
// 键盘监听
|
||
useEffect(() => {
|
||
const keyboardDidShowListener = Keyboard.addListener(
|
||
Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
|
||
(e) => {
|
||
setKeyboardHeight(e.endCoordinates.height);
|
||
}
|
||
);
|
||
const keyboardDidHideListener = Keyboard.addListener(
|
||
Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
|
||
() => {
|
||
setKeyboardHeight(0);
|
||
}
|
||
);
|
||
|
||
return () => {
|
||
keyboardDidShowListener?.remove();
|
||
keyboardDidHideListener?.remove();
|
||
};
|
||
}, []);
|
||
|
||
// 重置表单
|
||
useEffect(() => {
|
||
if (visible) {
|
||
setFoodName('');
|
||
setDefaultAmount('100');
|
||
setCaloriesUnit(t('createCustomFood.units.kcal'));
|
||
setCalories('100');
|
||
setImageUrl('');
|
||
setProtein('0');
|
||
setFat('0');
|
||
setCarbohydrate('0');
|
||
}
|
||
}, [visible]);
|
||
|
||
// 选择图片
|
||
const handleSelectImage = async () => {
|
||
try {
|
||
const resp = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||
const libGranted = resp.status === 'granted' || (resp as any).accessPrivileges === 'limited';
|
||
if (!libGranted) {
|
||
Alert.alert(
|
||
t('createCustomFood.alerts.permissionDenied.title'),
|
||
t('createCustomFood.alerts.permissionDenied.message')
|
||
);
|
||
return;
|
||
}
|
||
|
||
const result = await ImagePicker.launchImageLibraryAsync({
|
||
allowsEditing: true,
|
||
quality: 0.9,
|
||
aspect: [1, 1],
|
||
mediaTypes: ['images'],
|
||
base64: false,
|
||
});
|
||
|
||
if (!result.canceled) {
|
||
const asset = result.assets?.[0];
|
||
if (!asset?.uri) return;
|
||
|
||
// 直接上传到 COS，成功后写入 URL
|
||
try {
|
||
const { url } = await upload(
|
||
{ uri: asset.uri, name: asset.fileName || 'food.jpg', type: asset.mimeType || 'image/jpeg' },
|
||
{ prefix: 'foods/', userId }
|
||
);
|
||
|
||
setImageUrl(url);
|
||
} catch (e) {
|
||
console.warn('上传照片失败', e);
|
||
Alert.alert(
|
||
t('createCustomFood.alerts.uploadFailed.title'),
|
||
t('createCustomFood.alerts.uploadFailed.message')
|
||
);
|
||
}
|
||
}
|
||
} catch (e) {
|
||
Alert.alert(
|
||
t('createCustomFood.alerts.error.title'),
|
||
t('createCustomFood.alerts.error.message')
|
||
);
|
||
}
|
||
};
|
||
|
||
// 计算实际热量预览
|
||
const actualCalories = Math.round((parseFloat(calories) || 0) * (parseFloat(defaultAmount) || 0) / 100);
|
||
|
||
// 保存自定义食物
|
||
const handleSave = () => {
|
||
if (!foodName.trim()) {
|
||
Alert.alert(
|
||
t('createCustomFood.alerts.validation.title'),
|
||
t('createCustomFood.alerts.validation.nameRequired')
|
||
);
|
||
return;
|
||
}
|
||
|
||
if (!calories.trim() || parseFloat(calories) <= 0) {
|
||
Alert.alert(
|
||
t('createCustomFood.alerts.validation.title'),
|
||
t('createCustomFood.alerts.validation.caloriesRequired')
|
||
);
|
||
return;
|
||
}
|
||
|
||
const foodData: CustomFoodData = {
|
||
name: foodName.trim(),
|
||
defaultAmount: parseFloat(defaultAmount) || 100,
|
||
caloriesUnit,
|
||
calories: parseFloat(calories) || 0,
|
||
imageUrl: imageUrl || undefined,
|
||
protein: parseFloat(protein) || undefined,
|
||
fat: parseFloat(fat) || undefined,
|
||
carbohydrate: parseFloat(carbohydrate) || undefined,
|
||
};
|
||
|
||
onSave(foodData);
|
||
onClose();
|
||
};
|
||
|
||
const isSaveDisabled = !foodName.trim() || !calories.trim();
|
||
|
||
return (
|
||
<Modal
|
||
visible={visible}
|
||
animationType="slide"
|
||
transparent={true}
|
||
onRequestClose={onClose}
|
||
presentationStyle="overFullScreen"
|
||
>
|
||
<BlurView intensity={20} tint="dark" style={styles.overlay}>
|
||
<KeyboardAvoidingView
|
||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||
style={styles.keyboardAvoidingView}
|
||
>
|
||
<TouchableOpacity activeOpacity={1} onPress={onClose} style={styles.dismissArea} />
|
||
<View
|
||
style={[
|
||
styles.modalContainer,
|
||
keyboardHeight > 0 && {
|
||
height: screenHeight - keyboardHeight - 60,
|
||
maxHeight: screenHeight - keyboardHeight - 60,
|
||
},
|
||
]}
|
||
>
|
||
<View style={styles.modalHeaderBar}>
|
||
<View style={styles.dragIndicator} />
|
||
</View>
|
||
<ScrollView
|
||
style={styles.scrollView}
|
||
showsVerticalScrollIndicator={false}
|
||
keyboardShouldPersistTaps="handled"
|
||
contentContainerStyle={{
|
||
flexGrow: 1,
|
||
paddingBottom: keyboardHeight > 0 ? 20 : 40,
|
||
}}
|
||
>
|
||
{/* 头部 */}
|
||
<View style={styles.header}>
|
||
<TouchableOpacity onPress={onClose} style={styles.backButton} activeOpacity={0.7}>
|
||
<Ionicons name="close-circle" size={32} color="#E2E8F0" />
|
||
</TouchableOpacity>
|
||
<Text style={styles.headerTitle}>{t('createCustomFood.title')}</Text>
|
||
<TouchableOpacity
|
||
style={[styles.saveButton, isSaveDisabled && styles.saveButtonDisabled]}
|
||
onPress={handleSave}
|
||
disabled={isSaveDisabled}
|
||
activeOpacity={0.8}
|
||
>
|
||
<LinearGradient
|
||
colors={isSaveDisabled ? CTA_DISABLED_GRADIENT : CTA_GRADIENT}
|
||
start={{ x: 0, y: 0 }}
|
||
end={{ x: 1, y: 1 }}
|
||
style={styles.saveButtonGradient}
|
||
>
|
||
<Text style={styles.saveButtonText}>{t('createCustomFood.save')}</Text>
|
||
</LinearGradient>
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
{/* 效果预览区域 */}
|
||
<View style={styles.previewSection}>
|
||
<View style={styles.previewCard}>
|
||
<LinearGradient
|
||
colors={['#ffffff', '#F8F9FF']}
|
||
start={{ x: 0, y: 0 }}
|
||
end={{ x: 0, y: 1 }}
|
||
style={StyleSheet.absoluteFill}
|
||
/>
|
||
<View style={styles.previewHeader}>
|
||
<Text style={styles.sectionTitle}>{t('createCustomFood.preview.title')}</Text>
|
||
</View>
|
||
<View style={styles.previewContent}>
|
||
<View style={styles.imageWrapper}>
|
||
{imageUrl ? (
|
||
<Image style={styles.previewImage} source={{ uri: imageUrl }} />
|
||
) : (
|
||
<View style={styles.previewImagePlaceholder}>
|
||
<Ionicons name="restaurant" size={24} color="#94A3B8" />
|
||
</View>
|
||
)}
|
||
</View>
|
||
<View style={styles.previewInfo}>
|
||
<Text style={styles.previewName} numberOfLines={1}>
|
||
{foodName || t('createCustomFood.preview.defaultName')}
|
||
</Text>
|
||
<View style={styles.previewBadge}>
|
||
<Ionicons name="flame" size={14} color="#F59E0B" />
|
||
<Text style={styles.previewCalories}>
|
||
{actualCalories} {caloriesUnit} / {defaultAmount}
|
||
{t('createCustomFood.units.g')}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 基本信息 */}
|
||
<View style={styles.section}>
|
||
<View style={styles.sectionHeader}>
|
||
<Text style={styles.sectionTitle}>{t('createCustomFood.basicInfo.title')}</Text>
|
||
<Text style={styles.requiredIndicator}>*</Text>
|
||
</View>
|
||
<View style={styles.sectionCard}>
|
||
{/* 食物名称 */}
|
||
<View style={styles.inputRowContainer}>
|
||
<Text style={styles.inputRowLabel}>{t('createCustomFood.basicInfo.name')}</Text>
|
||
<View style={styles.inputRowContent}>
|
||
<View style={styles.modernInputContainer}>
|
||
<TextInput
|
||
style={styles.modernNumberInput}
|
||
value={foodName}
|
||
onChangeText={setFoodName}
|
||
placeholder={t('createCustomFood.basicInfo.namePlaceholder')}
|
||
placeholderTextColor="#94A3B8"
|
||
/>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 默认数量 */}
|
||
<View style={styles.inputRowContainer}>
|
||
<Text style={styles.inputRowLabel}>{t('createCustomFood.basicInfo.defaultAmount')}</Text>
|
||
<View style={styles.inputRowContent}>
|
||
<View style={styles.modernInputContainer}>
|
||
<TextInput
|
||
style={styles.modernNumberInput}
|
||
value={defaultAmount}
|
||
onChangeText={setDefaultAmount}
|
||
keyboardType="numeric"
|
||
placeholder="100"
|
||
placeholderTextColor="#94A3B8"
|
||
/>
|
||
<Text style={styles.unitText}>{t('createCustomFood.units.g')}</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 食物热量 */}
|
||
<View style={[styles.inputRowContainer, { marginBottom: 0 }]}>
|
||
<Text style={styles.inputRowLabel}>{t('createCustomFood.basicInfo.calories')}</Text>
|
||
<View style={styles.inputRowContent}>
|
||
<View style={styles.modernInputContainer}>
|
||
<TextInput
|
||
style={styles.modernNumberInput}
|
||
value={calories}
|
||
onChangeText={setCalories}
|
||
keyboardType="numeric"
|
||
placeholder="0"
|
||
placeholderTextColor="#94A3B8"
|
||
/>
|
||
<Text style={styles.unitText}>{t('createCustomFood.units.kcal')}</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 可选信息 */}
|
||
<View style={styles.section}>
|
||
<Text style={styles.sectionTitle}>{t('createCustomFood.optionalInfo.title')}</Text>
|
||
<View style={styles.sectionCard}>
|
||
{/* 照片 */}
|
||
<View style={styles.inputRowContainer}>
|
||
<Text style={styles.inputRowLabel}>{t('createCustomFood.optionalInfo.photo')}</Text>
|
||
<View style={styles.inputRowContent}>
|
||
<TouchableOpacity
|
||
style={styles.modernImageSelector}
|
||
onPress={handleSelectImage}
|
||
disabled={uploading}
|
||
activeOpacity={0.8}
|
||
>
|
||
{imageUrl ? (
|
||
<Image style={styles.selectedImage} source={{ uri: imageUrl }} />
|
||
) : (
|
||
<View style={styles.modernImagePlaceholder}>
|
||
<Ionicons name="camera-outline" size={28} color="#94A3B8" />
|
||
<Text style={styles.imagePlaceholderText}>
|
||
{t('createCustomFood.optionalInfo.addPhoto')}
|
||
</Text>
|
||
</View>
|
||
)}
|
||
{uploading && (
|
||
<View style={styles.imageLoadingOverlay}>
|
||
<ActivityIndicator size="large" color="#FFFFFF" />
|
||
</View>
|
||
)}
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 蛋白质 */}
|
||
<View style={styles.inputRowContainer}>
|
||
<Text style={styles.inputRowLabel}>{t('createCustomFood.optionalInfo.protein')}</Text>
|
||
<View style={styles.inputRowContent}>
|
||
<View style={styles.modernInputContainer}>
|
||
<TextInput
|
||
style={styles.modernNumberInput}
|
||
value={protein}
|
||
onChangeText={setProtein}
|
||
keyboardType="numeric"
|
||
placeholder="0"
|
||
placeholderTextColor="#94A3B8"
|
||
/>
|
||
<Text style={styles.unitText}>{t('createCustomFood.units.gram')}</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 脂肪 */}
|
||
<View style={styles.inputRowContainer}>
|
||
<Text style={styles.inputRowLabel}>{t('createCustomFood.optionalInfo.fat')}</Text>
|
||
<View style={styles.inputRowContent}>
|
||
<View style={styles.modernInputContainer}>
|
||
<TextInput
|
||
style={styles.modernNumberInput}
|
||
value={fat}
|
||
onChangeText={setFat}
|
||
keyboardType="numeric"
|
||
placeholder="0"
|
||
placeholderTextColor="#94A3B8"
|
||
/>
|
||
<Text style={styles.unitText}>{t('createCustomFood.units.gram')}</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 碳水化合物 */}
|
||
<View style={[styles.inputRowContainer, { marginBottom: 0 }]}>
|
||
<Text style={styles.inputRowLabel}>
|
||
{t('createCustomFood.optionalInfo.carbohydrate')}
|
||
</Text>
|
||
<View style={styles.inputRowContent}>
|
||
<View style={styles.modernInputContainer}>
|
||
<TextInput
|
||
style={styles.modernNumberInput}
|
||
value={carbohydrate}
|
||
onChangeText={setCarbohydrate}
|
||
keyboardType="numeric"
|
||
placeholder="0"
|
||
placeholderTextColor="#94A3B8"
|
||
/>
|
||
<Text style={styles.unitText}>{t('createCustomFood.units.gram')}</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
</View>
|
||
</KeyboardAvoidingView>
|
||
</BlurView>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
const { height: screenHeight } = Dimensions.get('window');
|
||
|
||
const styles = StyleSheet.create({
|
||
overlay: {
|
||
flex: 1,
|
||
},
|
||
keyboardAvoidingView: {
|
||
flex: 1,
|
||
justifyContent: 'flex-end',
|
||
},
|
||
dismissArea: {
|
||
flex: 1,
|
||
},
|
||
modalContainer: {
|
||
backgroundColor: '#F1F5F9', // Slate 100
|
||
borderTopLeftRadius: 32,
|
||
borderTopRightRadius: 32,
|
||
height: '90%',
|
||
maxHeight: '90%',
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: -4,
|
||
},
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 12,
|
||
elevation: 20,
|
||
overflow: 'hidden',
|
||
},
|
||
modalHeaderBar: {
|
||
width: '100%',
|
||
height: 24,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: '#F1F5F9',
|
||
},
|
||
dragIndicator: {
|
||
width: 40,
|
||
height: 4,
|
||
backgroundColor: '#CBD5E1',
|
||
borderRadius: 2,
|
||
},
|
||
scrollView: {
|
||
flex: 1,
|
||
backgroundColor: '#F1F5F9',
|
||
},
|
||
header: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
paddingHorizontal: 20,
|
||
paddingBottom: 20,
|
||
},
|
||
backButton: {
|
||
padding: 4,
|
||
marginLeft: -8,
|
||
},
|
||
headerTitle: {
|
||
fontSize: 20,
|
||
fontWeight: '800',
|
||
color: '#1E293B',
|
||
textAlign: 'center',
|
||
fontFamily: 'AliBold',
|
||
},
|
||
saveButton: {
|
||
borderRadius: 20,
|
||
overflow: 'hidden',
|
||
},
|
||
saveButtonDisabled: {
|
||
opacity: 0.6,
|
||
},
|
||
saveButtonGradient: {
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 8,
|
||
borderRadius: 20,
|
||
},
|
||
saveButtonText: {
|
||
fontSize: 14,
|
||
color: '#FFFFFF',
|
||
fontWeight: '700',
|
||
fontFamily: 'AliBold',
|
||
},
|
||
previewSection: {
|
||
paddingHorizontal: 20,
|
||
marginBottom: 24,
|
||
},
|
||
previewCard: {
|
||
borderRadius: 24,
|
||
padding: 20,
|
||
overflow: 'hidden',
|
||
backgroundColor: '#FFFFFF',
|
||
shadowColor: 'rgba(30, 41, 59, 0.08)',
|
||
shadowOffset: { width: 0, height: 8 },
|
||
shadowOpacity: 0.4,
|
||
shadowRadius: 12,
|
||
elevation: 4,
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(255,255,255,0.6)',
|
||
},
|
||
previewHeader: {
|
||
marginBottom: 16,
|
||
},
|
||
previewContent: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
imageWrapper: {
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 4 },
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 8,
|
||
elevation: 4,
|
||
},
|
||
previewImage: {
|
||
width: 56,
|
||
height: 56,
|
||
borderRadius: 16,
|
||
backgroundColor: '#F8FAFC',
|
||
},
|
||
previewImagePlaceholder: {
|
||
width: 56,
|
||
height: 56,
|
||
borderRadius: 16,
|
||
backgroundColor: '#F1F5F9',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
borderWidth: 1,
|
||
borderColor: '#E2E8F0',
|
||
},
|
||
previewInfo: {
|
||
flex: 1,
|
||
marginLeft: 16,
|
||
justifyContent: 'center',
|
||
},
|
||
previewName: {
|
||
fontSize: 18,
|
||
fontWeight: '700',
|
||
color: '#1E293B',
|
||
marginBottom: 6,
|
||
fontFamily: 'AliBold',
|
||
},
|
||
previewBadge: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
backgroundColor: '#FFFBEB',
|
||
paddingHorizontal: 8,
|
||
paddingVertical: 4,
|
||
borderRadius: 8,
|
||
alignSelf: 'flex-start',
|
||
gap: 4,
|
||
},
|
||
previewCalories: {
|
||
fontSize: 13,
|
||
color: '#D97706',
|
||
fontWeight: '600',
|
||
fontFamily: 'AliRegular',
|
||
},
|
||
section: {
|
||
paddingHorizontal: 20,
|
||
marginBottom: 24,
|
||
},
|
||
sectionHeader: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 12,
|
||
paddingHorizontal: 4,
|
||
},
|
||
sectionTitle: {
|
||
fontSize: 14,
|
||
fontWeight: '700',
|
||
color: '#64748B',
|
||
fontFamily: 'AliBold',
|
||
textTransform: 'uppercase',
|
||
letterSpacing: 0.5,
|
||
},
|
||
requiredIndicator: {
|
||
fontSize: 14,
|
||
color: '#EF4444',
|
||
marginLeft: 4,
|
||
fontWeight: '700',
|
||
},
|
||
sectionCard: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 24,
|
||
padding: 20,
|
||
shadowColor: 'rgba(30, 41, 59, 0.05)',
|
||
shadowOffset: { width: 0, height: 4 },
|
||
shadowOpacity: 0.5,
|
||
shadowRadius: 10,
|
||
elevation: 2,
|
||
},
|
||
inputRowContainer: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 16,
|
||
},
|
||
inputRowLabel: {
|
||
fontSize: 15,
|
||
color: '#475569',
|
||
fontWeight: '600',
|
||
width: 90,
|
||
marginRight: 12,
|
||
fontFamily: 'AliRegular',
|
||
},
|
||
inputRowContent: {
|
||
flex: 1,
|
||
},
|
||
modernInputContainer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
borderRadius: 16,
|
||
backgroundColor: '#F8FAFC',
|
||
borderWidth: 1,
|
||
borderColor: '#E2E8F0',
|
||
overflow: 'hidden',
|
||
},
|
||
modernNumberInput: {
|
||
flex: 1,
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 12,
|
||
fontSize: 16,
|
||
color: '#1E293B',
|
||
textAlign: 'right',
|
||
fontFamily: 'AliRegular',
|
||
},
|
||
unitText: {
|
||
fontSize: 14,
|
||
color: '#94A3B8',
|
||
paddingRight: 16,
|
||
minWidth: 40,
|
||
textAlign: 'center',
|
||
fontWeight: '500',
|
||
},
|
||
modernImageSelector: {
|
||
alignSelf: 'flex-end',
|
||
borderRadius: 20,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 2 },
|
||
shadowOpacity: 0.05,
|
||
shadowRadius: 4,
|
||
elevation: 2,
|
||
},
|
||
selectedImage: {
|
||
width: 72,
|
||
height: 72,
|
||
borderRadius: 20,
|
||
},
|
||
modernImagePlaceholder: {
|
||
width: 72,
|
||
height: 72,
|
||
borderRadius: 20,
|
||
backgroundColor: '#F8FAFC',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
borderWidth: 1,
|
||
borderColor: '#E2E8F0',
|
||
borderStyle: 'dashed',
|
||
},
|
||
imagePlaceholderText: {
|
||
fontSize: 11,
|
||
color: '#94A3B8',
|
||
marginTop: 4,
|
||
fontWeight: '600',
|
||
textAlign: 'center',
|
||
},
|
||
imageLoadingOverlay: {
|
||
...StyleSheet.absoluteFillObject,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: 'rgba(0,0,0,0.3)',
|
||
borderRadius: 20,
|
||
},
|
||
}); |