feat: edit expense

This commit is contained in:
Jakob Stornig 2024-01-05 15:26:09 +01:00
parent deda54152b
commit 5b71fa74b1
11 changed files with 273 additions and 41 deletions

View file

@ -3,35 +3,53 @@ import { ColorValue, StyleSheet, Text, View } from 'react-native';
import { SIZES } from '../../constants/theme';
import CustomCard from "../common/CustomCard";
import { useTheme } from '../../app/contexts/ThemeContext';
import { TouchableOpacity } from 'react-native-gesture-handler';
//export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
interface ExpenseItemProps {
color: ColorValue;
category: string;
title: string;
date: string;
value : string;
guid? : string;
onPress? : (guid?: string) => void
}
export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
export default function ExpenseItem(itemProps : ExpenseItemProps) {
const { colors } = useTheme();
const handlePress = ()=>{
if(itemProps.onPress){
itemProps.onPress(itemProps.guid);
}
}
return (
<CustomCard>
<View style={styles.tile}>
<View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
<View style={[styles.textSection, {backgroundColor: colors.backgroundColor}]}>
<Text style={{
fontSize: SIZES.normal,
color: colors.primaryText
}} numberOfLines={1}>{itemProps.category}</Text>
<Text style={{
fontSize: SIZES.large,
color: colors.primaryText
}} numberOfLines={1}>{itemProps.title}</Text>
<Text style={{
fontSize: SIZES.small,
color: colors.primaryText
}} numberOfLines={1}>{itemProps.date}</Text>
<TouchableOpacity onPress={handlePress}>
<View style={styles.tile}>
<View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
<View style={[styles.textSection, {backgroundColor: colors.backgroundColor}]}>
<Text style={{
fontSize: SIZES.normal,
color: colors.primaryText
}} numberOfLines={1}>{itemProps.category}</Text>
<Text style={{
fontSize: SIZES.large,
color: colors.primaryText
}} numberOfLines={1}>{itemProps.title}</Text>
<Text style={{
fontSize: SIZES.small,
color: colors.primaryText
}} numberOfLines={1}>{itemProps.date}</Text>
</View>
<View style={[styles.valueSection, {backgroundColor: colors.backgroundColor}]}>
<Text style={{
fontSize: SIZES.xxLarge,
color: colors.primaryText
}} numberOfLines={1}>{itemProps.value}</Text>
</View>
</View>
<View style={[styles.valueSection, {backgroundColor: colors.backgroundColor}]}>
<Text style={{
fontSize: SIZES.xxLarge,
color: colors.primaryText
}} numberOfLines={1}>{itemProps.value}</Text>
</View>
</View>
</TouchableOpacity>
</CustomCard>
)