轻松聘
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

54 lines
1.9 KiB

import { Ionicons } from '@expo/vector-icons';
import { StyleSheet, Text, View } from 'react-native';
import { colors } from '../../../src/theme';
import { useOnboarding } from '../../../src/hooks';
import { ScreenShell } from '../ui/ScreenShell';
import { YearMonthWheel } from '../ui/WheelPicker';
import { PrimaryButton } from '../ui/PrimaryButton';
export function P13JoinDate() {
const { data, setData, navigate, back } = useOnboarding();
// 未滑动滚轮时 state 仍是空串,此时放行会把空年月写进资料
const canNext = data.joinYear !== '' && data.joinMonth !== '';
return (
<ScreenShell title="入职时间" showBack onBack={back}>
<View style={styles.iconWrap}>
<Ionicons name="calendar" size={34} color={colors.primary} />
</View>
{/* 公司名来自上一步,理论上不会为空;兜底避免拼出「在什么时候入职 」这样的半句话 */}
<Text style={styles.tip}>
{data.company ? `在什么时候入职 ${data.company}` : '请选择入职年月'}
</Text>
<YearMonthWheel
year={data.joinYear}
month={data.joinMonth}
onYearChange={(v) => setData({ joinYear: v })}
onMonthChange={(v) => setData({ joinMonth: v })}
// 入职时间可能在明年,年份要往后留出空间(出生年月则不需要)
futureYears={5}
/>
<View style={styles.footer}>
<PrimaryButton label="下一步" active={canNext} onPress={() => navigate('P14')} />
</View>
</ScreenShell>
);
}
const styles = StyleSheet.create({
iconWrap: {
width: 64,
height: 64,
borderRadius: 18,
backgroundColor: colors.primaryLight,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
marginBottom: 12,
},
tip: { fontSize: 13, color: colors.textHint, textAlign: 'center', marginBottom: 18 },
footer: { marginTop: 28 },
});