99 lines
2.6 KiB
TypeScript
99 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, Pressable } from 'react-native';
|
|
import Svg, { Path } from 'react-native-svg';
|
|
import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';
|
|
import { useTheme } from '../../../theme';
|
|
import { haptics } from '../../../services/haptics/haptics';
|
|
import type { LoginRole } from '../../../types/app';
|
|
|
|
interface LoginRoleTabsProps {
|
|
activeRole: LoginRole;
|
|
onRoleChange: (role: LoginRole) => void;
|
|
}
|
|
|
|
const ROLES: LoginRole[] = ['User', 'Employee', 'Agent'];
|
|
|
|
const ActiveTabBackground = () => (
|
|
<Animated.View
|
|
entering={FadeIn.duration(300)}
|
|
exiting={FadeOut.duration(200)}
|
|
layout={Layout.springify().damping(15)}
|
|
style={StyleSheet.absoluteFill}
|
|
>
|
|
<Svg width="100%" height="100%" viewBox="0 0 110 36" preserveAspectRatio="none">
|
|
<Path d="M 0,36 L 0,12 Q 0,0 12,0 L 80,0 Q 88,0 92,6 L 110,36 Z" fill="#143e6c" />
|
|
</Svg>
|
|
</Animated.View>
|
|
);
|
|
|
|
export const LoginRoleTabs: React.FC<LoginRoleTabsProps> = ({ activeRole, onRoleChange }) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{ROLES.map((role, index) => {
|
|
const isActive = activeRole === role;
|
|
|
|
return (
|
|
<Pressable
|
|
key={role}
|
|
onPress={() => {
|
|
if (!isActive) {
|
|
haptics.selection();
|
|
onRoleChange(role);
|
|
}
|
|
}}
|
|
style={({ pressed }) => [
|
|
styles.tab,
|
|
index > 0 && { marginLeft: isActive ? -10 : 0 },
|
|
isActive && { zIndex: 10 },
|
|
pressed && !isActive && { opacity: 0.6 },
|
|
pressed && isActive && { transform: [{ scale: 0.98 }] }
|
|
]}
|
|
>
|
|
{isActive && <ActiveTabBackground />}
|
|
|
|
<Animated.Text
|
|
layout={Layout.springify().damping(15)}
|
|
style={[
|
|
styles.tabText,
|
|
isActive ? styles.activeText : [styles.inactiveText, { color: theme.colors.textSecondary }],
|
|
]}
|
|
>
|
|
{role}
|
|
</Animated.Text>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-end',
|
|
marginBottom: -1,
|
|
zIndex: 10,
|
|
marginLeft: 0,
|
|
},
|
|
tab: {
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: 38,
|
|
width: 110,
|
|
},
|
|
tabText: {
|
|
fontSize: 14,
|
|
fontWeight: '700',
|
|
zIndex: 2,
|
|
transform: [{ translateX: -4 }],
|
|
},
|
|
activeText: {
|
|
color: '#FFFFFF',
|
|
},
|
|
inactiveText: {
|
|
fontWeight: '600',
|
|
},
|
|
});
|