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

feat: ExpenseItem on Home Screen

Browse source
This commit is contained in:
Jakob Stornig 2023-12-04 01:59:34 +01:00
parent 0f9783c292
commit da58edc1da
5 changed files with 140 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

36
app/index.tsx
View file

@ -1,5 +1,9 @@
import { StyleSheet, View, Text } from 'react-native';
import {useThemeColor} from "../hooks/hooks";
import { useThemeColor } from "../hooks/hooks";
import { SafeAreaView } from 'react-native-safe-area-context';
import { ExpenseItem } from '../components';
import { FlatList } from 'react-native-gesture-handler';
import { ExpenseItemProps } from '../components/home/expenseItem/expenseItem';
export default function Page() {
@ -16,10 +20,32 @@ export default function Page() {
}
});
const data = [
{id:"1",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"Super fancy sepnding with long name that will not display", value: "€ 30,00"},
{id:"2",category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
{id:"3",category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
{id:"4",category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
{id:"5",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
{id:"6",category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"Super fancy sepnding with long name that will not display", value: "€ 30,00"},
{id:"7",category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
{id:"8",category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
{id:"9",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
{id:"10" ,category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
{id:"11" ,category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
{id:"12" ,category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"Super fancy sepnding", value: "€ 30,00"},
]
return (
<View style={styles.container}>
<Text style={styles.text}>Home</Text>
</View>
);
<SafeAreaView>
<FlatList
data={data}
renderItem = {({item}) => <ExpenseItem category={item.category} color={item.color} date={item.date} title={item.title} value={item.value}/>}
keyExtractor={item => item.id}
ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
>
</FlatList>
</SafeAreaView>
);
}

23
components/common/customCard/CustomCard.tsx Normal file
View file

@ -0,0 +1,23 @@
import { View, Text, StyleSheet } from 'react-native'
import React from 'react'
import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'
import { useThemeColor } from '../../../hooks/hooks'
import { SHADOWS } from '../../../constants/theme'
export default function CustomCard(props : ViewProps) {
return (
<View style={[styles.container, SHADOWS.light, props.style]}>
{props.children}
</View>
)
}
const styles = StyleSheet.create({
container:{
flexDirection: "row",
alignItems: "stretch",
alignContent: "space-between",
borderRadius: 20,
marginHorizontal: 10
}
})

61
components/home/expenseItem/expenseItem.tsx Normal file
View file

@ -0,0 +1,61 @@
import { View, Text, StyleSheet, ColorValue } from 'react-native'
import React from 'react'
import { useThemeColor } from '../../../hooks/hooks';
import CustomCard from "../../common/customCard/CustomCard";
import { SIZES } from '../../../constants/theme';
export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
export default function ExpenseItem(itemProps : ExpenseItemProps) {
const textColor = useThemeColor("primaryText");
const backgroundColor = useThemeColor("backgroundColor")
return (
<CustomCard>
<View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
<View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
<Text style={{
fontSize: SIZES.normal,
color: textColor
}} numberOfLines={1}>{itemProps.category}</Text>
<Text style={{
fontSize: SIZES.large,
color: textColor
}} numberOfLines={1}>{itemProps.title}</Text>
<Text style={{
fontSize: SIZES.small,
color: textColor
}} numberOfLines={1}>{itemProps.date}</Text>
</View>
<View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
<Text style={{
fontSize: SIZES.xxLarge,
color: textColor
}} numberOfLines={1}>{itemProps.value}</Text>
</View>
</CustomCard>
)
}
const styles = StyleSheet.create({
colorTip: {
width: 20,
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20,
},
textSection: {
flexDirection: "column",
alignContent: "space-between",
alignItems:"flex-start",
paddingLeft: 10,
flex:1,
alignSelf: "stretch",
paddingVertical: 5
},
valueSection: {
justifyContent:"center",
borderTopRightRadius: 20,
borderBottomRightRadius: 20,
}
})

7
components/index.jsx Normal file
View file

@ -0,0 +1,7 @@
//home
import ExpenseItem from "./home/expenseItem/expenseItem"
export {
ExpenseItem
}

18
constants/theme.ts Normal file
View file

@ -0,0 +1,18 @@
const SIZES = {
small: 12,
normal: 17,
large: 20,
xxLarge: 30
}
const SHADOWS = {
light: {
shadowColor: "#ADB7C3",
shadowRadius: 20,
elevation: 10,
shadowOpacity: 0.6,
shadowOffset: { width: 1, height: 1 }
}
}
export {SIZES, SHADOWS}