Major refactoring: navigation does not break anymore. the user can now navigate between the tabs without loosing context
This commit is contained in:
Jakob Stornig
parent
457b098883
commit
1beee68bff
23 changed files with 137 additions and 80 deletions
|
|
@ -1,60 +0,0 @@
|
|||
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
|
||||
import React, { useState } from 'react'
|
||||
import { useTheme } from '../../../app/contexts/ThemeContext'
|
||||
import { SIZES } from '../../../constants/theme';
|
||||
import { Category } from '../../../types/dbItems';
|
||||
import CategorySelectorModal from './CategorySelectorModal';
|
||||
|
||||
interface CategorySelectorProps {
|
||||
onPress? : () => void | undefined;
|
||||
selectedCategory? : Category;
|
||||
}
|
||||
|
||||
const CategorySelector: React.FC<CategorySelectorProps> = (props : CategorySelectorProps) => {
|
||||
const {colors} = useTheme();
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<TouchableOpacity style={[styles.tile, {backgroundColor: colors.backgroundColor}]} onPress={props.onPress}>
|
||||
<View style={[styles.colorTip, {backgroundColor: props.selectedCategory?.color}]}>
|
||||
|
||||
</View>
|
||||
<View style={[styles.textWrapper]}>
|
||||
<Text style={[styles.text, {color: colors.primaryText}]}>{props.selectedCategory?.name ?? "Tap to select Categroy"}</Text>
|
||||
</View>
|
||||
<View style={styles.tileTail}></View>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default CategorySelector
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
tile: {
|
||||
height: 60,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
borderRadius: 20
|
||||
},
|
||||
colorTip:{
|
||||
height: "100%",
|
||||
width: 30,
|
||||
borderTopLeftRadius:20,
|
||||
borderBottomLeftRadius: 20
|
||||
},
|
||||
textWrapper: {
|
||||
|
||||
},
|
||||
tileTail:{
|
||||
height: "100%",
|
||||
width: 30,
|
||||
borderTopRightRadius:20,
|
||||
borderBottomRightRadius: 20
|
||||
},
|
||||
text: {
|
||||
fontSize: SIZES.large,
|
||||
}
|
||||
})
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
import { Modal, NativeSyntheticEvent, StyleSheet, Text, View, FlatList } from 'react-native'
|
||||
import React, { useEffect, useMemo, useState } from 'react'
|
||||
import { Category } from '../../../types/dbItems';
|
||||
import { useTheme } from '../../../app/contexts/ThemeContext';
|
||||
import CategoryListItem from '../../common/CategoryListItem';
|
||||
import { SIZES } from '../../../constants/theme';
|
||||
import useFetch from '../../../hooks/useFetch';
|
||||
import TextInputBar from '../../common/TextInputBar';
|
||||
|
||||
|
||||
interface CategorySelectorModalProps{
|
||||
visible: boolean;
|
||||
onCategoryTap?: (category : Category) => void | undefined;
|
||||
selectMulitple?: boolean;
|
||||
onRequestClose?: ((event: NativeSyntheticEvent<any>) => void) | undefined;
|
||||
}
|
||||
|
||||
//TODO: select Multiple
|
||||
|
||||
const CategorySelectorModal: React.FC<CategorySelectorModalProps> = (props : CategorySelectorModalProps) => {
|
||||
const {visible, onCategoryTap, selectMulitple} = props;
|
||||
const {data, reFetch} = useFetch({sql: "SELECT * FROM category;", args:[]});
|
||||
const {colors} = useTheme();
|
||||
const [searchtext, setSearchtext] = useState<string>("");
|
||||
|
||||
const handleSearchText = (text : string) => {
|
||||
setSearchtext(text);
|
||||
}
|
||||
|
||||
const categories = useMemo<Category[]>(()=>{
|
||||
return data.map((elem) => {
|
||||
return {name: elem["name"], color: elem["color"], guid: elem["guid"]}
|
||||
})
|
||||
}, [data])
|
||||
|
||||
const filteredCategories = categories.filter((category) => category.name?.toLowerCase().includes(searchtext.toLowerCase()))
|
||||
|
||||
useEffect(()=>{
|
||||
if(visible){
|
||||
//reFetch(); Uncomment if newly added categories do not appear
|
||||
handleSearchText("");
|
||||
}
|
||||
}, [visible])
|
||||
|
||||
return (
|
||||
<Modal visible={visible} transparent={true} onRequestClose={props.onRequestClose}>
|
||||
<View style={styles.main}>
|
||||
<View style={[styles.modal, {backgroundColor: colors.containerColor}]}>
|
||||
<View>
|
||||
<Text style={[styles.heading, {color: colors.primaryText}]}>{selectMulitple ? "Categories" : "Category"}</Text>
|
||||
</View>
|
||||
<TextInputBar placeholder='TypeToSearch' value={searchtext} onChangeText={handleSearchText} style={{marginBottom: 10}}></TextInputBar>
|
||||
<FlatList
|
||||
data={filteredCategories}
|
||||
keyExtractor={(item) => item.guid!}
|
||||
renderItem={({item})=> <CategoryListItem category={item} onPress={onCategoryTap}/>}
|
||||
ItemSeparatorComponent={() => <View style={styles.itemSeperatorStyle}/>}
|
||||
ListFooterComponent={() => <View style={styles.itemSeperatorStyle}/>}
|
||||
keyboardShouldPersistTaps="always"
|
||||
>
|
||||
</FlatList>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default CategorySelectorModal
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
main: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
},
|
||||
modal: {
|
||||
height: "70%",
|
||||
width: "90%",
|
||||
top: "10%",
|
||||
borderRadius: 30,
|
||||
paddingVertical: 20,
|
||||
paddingHorizontal: 20
|
||||
},
|
||||
heading: {
|
||||
fontSize: SIZES.xlarge,
|
||||
fontWeight: "bold"
|
||||
},
|
||||
itemSeperatorStyle: {
|
||||
paddingBottom: 10
|
||||
}
|
||||
})
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { View, Text, StyleSheet, TouchableOpacity, TouchableOpacityProps } from 'react-native'
|
||||
import React, { useState } from 'react'
|
||||
import { useTheme } from '../../../app/contexts/ThemeContext';
|
||||
import { SIZES } from '../../../constants/theme';
|
||||
import { SimpleDate } from '../../../util/SimpleDate';
|
||||
import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
|
||||
|
||||
interface DateSelectorProps extends ViewProps {
|
||||
onPress?: ()=>void | undefined;
|
||||
selectedDate: Date
|
||||
}
|
||||
|
||||
const DateSelectorButton:React.FC<DateSelectorProps> = (props: DateSelectorProps) => {
|
||||
const {onPress, selectedDate, ...restProps} = props;
|
||||
const {colors} = useTheme();
|
||||
|
||||
return (
|
||||
<TouchableOpacity onPress={onPress} {...restProps} style={[styles.inputContainer, {backgroundColor: colors.elementDefaultColor}]}>
|
||||
<Text style={[styles.text, {color: colors.primaryText}]}>Date:</Text>
|
||||
<Text style={[styles.text, {color: colors.primaryText}]}>{new SimpleDate(selectedDate).format("DD.MM.YYYY")}</Text>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
const styles = StyleSheet.create({
|
||||
inputContainer: {
|
||||
minHeight: 50,
|
||||
borderRadius: 20,
|
||||
flexDirection: "row",
|
||||
justifyContent: 'space-between',
|
||||
alignItems: "center"
|
||||
},
|
||||
text:{
|
||||
fontSize: SIZES.large,
|
||||
marginHorizontal: 15,
|
||||
},
|
||||
})
|
||||
|
||||
export default DateSelectorButton
|
||||
Reference in a new issue