67 lines
No EOL
2.1 KiB
TypeScript
67 lines
No EOL
2.1 KiB
TypeScript
import React from 'react';
|
|
import { ColorValue, StyleSheet, Text, View } from 'react-native';
|
|
import { SIZES } from '../../../constants/theme';
|
|
import { useThemeColor } from '../../../hooks/useThemeColor';
|
|
import { useTheme } from '../../../app/contexts/ThemeContext';
|
|
import CustomCard from "../../common/CustomCard";
|
|
import { SimpleDate } from '../../../util/SimpleDate';
|
|
|
|
type ISOdateString = string
|
|
|
|
export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: ISOdateString, value : string}
|
|
export default function ExpenseItem(itemProps : ExpenseItemProps) {
|
|
const {colors} = useTheme()
|
|
const textColor = colors.primaryText
|
|
const backgroundColor = colors.containerColor
|
|
const date: SimpleDate = new SimpleDate(new Date(itemProps.date))
|
|
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}>{date.format("DD.MM.YYYY")}</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,
|
|
}
|
|
}) |