Revize 1054fe09
Přidáno uživatelem Fantič před téměř 2 roky(ů)
| App.tsx | ||
|---|---|---|
| 1 | 1 |
|
| 2 |
import { StyleSheet, Text, View } from 'react-native'
|
|
| 2 |
import { StyleSheet} from 'react-native'
|
|
| 3 | 3 |
import { NativeBaseProvider, Box, Center, VStack } from "native-base"
|
| 4 | 4 |
import { Provider } from "react-redux"
|
| 5 | 5 |
import store from "./src/stores/store" |
| 6 | 6 |
import ItemViewPage from './src/pages/ItemViewPage' |
| 7 |
import LoginPage from './src/pages/LoginPage' |
|
| 8 | 7 |
|
| 9 | 8 |
export default function App() {
|
| 10 | 9 |
return ( |
| ... | ... | |
| 12 | 11 |
<NativeBaseProvider> |
| 13 | 12 |
{/* TODO: remove placeholder pro header / nav */}
|
| 14 | 13 |
<Center w="100%" h="40" rounded="md" background="success.300"/> |
| 15 |
<ItemViewPage itemId={'PrgA-811'} />
|
|
| 14 |
<ItemViewPage itemId={'PrgA-811'} backPressed={() => {console.log("TODO Navigate back from item view")}} />
|
|
| 16 | 15 |
</NativeBaseProvider> |
| 17 | 16 |
</Provider> |
| 18 | 17 |
) |
| src/components/item/ItemTabBar.tsx | ||
|---|---|---|
| 1 |
import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box } from "native-base";
|
|
| 1 |
import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box, Container, VStack, Icon, ArrowBackIcon, ChevronLeftIcon, ChevronRightIcon } from "native-base";
|
|
| 2 | 2 |
import { CertaintyWithColors } from "../../stores/reducers/itemSlice";
|
| 3 | 3 |
import { Concordance } from "../../types/item";
|
| 4 | 4 |
import LoadingBox from "../loading/LoadingBox"; |
| 5 | 5 |
|
| 6 | 6 |
// custom render Tab |
| 7 |
const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: Concordance[], index: number, onIndexChange: any }) => {
|
|
| 7 |
const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: Concordance[], index: number, onIndexChange: any, onBackPressed: any }) => {
|
|
| 8 | 8 |
|
| 9 |
const { concordances, onIndexChange, index } = props
|
|
| 9 |
const { concordances, onIndexChange, index, onBackPressed } = props
|
|
| 10 | 10 |
|
| 11 | 11 |
if (concordances && concordances.length > 0) {
|
| 12 | 12 |
return ( |
| 13 |
<View h="16">
|
|
| 14 |
<ScrollView width="100%" horizontal={true}>
|
|
| 15 |
{props.navigationState.routes.length > 100 ? (
|
|
| 16 |
<HStack>
|
|
| 17 |
{props.navigationState.routes.map((route, i) => {
|
|
| 18 |
return (
|
|
| 19 |
<Button
|
|
| 20 |
size="lg"
|
|
| 21 |
key={i}
|
|
| 22 |
variant={index == i ? "subtle" : "outline"}
|
|
| 23 |
rightIcon={
|
|
| 24 |
<CircleIcon |
|
| 25 |
size="2"
|
|
| 26 |
color={CertaintyWithColors[concordances[i].cert].color}
|
|
| 27 |
/>
|
|
| 28 |
}
|
|
| 29 |
onPress={() => onIndexChange(i)}
|
|
| 30 |
>
|
|
| 31 |
{concordances[i].id}
|
|
| 32 |
</Button>
|
|
| 33 |
);
|
|
| 34 |
})}
|
|
| 13 |
<VStack>
|
|
| 14 |
<HStack h="16" >
|
|
| 15 |
<HStack width="50%">
|
|
| 16 |
<Button variant="link" size="lg" marginLeft={0}
|
|
| 17 |
onPress={onBackPressed}
|
|
| 18 |
leftIcon={<ChevronLeftIcon size="lg" />}>
|
|
| 19 |
Back
|
|
| 20 |
</Button>
|
|
| 21 |
</HStack>
|
|
| 22 |
<HStack width="50%">
|
|
| 23 |
<HStack width="50%">
|
|
| 24 |
|
|
| 25 |
</HStack>
|
|
| 26 |
<HStack marginRight={0}>
|
|
| 27 |
<Button variant="link" size="lg"
|
|
| 28 |
onPress={() => onIndexChange(index-1)}
|
|
| 29 |
leftIcon={<ChevronLeftIcon size="lg" />}>
|
|
| 30 |
</Button>
|
|
| 31 |
<Button variant="link" size="lg"
|
|
| 32 |
onPress={() => onIndexChange(index+1)}
|
|
| 33 |
leftIcon={<ChevronRightIcon size="lg" />}>
|
|
| 34 |
</Button>
|
|
| 35 | 35 |
</HStack> |
| 36 |
) : ( |
|
| 37 |
// One item only |
|
| 38 |
<Pressable size="96" variant="outline" |
|
| 39 |
onPress={() => onIndexChange(0)}
|
|
| 40 |
> |
|
| 41 |
<Box width="100%" background="red.100"> |
|
| 42 |
<Text>{concordances[0].id}</Text>
|
|
| 43 |
<CircleIcon |
|
| 44 |
size="2" |
|
| 45 |
color={CertaintyWithColors[concordances[0].cert].color}
|
|
| 46 |
/> |
|
| 47 |
</Box > |
|
| 48 |
</Pressable> |
|
| 49 |
)} |
|
| 50 |
</ScrollView> |
|
| 51 |
</View> |
|
| 36 |
</HStack> |
|
| 37 |
</HStack> |
|
| 38 |
<View h="12"> |
|
| 39 |
<ScrollView contentContainerStyle={{ flexGrow: 1 }} flex="1" horizontal={true}>
|
|
| 40 |
{props.navigationState.routes.length > 1 ? (
|
|
| 41 |
<HStack> |
|
| 42 |
{props.navigationState.routes.map((route, i) => {
|
|
| 43 |
return ( |
|
| 44 |
<Button |
|
| 45 |
size="lg" |
|
| 46 |
key={i}
|
|
| 47 |
variant={index == i ? "subtle" : "outline"}
|
|
| 48 |
rightIcon={
|
|
| 49 |
<CircleIcon |
|
| 50 |
size="2" |
|
| 51 |
color={CertaintyWithColors[concordances[i].cert].color}
|
|
| 52 |
/> |
|
| 53 |
} |
|
| 54 |
onPress={() => { if (index != i) { onIndexChange(i) } }}
|
|
| 55 |
> |
|
| 56 |
{concordances[i].id}
|
|
| 57 |
</Button> |
|
| 58 |
); |
|
| 59 |
})} |
|
| 60 |
</HStack> |
|
| 61 |
) : ( |
|
| 62 |
// One item only |
|
| 63 |
<Button |
|
| 64 |
flex="1" |
|
| 65 |
variant={"outline"}
|
|
| 66 |
size="md" |
|
| 67 |
rightIcon={
|
|
| 68 |
<ChevronLeftIcon |
|
| 69 |
size="2" |
|
| 70 |
color={CertaintyWithColors[concordances[0].cert].color}
|
|
| 71 |
/> |
|
| 72 |
} |
|
| 73 |
> |
|
| 74 |
{concordances[0].id}
|
|
| 75 |
</Button> |
|
| 76 |
)} |
|
| 77 |
</ScrollView> |
|
| 78 |
</View> |
|
| 79 |
</VStack> |
|
| 80 |
|
|
| 52 | 81 |
); |
| 53 | 82 |
} |
| 54 | 83 |
else {
|
| src/pages/ItemViewPage.tsx | ||
|---|---|---|
| 1 |
import React, { ReactNode, useEffect } from "react"
|
|
| 1 |
import React, { useEffect } from "react"
|
|
| 2 | 2 |
import { useDispatch, useSelector } from "react-redux"
|
| 3 | 3 |
import { AppDispatch, RootState } from "../stores/store"
|
| 4 | 4 |
import { getItem, getItemNotes, setConcordances } from "../stores/actions/itemThunks"
|
| 5 | 5 |
import { login } from "../stores/actions/userThunks"
|
| 6 |
import { NavigationState, SceneMap, SceneRendererProps, TabBar, TabView } from "react-native-tab-view"
|
|
| 6 |
import { TabView } from "react-native-tab-view"
|
|
| 7 | 7 |
import ItemView from "../components/item/ItemView" |
| 8 |
import { Button, Pressable, View, Text, Icon, CircleIcon, ScrollView, HStack, VStack } from "native-base"
|
|
| 9 | 8 |
import { useWindowDimensions } from "react-native"
|
| 10 | 9 |
import LoadingBox from "../components/loading/LoadingBox" |
| 11 |
import { CertaintyWithColors } from "../stores/reducers/itemSlice"
|
|
| 12 | 10 |
import ItemTabBar from "../components/item/ItemTabBar" |
| 13 | 11 |
|
| 14 | 12 |
|
| 15 | 13 |
interface ItemViewProps {
|
| 16 |
itemId: string |
|
| 14 |
itemId: string, |
|
| 15 |
backPressed: any |
|
| 17 | 16 |
} |
| 18 | 17 |
|
| 19 | 18 |
|
| ... | ... | |
| 78 | 77 |
}, [item]); |
| 79 | 78 |
|
| 80 | 79 |
const handleIndexChanged = (index: number) => {
|
| 81 |
console.log("index changed");
|
|
| 82 |
setIndex(index); |
|
| 83 |
if (concordances && concordances.length > 0) {
|
|
| 84 |
dispatch(getItem(concordances[index].id)); |
|
| 80 |
if(index > 0 && index < concordances.length){
|
|
| 81 |
setIndex(index); |
|
| 82 |
if (concordances && concordances.length > 0) {
|
|
| 83 |
dispatch(getItem(concordances[index].id)); |
|
| 84 |
} |
|
| 85 | 85 |
} |
| 86 | 86 |
} |
| 87 | 87 |
|
| ... | ... | |
| 96 | 96 |
}, |
| 97 | 97 |
concordances: concordances, |
| 98 | 98 |
index: index, |
| 99 |
onIndexChange: handleIndexChanged |
|
| 99 |
onIndexChange: handleIndexChanged, |
|
| 100 |
onBackPressed: props.backPressed, |
|
| 100 | 101 |
})} |
| 101 | 102 |
|
| 102 | 103 |
navigationState={{ index, routes }}
|
| 103 | 104 |
renderScene={() => <ItemView item={item} notes={notes} itemLoading={itemLoading} notesLoading={notesLoading} />}
|
| 104 | 105 |
|
| 105 | 106 |
initialLayout={{ width: layout.width }}
|
| 106 |
// prevent default action on index change |
|
| 107 | 107 |
onIndexChange={handleIndexChanged}
|
| 108 |
|
|
| 109 | 108 |
/> |
| 110 | 109 |
); |
| 111 | 110 |
} |
Také k dispozici: Unified diff
re #10454: ItemView: TabBar once concordance fix, back button