111 lines
2.9 KiB
TypeScript
111 lines
2.9 KiB
TypeScript
import React from 'react';
|
||
import { View, StyleSheet, TouchableOpacity, Text, Platform, Dimensions } from 'react-native';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { OnboardingColors } from '@/constants/OnboardingTheme';
|
||
import AddIcon from '@/assets/images/icon/add_icon.svg';
|
||
import ReduceIcon from '@/assets/images/icon/reduce_icon.svg';
|
||
import BtnClicked from '@/assets/images/icon/btn_clicked.svg';
|
||
|
||
const { height } = Dimensions.get('window');
|
||
|
||
interface ReminderStepProps {
|
||
value: number;
|
||
onChange: (value: number) => void;
|
||
onFinish: () => void;
|
||
onSkip: () => void;
|
||
}
|
||
|
||
export function ReminderStep({ value, onChange, onFinish, onSkip }: ReminderStepProps) {
|
||
const { t } = useTranslation();
|
||
|
||
const handleReduce = () => {
|
||
// 允许 0～5；0 表示关闭每日提醒
|
||
if (value > 0) onChange(value - 1);
|
||
};
|
||
|
||
const handleAdd = () => {
|
||
if (value < 5) onChange(value + 1);
|
||
};
|
||
|
||
return (
|
||
<View style={styles.container}>
|
||
<View style={styles.counterContainer}>
|
||
<TouchableOpacity onPress={handleReduce} activeOpacity={0.7}>
|
||
<ReduceIcon width={47} height={47} />
|
||
</TouchableOpacity>
|
||
|
||
<View style={styles.numberWrapper}>
|
||
<Text style={styles.numberText}>{value}</Text>
|
||
<Text style={styles.unitText}>{t('dailyReminder.timesUnit')}</Text>
|
||
</View>
|
||
|
||
<TouchableOpacity onPress={handleAdd} activeOpacity={0.7}>
|
||
<AddIcon width={47} height={47} />
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
<View style={styles.footer}>
|
||
<TouchableOpacity onPress={onFinish} activeOpacity={0.8}>
|
||
<BtnClicked width={87} height={57} />
|
||
</TouchableOpacity>
|
||
|
||
<TouchableOpacity onPress={onSkip} activeOpacity={0.8} style={styles.skipBtn}>
|
||
<Text style={styles.skipText}>{t('onboarding.skip')}</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
alignItems: 'center',
|
||
paddingTop: 20,
|
||
},
|
||
counterContainer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
width: '100%',
|
||
marginTop: 40,
|
||
},
|
||
numberWrapper: {
|
||
flexDirection: 'row',
|
||
alignItems: 'flex-end',
|
||
marginHorizontal: 40,
|
||
},
|
||
numberText: {
|
||
fontSize: 107,
|
||
fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
|
||
fontWeight: '600',
|
||
color: OnboardingColors.textPrimary,
|
||
lineHeight: 120,
|
||
},
|
||
unitText: {
|
||
fontSize: 17,
|
||
fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
|
||
fontWeight: '600',
|
||
color: OnboardingColors.textPrimary,
|
||
marginBottom: 20,
|
||
marginLeft: 4,
|
||
},
|
||
footer: {
|
||
position: 'absolute',
|
||
bottom: height * 0.12,
|
||
alignItems: 'center',
|
||
}
|
||
,
|
||
skipBtn: {
|
||
marginTop: 14,
|
||
paddingVertical: 10,
|
||
paddingHorizontal: 18,
|
||
},
|
||
skipText: {
|
||
color: OnboardingColors.textPrimary,
|
||
fontSize: 15,
|
||
fontWeight: '600',
|
||
opacity: 0.85,
|
||
},
|
||
});
|