99 lines
No EOL
3.6 KiB
TypeScript
99 lines
No EOL
3.6 KiB
TypeScript
import { router, useLocalSearchParams } from "expo-router";
|
|
import { useState } from "react";
|
|
import { StyleSheet, Text, TextInput, View } from "react-native";
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
|
|
import { addCategory } from "../../../services/database";
|
|
import { useTheme } from "../../contexts/ThemeContext";
|
|
import { CategoryType } from "../../../types/dbItems";
|
|
|
|
export default function Page() {
|
|
const {colors} = useTheme();
|
|
|
|
const parameters = useLocalSearchParams();
|
|
|
|
const [categoryName, setCategoryName] = useState<string>("");
|
|
const [categoryColor, setCategoryColor] = useState<string>('#' + Math.floor(Math.random()*16777215).toString(16));
|
|
|
|
const [selectedType, setSelectedType] = useState<CategoryType>(CategoryType.EXPENSE);
|
|
|
|
const [amount, setAmount] = useState(0);
|
|
|
|
return (
|
|
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: colors.backgroundColor}]}>
|
|
<Text style={[styles.headingTextStyle, {color: colors.primaryText}]}>Add Category</Text>
|
|
|
|
<View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
|
|
<View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
|
|
<TextInput placeholder={"Enter Category Name..."} value={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: CategoryType) => {
|
|
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={() => {
|
|
addCategory(categoryName, categoryColor, selectedType, amount).then(() => router.back());
|
|
}}/>
|
|
</View>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
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,
|
|
}
|
|
}); |