rawalcher/interaktive-systeme
Archived
1
0
Fork 0
Code Issues 5 Pull requests 2 Projects Releases 14 Packages Wiki Activity Actions

feat: edit expense

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

16
components/common/AutoDecimalInput.tsx
View file

@ -1,5 +1,5 @@
import { View, Text, TouchableOpacity, TextInput, StyleSheet, NativeSyntheticEvent, TextInputKeyPressEventData } from 'react-native'
import React, {LegacyRef, MutableRefObject, useRef, useState} from 'react'
import React, {LegacyRef, MutableRefObject, useEffect, useRef, useState} from 'react'
import { SIZES } from '../../constants/theme';
import { useTheme } from '../../app/contexts/ThemeContext';
@ -19,13 +19,21 @@ const formatDecimal = (value: string)=>{
interface AutoDecimalInputProps{
onValueChange?: (formattedValue: string) => void | undefined
label: string,
initialValue? : number
}
const AutoDecimalInput: React.FC<AutoDecimalInputProps> = ({onValueChange, label}) => {
const AutoDecimalInput: React.FC<AutoDecimalInputProps> = ({onValueChange, label, initialValue}) => {
const { colors } = useTheme();
const inputRef = useRef<TextInput>(null);
const [pressedNumbers, setPressedNumbers] = useState<string>("");
const init = () => {
if(initialValue){
const pressedNumber = initialValue.toFixed(2).replace(".", "")
update(pressedNumber);
}
}
const update = (newValues : string) => {
if(onValueChange){
onValueChange(formatDecimal(newValues))
@ -33,6 +41,10 @@ const AutoDecimalInput: React.FC<AutoDecimalInputProps> = ({onValueChange, label
setPressedNumbers(newValues);
}
useEffect(() => {
init()
}, [initialValue])
const handleInput = (e: NativeSyntheticEvent<TextInputKeyPressEventData>)=>{
const pressedKey:string = e.nativeEvent.key
if(Number.isInteger(Number.parseInt(pressedKey))){

7
components/common/TextInputBar.tsx
View file

@ -7,14 +7,13 @@ import { useTheme } from '../../app/contexts/ThemeContext';
interface SearchBarProps extends ViewProps {
placeholder? : string;
onChangeText? : (text: string) => void | undefined
value?: string
}
export default function TextInputBar(props: SearchBarProps) {
const [isActive, setIsactive] = React.useState(false);
const { colors } = useTheme();
const [text, setText] = useState<string>("");
const textColor = colors
const backgroundColor = colors.elementDefaultColor;
const handleChange = (text:string) : void => {
@ -30,7 +29,7 @@ export default function TextInputBar(props: SearchBarProps) {
if(props.onChangeText){
props.onChangeText(text)
}
setText(text)
}
// cant apply the background color otherwise
@ -43,7 +42,7 @@ export default function TextInputBar(props: SearchBarProps) {
// changed styles.container to containerStyle
return (
<View style={[containerStyle, props.style]}>
<TextInput placeholderTextColor={colors.secondaryText} onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%", color:colors.primaryText}, styles.TextInput]} autoCorrect={false} keyboardType='default' placeholder={props.placeholder} value={text} onFocus={()=>handleChange(text)} onEndEditing={()=>setIsactive(false)}/>
<TextInput placeholderTextColor={colors.secondaryText} onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%", color:colors.primaryText}, styles.TextInput]} autoCorrect={false} keyboardType='default' placeholder={props.placeholder} value={props.value} onEndEditing={()=>setIsactive(false)}/>
{isActive &&
<TouchableOpacity style={styles.cancel} onPress={()=>{handleChange("")}}>

64
components/home/expenseItem.tsx
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>
)