aswi2023one-team-to-rule-them-all-gitlab/src/components/item/ItemTabBar.tsx @ 3218402b

import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box, Container, VStack, Icon, ArrowBackIcon, ChevronLeftIcon, ChevronRightIcon } from "native-base";
import { CertaintyWithColors } from "../../stores/reducers/itemSlice";
import { Concordance } from "../../types/item";
import LoadingBox from "../loading/LoadingBox";

// custom render Tab
const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: Concordance[], index: number, onIndexChange: any, onBackPressed: any }) => {

    const { concordances, onIndexChange, index, onBackPressed } = props

    if (concordances && concordances.length > 0) {
        return (
            <VStack>
                <HStack h="16" >
                    <HStack width="50%">
                        <Button variant="ghost" size="lg" marginLeft={0}
                            onPress={onBackPressed}
                            leftIcon={<ChevronLeftIcon size="lg" />}>
                            Back
                        </Button>
                    </HStack>
                    <HStack width="50%">
                        <HStack width="50%">

                        </HStack>
                        <HStack marginRight={0}>
                            <Button variant="ghost" size="lg"
                                onPress={() => onIndexChange(index - 1)}
                                leftIcon={<ChevronLeftIcon size="lg" />}>
                            </Button>
                            <Button variant="ghost" size="lg"
                                onPress={() => onIndexChange(index + 1)}
                                leftIcon={<ChevronRightIcon size="lg" />}>
                            </Button>
                        </HStack>
                    </HStack>
                </HStack>
                <View h="8">
                    <ScrollView contentContainerStyle={{ flexGrow: 1 }} flex="1" horizontal={true}>
                        {props.navigationState.routes.length > 1 ? (
                            <HStack borderBottomWidth={1} flex="1" borderColor="light.400">
                                {props.navigationState.routes.map((route, i) => {
                                    return (
                                        <Pressable key={i} onPress={() => { onIndexChange(i) }}>
                                            <HStack alignItems={"center"} width="32" borderColor="light.400" height="100%" borderBottomWidth={i == index ? 2 : 0}>
                                                <CircleIcon
                                                    marginLeft="20%"
                                                    size="2"
                                                    color={CertaintyWithColors[concordances[i].cert].color}
                                                />
                                                <Text marginLeft="5%">
                                                    {i == index ? <Text bold>{concordances[i].id}</Text> : concordances[i].id}

                                                </Text>
                                            </HStack>
                                        </Pressable>
                                    );
                                })}
                            </HStack>
                        ) : (
                            // One item only
                            <Pressable onPress={() => { onIndexChange(0) }} width="100%">
                                            <HStack alignItems={"center"} width="100%" borderColor="light.400" height="100%" borderBottomWidth={2}>
                                                <CircleIcon
                                                    marginLeft="42%"
                                                    size="2"
                                                    color={CertaintyWithColors[concordances[0].cert].color}
                                                />
                                                <Text marginLeft="2%">
                                                    <Text bold>{concordances[0].id}</Text>
                                                </Text>
                                            </HStack>
                                        </Pressable>
                        )}
                    </ScrollView>
                </View>
            </VStack>

        );
    }
    else {
        return <LoadingBox text={`Loading concordances...`}></LoadingBox>
    }
};

export default ItemTabBar