8149ec234f
Auto fill amount category edit Empty list component calendar filtering in category screen, expenses can be added directly
95 lines
No EOL
3.1 KiB
TypeScript
95 lines
No EOL
3.1 KiB
TypeScript
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';
|
|
import EmptyListCompenent from '../common/EmptyListCompenent';
|
|
|
|
|
|
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} animationType='slide'>
|
|
<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"
|
|
ListEmptyComponent={EmptyListCompenent}
|
|
>
|
|
</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
|
|
}
|
|
}) |