Revize 006d5d56
Přidáno uživatelem Michal Schwob před více než 1 rok
| App.tsx | ||
|---|---|---|
| 1 | 1 |
import 'react-native-gesture-handler' |
| 2 |
import { NativeBaseProvider } from "native-base"
|
|
| 3 |
import { Provider } from "react-redux"
|
|
| 4 |
import { store, Persistor } from "./src/stores/store"
|
|
| 2 |
import {NativeBaseProvider} from "native-base"
|
|
| 3 |
import {Provider} from "react-redux"
|
|
| 4 |
import {store, Persistor} from "./src/stores/store"
|
|
| 5 | 5 |
import Navigation from "./src/pages/Navigation" |
| 6 |
import { nativeBaseTheme } from "./src/theme/nativeBaseTheme"
|
|
| 7 |
import { PersistGate } from 'redux-persist/integration/react'
|
|
| 6 |
import {nativeBaseTheme} from "./src/theme/nativeBaseTheme"
|
|
| 7 |
import {PersistGate} from 'redux-persist/integration/react'
|
|
| 8 |
import {StatusBar} from "react-native"
|
|
| 8 | 9 |
|
| 9 | 10 |
export default function App() {
|
| 10 | 11 |
return ( |
| 11 | 12 |
<Provider store={ store }>
|
| 12 |
<PersistGate persistor={Persistor}>
|
|
| 13 |
<PersistGate persistor={ Persistor }>
|
|
| 13 | 14 |
<NativeBaseProvider theme={ nativeBaseTheme }>
|
| 15 |
<StatusBar barStyle="dark-content"/> |
|
| 14 | 16 |
<Navigation/> |
| 15 | 17 |
</NativeBaseProvider> |
| 16 | 18 |
</PersistGate> |
| app.json | ||
|---|---|---|
| 5 | 5 |
"version": "1.0.0", |
| 6 | 6 |
"orientation": "portrait", |
| 7 | 7 |
"icon": "./assets/icon.png", |
| 8 |
"userInterfaceStyle": "light",
|
|
| 8 |
"userInterfaceStyle": "dark",
|
|
| 9 | 9 |
"splash": {
|
| 10 | 10 |
"image": "./assets/Rudolf-Aachen-large.png", |
| 11 | 11 |
"resizeMode": "contain", |
| 12 |
"backgroundColor": "#E3A400"
|
|
| 12 |
"backgroundColor": "#654B07"
|
|
| 13 | 13 |
}, |
| 14 | 14 |
"assetBundlePatterns": [ |
| 15 | 15 |
"**/*" |
| ... | ... | |
| 20 | 20 |
"android": {
|
| 21 | 21 |
"adaptiveIcon": {
|
| 22 | 22 |
"foregroundImage": "./assets/icon.png", |
| 23 |
"backgroundColor": "#E3A400"
|
|
| 23 |
"backgroundColor": "#654B07"
|
|
| 24 | 24 |
}, |
| 25 | 25 |
"package": "cz.zcu.kiv.tsp.inventaria_rudolphina" |
| 26 | 26 |
}, |
| src/components/loading/LoadingBox.tsx | ||
|---|---|---|
| 13 | 13 |
<Box width="100%" marginTop="20" height="8"> |
| 14 | 14 |
<HStack alignItems="center" flex="1" justifyContent="center"> |
| 15 | 15 |
<Spinner /> |
| 16 |
<Heading color="primary.400" fontSize="md">
|
|
| 16 |
<Heading color="primary.500" fontSize="md">
|
|
| 17 | 17 |
{text}
|
| 18 | 18 |
</Heading> |
| 19 | 19 |
</HStack> |
| src/components/search/MultiSelect.tsx | ||
|---|---|---|
| 154 | 154 |
data={ filteredData }
|
| 155 | 155 |
renderItem={ ({item}) => (
|
| 156 | 156 |
<Actionsheet.Item |
| 157 |
_pressed={ {bg: "primary.100"} }
|
|
| 157 |
_pressed={ {bg: "secondary.500"} }
|
|
| 158 | 158 |
onPress={ () => updateSelected(item.index) }
|
| 159 | 159 |
key={ item.value }
|
| 160 |
backgroundColor={ isSelected[item.index] ? "primary.100" : {} }
|
|
| 160 |
backgroundColor={ isSelected[item.index] ? "secondary.500" : {} }
|
|
| 161 | 161 |
> |
| 162 | 162 |
{ item.label }
|
| 163 | 163 |
</Actionsheet.Item> |
| ... | ... | |
| 184 | 184 |
</Button> |
| 185 | 185 |
<Button |
| 186 | 186 |
onPress={ onDone }
|
| 187 |
colorScheme={ "primary" }
|
|
| 187 |
colorScheme={ "secondary" }
|
|
| 188 | 188 |
borderRadius={ 10 }
|
| 189 | 189 |
variant={ "subtle" }
|
| 190 | 190 |
startIcon={
|
| src/components/search/SearchForm.tsx | ||
|---|---|---|
| 144 | 144 |
<HStack justifyContent={"space-between"}>
|
| 145 | 145 |
<Button |
| 146 | 146 |
onPress={ () => setIsFilterOpen(!isFilterOpen) }
|
| 147 |
variant="outline" |
|
| 147 |
variant={"solid"}
|
|
| 148 |
colorScheme={ "secondary" }
|
|
| 148 | 149 |
endIcon={
|
| 149 | 150 |
<> |
| 150 | 151 |
{ isFilterOpen ?
|
| ... | ... | |
| 159 | 160 |
p={ 2 }
|
| 160 | 161 |
|
| 161 | 162 |
> |
| 163 |
<Text color={"primary.500"}>
|
|
| 162 | 164 |
Filter |
| 165 |
</Text> |
|
| 163 | 166 |
</Button> |
| 164 | 167 |
{ !isFilterOpen && (
|
| 165 | 168 |
<Button |
| ... | ... | |
| 167 | 170 |
borderRadius={ 10 }
|
| 168 | 171 |
onPress={ () => searchSubmit() }
|
| 169 | 172 |
colorScheme="primary" |
| 170 |
background={ "primary.500" }
|
|
| 171 | 173 |
variant="solid" |
| 172 | 174 |
mt={2}
|
| 173 | 175 |
p={2}
|
| ... | ... | |
| 270 | 272 |
<Button |
| 271 | 273 |
borderRadius={ 10 }
|
| 272 | 274 |
startIcon={
|
| 273 |
<CloseIcon size="xs"/> |
|
| 275 |
<CloseIcon size="xs" color={"primary.500"}/>
|
|
| 274 | 276 |
} |
| 275 | 277 |
onPress={ clearForm }
|
| 276 |
variant="outline" |
|
| 277 |
color="primary.500" |
|
| 278 |
borderColor="primary.500" |
|
| 278 |
colorScheme={"secondary"}
|
|
| 279 |
variant="solid" |
|
| 279 | 280 |
mr={ 2 }
|
| 280 | 281 |
size={ "sm" }
|
| 281 | 282 |
> |
| 282 |
Reset
|
|
| 283 |
<Text color={"primary.500"}>Reset</Text>
|
|
| 283 | 284 |
</Button> |
| 284 | 285 |
<Button |
| 285 | 286 |
isLoading={ loading }
|
| ... | ... | |
| 290 | 291 |
variant="solid" |
| 291 | 292 |
size={ "sm" }
|
| 292 | 293 |
> |
| 293 |
Search
|
|
| 294 |
<Text color={"white"}>Search</Text>
|
|
| 294 | 295 |
</Button> |
| 295 | 296 |
</Box> |
| 296 | 297 |
</> |
| src/pages/HomePage.tsx | ||
|---|---|---|
| 1 |
import { Center, Image, Pressable, ScrollView, Text, useToast } from "native-base"
|
|
| 1 |
import {Box, Center, Image, Pressable, ScrollView, Text, useToast} from "native-base"
|
|
| 2 | 2 |
import { useDispatch, useSelector } from "react-redux"
|
| 3 | 3 |
import { AppDispatch, RootState } from "../stores/store"
|
| 4 | 4 |
import { useContext, useEffect, useState } from "react"
|
| ... | ... | |
| 46 | 46 |
|
| 47 | 47 |
|
| 48 | 48 |
return ( |
| 49 |
<Center m={2} mb={10}>
|
|
| 49 |
<Center m={2} mx={4} mb={20}>
|
|
| 50 | 50 |
{ loading ? (
|
| 51 | 51 |
<LoadingBox text={ "Loading..." }/>
|
| 52 | 52 |
) : ( |
| ... | ... | |
| 56 | 56 |
<Image |
| 57 | 57 |
source={ {uri: HOME_PAGE_IMG_URL} }
|
| 58 | 58 |
w={"100%"} h={ 200 }
|
| 59 |
resizeMode={"contain"}
|
|
| 60 | 59 |
alignSelf={ "center" }
|
| 61 | 60 |
alt={ "Rudolf-Aachen" }
|
| 61 |
rounded={ "lg" }
|
|
| 62 |
my={ 2 }
|
|
| 62 | 63 |
/> |
| 63 | 64 |
{ data && data.length > 0 && (
|
| 64 |
<Text |
|
| 65 |
mx={ 2 }
|
|
| 66 |
fontSize={ "sm" }
|
|
| 67 |
lineHeight={"sm"}
|
|
| 68 |
color={"gray.500"}
|
|
| 69 |
textAlign={"justify"}
|
|
| 70 |
> |
|
| 71 |
{data[0]["general"].text}
|
|
| 65 |
<Box m={2} p={ 3 } bg={"primary.100"} rounded={"lg"}>
|
|
| 66 |
<Text |
|
| 67 |
fontSize={ "sm" }
|
|
| 68 |
lineHeight={"sm"}
|
|
| 69 |
textAlign={"justify"}
|
|
| 70 |
> |
|
| 71 |
{data[0]["general"].text}
|
|
| 72 | 72 |
</Text> |
| 73 |
</Box> |
|
| 73 | 74 |
)} |
| 74 | 75 |
<Text |
| 75 | 76 |
mt={ 2 }
|
| 77 |
ml={ 2 }
|
|
| 78 |
mb={ -2 }
|
|
| 76 | 79 |
bold |
| 77 |
fontSize={"xl"}
|
|
| 80 |
fontSize={"2xl"}
|
|
| 78 | 81 |
color={"primary.500"}
|
| 79 | 82 |
> |
| 80 | 83 |
Inventories |
| ... | ... | |
| 83 | 86 |
<Pressable |
| 84 | 87 |
onPress={() => navigation.navigate("Search", {inventoryId: Object.keys(item)[0]}) }
|
| 85 | 88 |
key={ Object.values(item)[0].label }
|
| 86 |
rounded={ "md" }
|
|
| 87 |
borderWidth={ 1 }
|
|
| 88 |
borderColor={ "gray.300" }
|
|
| 89 |
rounded={ "lg" }
|
|
| 90 |
backgroundColor={ "primary.100" }
|
|
| 89 | 91 |
m = { 2 }
|
| 90 | 92 |
p={ 3 }
|
| 91 | 93 |
> |
| 92 | 94 |
<Text |
| 93 | 95 |
bold |
| 94 | 96 |
fontSize={ "md" }
|
| 97 |
color={"primary.500"}
|
|
| 95 | 98 |
mb={1}
|
| 96 | 99 |
> |
| 97 | 100 |
{ Object.values(item)[0].label }
|
| ... | ... | |
| 99 | 102 |
<Text |
| 100 | 103 |
fontSize={ "sm" }
|
| 101 | 104 |
lineHeight={"sm"}
|
| 102 |
color={"gray.500"}
|
|
| 103 | 105 |
textAlign={"justify"}
|
| 104 | 106 |
> |
| 105 | 107 |
{ Object.values(item)[0].text }
|
| src/pages/Navigation.tsx | ||
|---|---|---|
| 31 | 31 |
<Stack.Navigator initialRouteName="Home" |
| 32 | 32 |
screenOptions={ ({ navigation }) => ( {
|
| 33 | 33 |
headerStyle: {
|
| 34 |
backgroundColor: nativeBaseTheme.colors.primary[800],
|
|
| 34 |
backgroundColor: nativeBaseTheme.colors.primary[50],
|
|
| 35 | 35 |
}, |
| 36 |
headerTintColor: '#fff', |
|
| 37 | 36 |
headerTitleStyle: {
|
| 38 | 37 |
fontWeight: 'bold', |
| 38 |
color: nativeBaseTheme.colors.primary[500], |
|
| 39 | 39 |
}, |
| 40 |
headerTintColor: nativeBaseTheme.colors.primary[500], |
|
| 40 | 41 |
headerRight: () => ( |
| 41 | 42 |
<HStack space={ 0 } alignItems="end" marginRight={-3}>
|
| 42 | 43 |
<IconButton |
| ... | ... | |
| 71 | 72 |
/> |
| 72 | 73 |
</HStack> |
| 73 | 74 |
), |
| 75 |
contentStyle: {
|
|
| 76 |
backgroundColor: nativeBaseTheme.colors.primary[50], |
|
| 77 |
}, |
|
| 74 | 78 |
} ) } |
| 75 | 79 |
> |
| 76 | 80 |
{ loggedIn ? (
|
| src/theme/nativeBaseTheme.ts | ||
|---|---|---|
| 3 | 3 |
export const nativeBaseTheme = extendTheme({
|
| 4 | 4 |
colors: {
|
| 5 | 5 |
primary: {
|
| 6 |
50: '#FFF8E1',
|
|
| 7 |
100: '#FFE082',
|
|
| 8 |
200: '#FFD54F',
|
|
| 9 |
300: '#FFCA28',
|
|
| 10 |
400: '#FFC107',
|
|
| 11 |
500: '#E3A400',
|
|
| 12 |
600: '#C88700',
|
|
| 13 |
700: '#AD6F00',
|
|
| 14 |
800: '#8B5800',
|
|
| 15 |
900: '#5D3A00',
|
|
| 6 |
50: '#FFFFFF',
|
|
| 7 |
100: '#F5F4F1',
|
|
| 8 |
200: '#654B07',
|
|
| 9 |
300: '#654B07',
|
|
| 10 |
400: '#654B07',
|
|
| 11 |
500: '#654B07',
|
|
| 12 |
600: '#654B07',
|
|
| 13 |
700: '#654B07',
|
|
| 14 |
800: '#654B07',
|
|
| 15 |
900: '#654B07',
|
|
| 16 | 16 |
}, |
| 17 |
buttonBackground: 'primary.500' |
|
| 17 |
secondary: {
|
|
| 18 |
50: '#F4DFAB', |
|
| 19 |
100: '#F4DFAB', |
|
| 20 |
200: '#F4DFAB', |
|
| 21 |
300: '#F4DFAB', |
|
| 22 |
400: '#F4DFAB', |
|
| 23 |
500: '#F4DFAB', |
|
| 24 |
600: '#F4DFAB', |
|
| 25 |
700: '#F4DFAB', |
|
| 26 |
800: '#F4DFAB', |
|
| 27 |
900: '#654B07', |
|
| 18 | 28 |
|
| 29 |
}, |
|
| 30 |
buttonBackground: 'secondary.500' |
|
| 19 | 31 |
} |
| 20 | 32 |
}) |
Také k dispozici: Unified diff
NEW: new colors added
re #10847