96 lines
No EOL
3.5 KiB
TypeScript
96 lines
No EOL
3.5 KiB
TypeScript
import { router, useLocalSearchParams } from "expo-router";
|
|
import { useState } from "react";
|
|
import { SafeAreaView, StyleSheet, Text, TextInput, View } from "react-native";
|
|
import { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
|
|
import { useTheme } from "../../contexts/ThemeContext";
|
|
|
|
const addCategory = () => {
|
|
const {colors} = useTheme();
|
|
const {category_guid, category_amount, category_color, category_name, category_type} = useLocalSearchParams();
|
|
|
|
const [categoryName, setCategoryName] = useState(category_name.toString());
|
|
const [categoryColor, setCategoryColor] = useState(category_color.toString());
|
|
const [selectedType, setSelectedType] = useState(category_type.toString());
|
|
const [amount, setAmount] = useState(Number.parseFloat(category_amount.toString()));
|
|
|
|
return (
|
|
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: colors.backgroundColor}]}>
|
|
<Text style={[styles.headingTextStyle, {color: colors.primaryText}]}>Edit Category</Text>
|
|
|
|
<View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
|
|
<View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
|
|
<TextInput placeholder={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
|
|
setCategoryName(newName);
|
|
}}/>
|
|
</View>
|
|
|
|
<View style={styles.budgetInput}>
|
|
<AutoDecimalInput label={"Allocated:"} onValueChange={(value) => {
|
|
setAmount(!Number.isNaN(Number.parseFloat(value)) ? Number.parseFloat(value) : 0);
|
|
}}/>
|
|
</View>
|
|
|
|
<TypeSelectorSwitch
|
|
currentSelected={selectedType}
|
|
handleButtonPress={(type) => {
|
|
setSelectedType(type);
|
|
}}
|
|
/>
|
|
|
|
<View>
|
|
<CustomColorPicker color={categoryColor} handleColorChange={(color) => {
|
|
setCategoryColor(color);
|
|
}}/>
|
|
</View>
|
|
|
|
<View style={styles.navigationButtonViewStyle}>
|
|
<NavigationButton text="Back" onPress={() => {
|
|
router.back();
|
|
}}/>
|
|
<NavigationButton text="Save" onPress={() => {
|
|
console.log("Implement Saving here!");
|
|
router.back();
|
|
}}/>
|
|
</View>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
export default addCategory;
|
|
|
|
const styles = StyleSheet.create({
|
|
containerStyle: {
|
|
flex: 1,
|
|
margin: 10,
|
|
borderRadius: 10,
|
|
},
|
|
safeAreaViewStyle: {
|
|
flex: 1,
|
|
flexDirection: "column"
|
|
},
|
|
headingTextStyle: {
|
|
fontSize: 40,
|
|
fontWeight: "bold",
|
|
alignSelf: "center",
|
|
marginVertical: 10,
|
|
},
|
|
navigationButtonViewStyle: {
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
marginBottom: 10,
|
|
},
|
|
textInputViewStyle: {
|
|
borderRadius: 10,
|
|
paddingVertical: 10,
|
|
margin: 10,
|
|
},
|
|
textInputStyle: {
|
|
paddingHorizontal: 10,
|
|
fontSize: 25,
|
|
},
|
|
budgetInput: {
|
|
marginBottom: 10,
|
|
marginHorizontal: 10,
|
|
}
|
|
}); |