65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import { ColorValue, StyleSheet, Text, View } from "react-native";
|
|
import { useTheme } from "../../app/contexts/ThemeContext";
|
|
import CustomCard from "../common/CustomCard";
|
|
|
|
export type CategoryItemProps = {
|
|
category: string,
|
|
color: ColorValue,
|
|
allocated_ammount: number,
|
|
category_guid: string,
|
|
}
|
|
|
|
const CategoryItem = (properties: CategoryItemProps) => {
|
|
|
|
const { colors } = useTheme();
|
|
|
|
const subText = `${calculateSumOfExpenses(properties.category_guid)} / ${properties.allocated_ammount} €`;
|
|
|
|
return (
|
|
<CustomCard>
|
|
<View style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
|
|
<View style={[styles.textViewStyle]}>
|
|
<Text style={[styles.categoryNameStyle, {color: colors.primaryText}]}>
|
|
{properties.category}
|
|
</Text>
|
|
<Text style={[styles.subTextStyle, {color: colors.secondaryText}]}>
|
|
{subText}
|
|
</Text>
|
|
</View>
|
|
</CustomCard>
|
|
);
|
|
};
|
|
|
|
export default CategoryItem;
|
|
|
|
const styles = StyleSheet.create({
|
|
colorTipStyle: {
|
|
width: 25,
|
|
borderTopLeftRadius: 10,
|
|
borderBottomLeftRadius: 10,
|
|
},
|
|
textViewStyle: {
|
|
flex: 2,
|
|
flexDirection: "column",
|
|
paddingVertical: 5,
|
|
paddingHorizontal: 10,
|
|
alignSelf: "stretch",
|
|
},
|
|
categoryNameStyle: {
|
|
fontSize: 30,
|
|
fontWeight: "bold",
|
|
},
|
|
subTextStyle: {
|
|
fontSize: 17.5,
|
|
}
|
|
})
|
|
|
|
const calculateSumOfExpenses = (category_guid: string) => {
|
|
// const { data } = useFetch({sql: "SELECT amount FROM expense WHERE category_guid = ?", args: [category_guid]});
|
|
|
|
// let sum: number = 0;
|
|
// console.log(data);
|
|
|
|
console.log("render");
|
|
return 0;
|
|
}
|