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.
78 lines
2.9 KiB
78 lines
2.9 KiB
import { StyleSheet, Text, View } from 'react-native';
|
|
import { colors, spacing } from '../../../src/theme';
|
|
import { useOnboarding } from '../../../src/hooks';
|
|
import { ScreenShell } from '../ui/ScreenShell';
|
|
import { Tag, TagGroup } from '../ui/Tag';
|
|
import { PrimaryButton } from '../ui/PrimaryButton';
|
|
|
|
const MAX = 5;
|
|
const GROUPS = [
|
|
{ name: '运维工具', items: ['Kubernetes', 'Docker'] },
|
|
{ name: '前端框架', items: ['Vue.js', 'React', 'Angular', 'AngularJS', 'Bootstrap', 'JQuery', 'Vue'] },
|
|
{ name: '软件开发工具', items: ['SVN'] },
|
|
{
|
|
name: '技术类型',
|
|
items: ['多进程', '网络协议', 'AJAX', '数据结构', '消息队列', '多线程', '分布式技术', '微服务架构'],
|
|
},
|
|
{ name: '后端框架', items: ['Spring', 'Django', 'Express', 'Gin'] },
|
|
];
|
|
|
|
export function P14Skills() {
|
|
const { data, setData, navigate, back } = useOnboarding();
|
|
const skills = data.skills;
|
|
const full = skills.length >= MAX;
|
|
|
|
const toggle = (s: string) => {
|
|
if (skills.includes(s)) {
|
|
setData({ skills: skills.filter((x) => x !== s) });
|
|
} else if (!full) {
|
|
setData({ skills: [...skills, s] });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ScreenShell showBack onBack={back}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.title}>技能选择</Text>
|
|
<View style={[styles.counter, skills.length > 0 && styles.counterActive]}>
|
|
<Text style={[styles.counterText, skills.length > 0 && styles.counterTextActive]}>
|
|
{skills.length}/{MAX}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{GROUPS.map((g) => (
|
|
<View key={g.name} style={styles.group}>
|
|
<Text style={styles.groupName}>{g.name}</Text>
|
|
<TagGroup>
|
|
{g.items.map((s) => (
|
|
<Tag
|
|
key={s}
|
|
label={s}
|
|
selected={skills.includes(s)}
|
|
disabled={!skills.includes(s) && full}
|
|
onPress={() => toggle(s)}
|
|
/>
|
|
))}
|
|
</TagGroup>
|
|
</View>
|
|
))}
|
|
|
|
<View style={styles.footer}>
|
|
<PrimaryButton label="下一步" active={skills.length > 0} onPress={() => navigate('P16')} />
|
|
</View>
|
|
</ScreenShell>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: spacing.block },
|
|
title: { fontSize: 20, fontWeight: '800', color: colors.textPrimary },
|
|
counter: { backgroundColor: colors.borderLight, paddingHorizontal: 12, paddingVertical: 4, borderRadius: 12 },
|
|
counterActive: { backgroundColor: colors.primaryLight },
|
|
counterText: { fontSize: 13, fontWeight: '700', color: colors.textDisabled },
|
|
counterTextActive: { color: colors.primaryText },
|
|
group: { marginBottom: spacing.block },
|
|
groupName: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginBottom: spacing.sm },
|
|
footer: { marginTop: 20 },
|
|
});
|
|
|