133 lines
3.3 KiB
JavaScript
133 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import { View, Text, FlatList, StyleSheet } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { COLORS } from '../constants/colors';
|
|
|
|
const TransactionList = ({ transactions }) => {
|
|
if (!transactions || transactions.length === 0) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.emptyText}>Soňky 10 günde kart hereketleri ýok...</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const groupedTransactions = transactions.reduce((acc, transaction) => {
|
|
const date = new Date(transaction.date).toLocaleDateString('tk', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
});
|
|
if (!acc[date]) {
|
|
acc[date] = [];
|
|
}
|
|
acc[date].push(transaction);
|
|
return acc;
|
|
}, {});
|
|
|
|
const renderTransactionItem = ({ item }) => (
|
|
<View style={styles.transactionItem}>
|
|
<View style={styles.transactionIcon}>
|
|
<Ionicons
|
|
name={item.type === 'credit' ? 'arrow-down' : 'arrow-up'}
|
|
size={20}
|
|
color={item.type === 'credit' ? COLORS.success : COLORS.danger}
|
|
/>
|
|
</View>
|
|
<View style={styles.transactionDetails}>
|
|
<Text style={styles.transactionTitle}>{item.description}</Text>
|
|
<Text style={styles.transactionDate}>{item.time ?? '-'}</Text>
|
|
</View>
|
|
<Text
|
|
style={[
|
|
styles.transactionAmount,
|
|
{ color: item.type === 'credit' ? COLORS.success : COLORS.textPrimary },
|
|
]}
|
|
>
|
|
{item.type === 'credit' ? '+' : '-'}
|
|
{item.amount} {item.currency}
|
|
</Text>
|
|
</View>
|
|
);
|
|
|
|
const renderTransactionSection = ({ item: date }) => (
|
|
<View>
|
|
<Text style={styles.transactionDateHeader}>{date}</Text>
|
|
<FlatList
|
|
data={groupedTransactions[date]}
|
|
renderItem={renderTransactionItem}
|
|
keyExtractor={(item) => item.id?.toString()}
|
|
scrollEnabled={false}
|
|
ItemSeparatorComponent={() => <View style={styles.separator} />}
|
|
/>
|
|
</View>
|
|
);
|
|
|
|
return (
|
|
<FlatList
|
|
data={Object.keys(groupedTransactions)}
|
|
renderItem={renderTransactionSection}
|
|
keyExtractor={(date) => date}
|
|
scrollEnabled={false}
|
|
ItemSeparatorComponent={() => <View style={styles.separator} />}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 16,
|
|
},
|
|
emptyText: {
|
|
textAlign: 'center',
|
|
color: COLORS.textSecondary,
|
|
},
|
|
transactionItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 12,
|
|
},
|
|
transactionIcon: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
backgroundColor: COLORS.background,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: 16,
|
|
},
|
|
transactionDetails: {
|
|
flex: 1,
|
|
},
|
|
transactionTitle: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: COLORS.textPrimary,
|
|
marginBottom: 2,
|
|
},
|
|
transactionDate: {
|
|
fontSize: 13,
|
|
color: COLORS.textSecondary,
|
|
},
|
|
transactionAmount: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
},
|
|
transactionDateHeader: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: COLORS.textSecondary,
|
|
backgroundColor: COLORS.white,
|
|
paddingTop: 16,
|
|
paddingBottom: 8,
|
|
paddingHorizontal: 4,
|
|
},
|
|
separator: {
|
|
height: 1,
|
|
backgroundColor: COLORS.gray[200],
|
|
marginLeft: 60,
|
|
},
|
|
});
|
|
|
|
export default TransactionList;
|