Revize f4af30c8
Přidáno uživatelem Fantič před více než 1 rok
| src/components/item/ItemTabBar.tsx | ||
|---|---|---|
| 1 |
import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box, Container, VStack, Icon, ArrowBackIcon, ChevronLeftIcon, ChevronRightIcon, useToast } from "native-base";
|
|
| 1 |
import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box, Container, VStack, Icon, ArrowBackIcon, ChevronLeftIcon, ChevronRightIcon, useToast, Divider } from "native-base";
|
|
| 2 | 2 |
import { CertaintyWithColors } from "../../stores/reducers/itemSlice";
|
| 3 | 3 |
import { Certainty, Concordance } from "../../types/item";
|
| 4 | 4 |
import LoadingBox from "../loading/LoadingBox"; |
| ... | ... | |
| 7 | 7 |
import { InfoToast } from "../toast/InfoToast";
|
| 8 | 8 |
|
| 9 | 9 |
// custom render Tab |
| 10 |
const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: Concordance[], index: number, onIndexChange: any, onBackPressed: any, navigation: DrawerNavigationProp<RootStackParamList, "Item", undefined>, nextItem?: string | boolean, prevItem?:string | boolean }) => {
|
|
| 10 |
const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: Concordance[], index: number, onIndexChange: any, onBackPressed: any, navigation: DrawerNavigationProp<RootStackParamList, "Item", undefined>, nextItem?: string | boolean, prevItem?: string | boolean }) => {
|
|
| 11 | 11 |
|
| 12 | 12 |
const { concordances, onIndexChange, index, onBackPressed, nextItem, prevItem } = props
|
| 13 | 13 |
|
| 14 | 14 |
const toast = useToast(); |
| 15 | 15 |
|
| 16 |
console.log(concordances) |
|
| 17 |
|
|
| 16 | 18 |
if (concordances && concordances.length > 0) {
|
| 17 | 19 |
return ( |
| 18 | 20 |
<VStack> |
| 19 |
<HStack h="16" > |
|
| 21 |
{/* <HStack h="16" >
|
|
| 20 | 22 |
<HStack width="50%"> |
| 21 | 23 |
<Button variant="ghost" size="lg" marginLeft={0}
|
| 22 | 24 |
onPress={onBackPressed}
|
| ... | ... | |
| 69 | 71 |
</Button> |
| 70 | 72 |
</HStack> |
| 71 | 73 |
</HStack> |
| 72 |
</HStack> |
|
| 73 |
<View h="8">
|
|
| 74 |
</HStack> */}
|
|
| 75 |
<View height={16} backgroundColor={"#F5F4F1"}>
|
|
| 74 | 76 |
<ScrollView contentContainerStyle={{ flexGrow: 1 }} flex="1" horizontal={true}>
|
| 75 | 77 |
{props.navigationState.routes.length > 1 ? (
|
| 76 | 78 |
<HStack borderBottomWidth={1} flex="1" borderColor="light.400">
|
| 77 | 79 |
{props.navigationState.routes.map((route, i) => {
|
| 78 | 80 |
return ( |
| 79 |
<Pressable key={i} onPress={() => { onIndexChange(i) }}>
|
|
| 80 |
<HStack alignItems={"center"} width="32" borderColor="light.400" height="100%" borderBottomWidth={i == index ? 2 : 0}>
|
|
| 81 |
<Pressable onPress={() => { onIndexChange(i) }} width="100%">
|
|
| 82 |
<VStack alignItems={"center"} >
|
|
| 83 |
<HStack alignItems={"center"} width={32}>
|
|
| 81 | 84 |
<CircleIcon |
| 82 |
marginLeft="5" |
|
| 83 | 85 |
size="2" |
| 84 | 86 |
color={CertaintyWithColors[concordances[i]?.cert ?? Certainty.Unknown].color}
|
| 85 | 87 |
/> |
| 86 |
<Text marginLeft="5%"> |
|
| 87 |
{i == index ? <Text bold>{concordances[i]?.id}</Text> : concordances[i]?.id}
|
|
| 88 |
|
|
| 88 |
<Text marginLeft={1}>
|
|
| 89 |
<Text bold>{concordances[i]?.id}</Text>
|
|
| 89 | 90 |
</Text> |
| 90 | 91 |
</HStack> |
| 91 |
</Pressable> |
|
| 92 |
{i == index && <Divider color="primary" borderWidth={1} width={30} mt={2} />}
|
|
| 93 |
</VStack> |
|
| 94 |
|
|
| 95 |
</Pressable> |
|
| 92 | 96 |
); |
| 93 | 97 |
})} |
| 94 | 98 |
</HStack> |
| 95 | 99 |
) : ( |
| 96 | 100 |
// One item only |
| 101 |
|
|
| 102 |
|
|
| 97 | 103 |
<Pressable onPress={() => { onIndexChange(0) }} width="100%">
|
| 98 |
<HStack alignItems={"center"} width="100%" borderColor="light.400" height="100%" borderBottomWidth={2}>
|
|
| 99 |
<CircleIcon |
|
| 100 |
marginLeft="42%" |
|
| 101 |
size="2" |
|
| 102 |
color={CertaintyWithColors[concordances[0]?.cert ?? Certainty.Unknown].color}
|
|
| 103 |
/> |
|
| 104 |
<Text marginLeft="2%"> |
|
| 105 |
<Text bold>{concordances[0]?.id}</Text>
|
|
| 106 |
</Text> |
|
| 107 |
</HStack> |
|
| 108 |
</Pressable> |
|
| 104 |
<VStack alignItems={"center"} >
|
|
| 105 |
<HStack alignItems={"center"} width="100%">
|
|
| 106 |
<CircleIcon |
|
| 107 |
size="2" |
|
| 108 |
color={CertaintyWithColors[concordances[0]?.cert ?? Certainty.Unknown].color}
|
|
| 109 |
/> |
|
| 110 |
<Text marginLeft={1}>
|
|
| 111 |
<Text bold>{concordances[0]?.id}</Text>
|
|
| 112 |
</Text> |
|
| 113 |
</HStack> |
|
| 114 |
<Divider color="primary" borderWidth={1} width={30} mt={2} />
|
|
| 115 |
</VStack> |
|
| 116 |
|
|
| 117 |
</Pressable> |
|
| 109 | 118 |
)} |
| 110 | 119 |
</ScrollView> |
| 111 | 120 |
</View> |
Také k dispozici: Unified diff
re #10895: ItemView redesign, refactor