142 lines
4.0 KiB
TypeScript
142 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import {StyleSheet, Pressable, Text, View} from 'react-native';
|
|
import Colors from '../../assets/styles/Colors';
|
|
import FontFamily from '../../assets/styles/FontFamily';
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
|
|
const StepIndicator = ({
|
|
currentStep,
|
|
totalSteps,
|
|
completedSteps,
|
|
onStepPress,
|
|
validationStatus,
|
|
}: any) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
{[...Array(totalSteps)].map((_, index) => {
|
|
const stepNumber = index + 1;
|
|
const isCompleted = completedSteps.includes(stepNumber);
|
|
const isCurrent = currentStep === stepNumber;
|
|
const stepStatus = validationStatus[stepNumber];
|
|
|
|
const backgroundColorStyle =
|
|
stepStatus === 'completed'
|
|
? Colors.indicatorGreen.color
|
|
: stepStatus === 'invalid'
|
|
? Colors.indicatorOrange.color
|
|
: Colors.neutral100.color;
|
|
|
|
const indicatorLineBackgroundColorStyle = isCompleted
|
|
? Colors.secondary30.color
|
|
: Colors.neutral100.color;
|
|
|
|
const borderColorStyle =
|
|
stepStatus === 'completed'
|
|
? Colors.indicatorGreen.color
|
|
: stepStatus === 'invalid'
|
|
? Colors.indicatorOrange.color
|
|
: isCurrent
|
|
? Colors.secondary30.color
|
|
: Colors.neutral100.color;
|
|
|
|
const textColorStyle =
|
|
isCompleted || stepStatus === 'invalid'
|
|
? Colors.neutral100.color
|
|
: isCurrent
|
|
? Colors.secondary30.color
|
|
: Colors.secondary50.color;
|
|
|
|
const textStyle = isCompleted
|
|
? FontFamily.notoSansBold
|
|
: isCurrent
|
|
? FontFamily.notoSansSemiBold
|
|
: FontFamily.notoSansRegular;
|
|
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<Pressable
|
|
onPress={() => onStepPress?.(stepNumber)}
|
|
style={({pressed}) => ({
|
|
transform: [{scale: pressed ? 0.97 : 1}],
|
|
})}>
|
|
<View style={{alignItems: 'center'}}>
|
|
<View
|
|
style={[
|
|
styles.stepIndicatorContainer,
|
|
{
|
|
backgroundColor: backgroundColorStyle,
|
|
borderColor: borderColorStyle,
|
|
},
|
|
]}>
|
|
{stepStatus === 'completed' ? (
|
|
<Icon
|
|
name="check"
|
|
color={Colors.neutral100.color}
|
|
size={16}
|
|
/>
|
|
) : stepStatus === 'invalid' ? (
|
|
<Icon
|
|
name="alert-circle"
|
|
color={Colors.neutral100.color}
|
|
size={16}
|
|
/>
|
|
) : (
|
|
<Text
|
|
style={{
|
|
includeFontPadding: false,
|
|
fontSize: 12,
|
|
color: textColorStyle,
|
|
...textStyle,
|
|
}}>
|
|
{stepNumber}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</Pressable>
|
|
|
|
{index < totalSteps - 1 && (
|
|
<View
|
|
style={[
|
|
styles.stepIndicatorLine,
|
|
{
|
|
backgroundColor: indicatorLineBackgroundColorStyle,
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
padding: 16,
|
|
backgroundColor: Colors.secondary70.color,
|
|
},
|
|
stepIndicatorContainer: {
|
|
width: 30,
|
|
height: 30,
|
|
borderRadius: 15,
|
|
borderWidth: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
stepIndicatorText: {
|
|
includeFontPadding: false,
|
|
fontSize: 14,
|
|
},
|
|
stepIndicatorLine: {
|
|
flex: 1,
|
|
height: 2,
|
|
},
|
|
});
|
|
|
|
export default StepIndicator;
|