ilink-world/app/components/StepHeaderComponent.js

/**
 * Project iLinkWorld
 * File StepHeaderComponent
 * Path components
 * Created by BRICE ZELE
 * Date: 11/11/2021
 */
/**
 * Project yoolearn-mobile
 * File StepHeader
 * Path app/components
 * Created by BRICE ZELE
 * Date: 17/10/2021
 */
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Color} from "../config/Color";
import Text from './Text';

const Circle = ({index, selectedIndex}) => {
    return (
        <View
            style={
                index === selectedIndex
                    ? {
                        ...styles.circle,
                        backgroundColor: Color.whiteColor,
                        borderColor: Color.primaryColor,
                    }
                    : {
                        ...styles.circle,
                        backgroundColor: Color.primaryColor,
                        borderColor: Color.primaryColor,
                    }
            }>
            <Text
                style={
                    index === selectedIndex
                        ? styles.selectedcircleTitle
                        : styles.circleTitle
                }>
                {index}
            </Text>
        </View>
    );
};

const StepHeader = props => {
    const MAX_NUMBER_LINES = 2;
    const {steps, currentStepIndex} = props;
    return (
        <View style={styles.container}>
            {steps.map((step, index) => (
                <View key={index} style={styles.stepContainer}>
                    <Circle selectedIndex={currentStepIndex} index={++index}/>
                    <Text
                        numberOfLines={MAX_NUMBER_LINES}
                        ellipsizeMode="tail"
                        style={styles.titleCircle}>
                        {step.title}
                    </Text>
                </View>
            ))}
            <View style={[styles.line, {borderBottomColor: Color.primaryColor}]}/>
        </View>
    );
};

export default StepHeader;

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%',
    },
    stepContainer: {
        flexDirection: 'column',
        padding: 10,
        alignItems: 'center',
        justifyContent: 'center',
    },
    titleCircle: {
        marginTop: 10,
        fontSize: 12,
        paddingBottom: 10,
    },
    line: {
        borderBottomWidth: 1,
        justifyContent: 'center',
        width: '80%',
        position: 'absolute',
        top: 35,
        zIndex: 1,
        marginHorizontal: 20,
    },
    circle: {
        borderWidth: 1,
        borderRadius: 50,
        width: 30,
        height: 30,
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 10,
        zIndex: 10,
    },
    circleTitle: {
        fontSize: 12,
        color: '#fff',
    },
    selectedcircleTitle: {
        fontSize: 12,
        color: '#2E81D3',
    },
});