From 93d16fc08a3fa13c869a469c54a1e2d9c4bf17bc Mon Sep 17 00:00:00 2001 From: Jakob Stornig Date: Tue, 2 Jan 2024 18:23:57 +0100 Subject: [PATCH] feat: amountField --- app/(tabs)/_layout.tsx | 1 + app/(tabs)/home/_layout.tsx | 4 +- app/(tabs)/home/addItem.tsx | 28 ++++++-- app/(tabs)/home/index.tsx | 16 ++--- components/common/AutoDecimalInput.tsx | 97 ++++++++++++++++++++++++++ components/index.tsx | 5 +- 6 files changed, 134 insertions(+), 17 deletions(-) create mode 100644 components/common/AutoDecimalInput.tsx diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 4eb7245..79ff582 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -25,6 +25,7 @@ export default function Layout() { tabBarInactiveTintColor: colors.tabIconDefault, headerShown: false, tabBarStyle: styles.tabBar, + tabBarHideOnKeyboard: true } if(!authState?.authenticated){ diff --git a/app/(tabs)/home/_layout.tsx b/app/(tabs)/home/_layout.tsx index f6c2a2b..42d452e 100644 --- a/app/(tabs)/home/_layout.tsx +++ b/app/(tabs)/home/_layout.tsx @@ -24,7 +24,9 @@ export default function _Layout() { title: "test", headerShown: false, }}/> - + (""); + const [formatedValue, setFormatedValue] = useState(""); + + const handleValueChange = (formatedValue: string) => { + setFormatedValue(formatedValue); + } + console.log(formatedValue) return ( - - addItem + + ) -} \ No newline at end of file +} + +const styles = StyleSheet.create({ + container: { + margin: SIZES.normal, + } +}) \ No newline at end of file diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx index eaa0b22..edd6794 100644 --- a/app/(tabs)/home/index.tsx +++ b/app/(tabs)/home/index.tsx @@ -74,15 +74,15 @@ export default function Page() { return ( {plusShow && { - // router.push("/(tabs)/home/addItem"); + router.push("/(tabs)/home/addItem"); - executeQuery({sql: "SELECT guid FROM category", args: []}).then((result) => { - if("rows" in result[0]) { - newExpense("Test Title", result[0]["rows"][0]["guid"], "69.69.1234", 100).then(() => { - reFetch(); - }); - } - }) + // executeQuery({sql: "SELECT guid FROM category", args: []}).then((result) => { + // if("rows" in result[0]) { + // newExpense("Test Title", result[0]["rows"][0]["guid"], "69.69.1234", 100).then(() => { + // reFetch(); + // }); + // } + // }) }}/>} {isLoading && } diff --git a/components/common/AutoDecimalInput.tsx b/components/common/AutoDecimalInput.tsx new file mode 100644 index 0000000..e56aaa8 --- /dev/null +++ b/components/common/AutoDecimalInput.tsx @@ -0,0 +1,97 @@ +import { View, Text, TouchableOpacity, TextInput, StyleSheet, NativeSyntheticEvent, TextInputKeyPressEventData } from 'react-native' +import React, {LegacyRef, MutableRefObject, useRef, useState} from 'react' +import colors from '../../constants/colors'; +import { SIZES } from '../../constants/theme'; +import { useTheme } from '../../app/contexts/ThemeContext'; + +const formatDecimal = (value: string)=>{ + switch(value.length){ + case 0: + return ""; + case 1: + return "0.0"+value + case 2: + return "0."+value + default: + return value.substring(0, value.length - 2) + "." + value.substring(value.length - 2, value.length) + } +} + +interface AutoDecimalInputProps{ + onValueChange?: (formattedValue: string) => void | undefined + label: string, +} + +const AutoDecimalInput: React.FC = ({onValueChange, label}) => { + const { colors } = useTheme(); + const inputRef = useRef(null); + const [pressedNumbers, setPressedNumbers] = useState(""); + + const update = (newValues : string) => { + if(onValueChange){ + onValueChange(formatDecimal(newValues)) + } + setPressedNumbers(newValues); + } + + const handleInput = (e: NativeSyntheticEvent)=>{ + const pressedKey:string = e.nativeEvent.key + if(Number.isInteger(Number.parseInt(pressedKey))){ + if(pressedNumbers.length === 0 && pressedKey === "0"){ + return + } + update(pressedNumbers + pressedKey) + }else if(pressedKey === "Backspace"){ + update(pressedNumbers.substring(0, pressedNumbers.length - 1)) + } + } + return ( + { + if(inputRef.current) + inputRef.current.focus() + }}> + {label} + + + EUR + + + ) +} + +const styles = StyleSheet.create({ + container: { + margin: SIZES.normal, + }, + inputContainer: { + borderRadius: 20, + flexDirection: "row", + justifyContent: 'space-between' + }, + text:{ + fontSize: SIZES.large, + marginVertical: 12, + marginHorizontal: 15, + }, + currency: { + fontSize: SIZES.normal, + color: "#007acc", + marginRight: 15, + }, + currencyWrapper: { + flexDirection:"row", + justifyContent: 'flex-end', + alignItems: "center" + } +}) + +export default AutoDecimalInput; \ No newline at end of file diff --git a/components/index.tsx b/components/index.tsx index f3dd44f..c717b9e 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -9,8 +9,9 @@ import SearchBar from "./common/SearchBar" import NavigationButton from "./common/button" import LoadingSymbol from "./common/loadingSymbol" import Plus from "./common/plus" +import AutoDecimalInput from "./common/AutoDecimalInput" -//budget +//login import BudgetHeader from "./budget/budgetHeader" import CategoryItem from "./budget/categoryItem" import CustomColorPicker from "./budget/customColorPicker" @@ -22,6 +23,6 @@ import Input from "./login/input" export { BudgetHeader, ButtonSetting, CategoryItem, CustomCard, CustomColorPicker, ExpenseItem, Input, LoadingSymbol, NavigationButton, Plus, - SearchBar, ToggleSetting, TypeSelectorSwitch, Welcome + SearchBar, ToggleSetting, TypeSelectorSwitch, Welcome, AutoDecimalInput }