170 lines
4.0 KiB
TypeScript
170 lines
4.0 KiB
TypeScript
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
import React, { useRef, useState } from "react";
|
|
import {
|
|
Animated,
|
|
FlatList,
|
|
ListRenderItem,
|
|
Platform,
|
|
Text,
|
|
TouchableOpacity,
|
|
UIManager,
|
|
View,
|
|
} from "react-native";
|
|
import styles from "./style/TripCostTable.styles";
|
|
|
|
// ---------------------------
|
|
// 🧩 Interface
|
|
// ---------------------------
|
|
interface CostItem {
|
|
id: string;
|
|
loai: string;
|
|
soLuong: number;
|
|
donVi: string;
|
|
chiPhi: number;
|
|
tongChiPhi: number;
|
|
}
|
|
|
|
// ---------------------------
|
|
// 📊 Dữ liệu mẫu
|
|
// ---------------------------
|
|
const data: CostItem[] = [
|
|
{
|
|
id: "1",
|
|
loai: "Nhiên liệu",
|
|
soLuong: 1000,
|
|
donVi: "liters",
|
|
chiPhi: 20000,
|
|
tongChiPhi: 20000000,
|
|
},
|
|
{
|
|
id: "2",
|
|
loai: "Lương thực",
|
|
soLuong: 500,
|
|
donVi: "kg",
|
|
chiPhi: 30000,
|
|
tongChiPhi: 15000000,
|
|
},
|
|
{
|
|
id: "3",
|
|
loai: "Lương thuyền viên",
|
|
soLuong: 10,
|
|
donVi: "people",
|
|
chiPhi: 5000000,
|
|
tongChiPhi: 50000000,
|
|
},
|
|
{
|
|
id: "4",
|
|
loai: "Muối đá",
|
|
soLuong: 100,
|
|
donVi: "kg",
|
|
chiPhi: 20000,
|
|
tongChiPhi: 2000000,
|
|
},
|
|
];
|
|
|
|
// ---------------------------
|
|
// 💰 Component chính
|
|
// ---------------------------
|
|
|
|
const TripCostTable: React.FC = () => {
|
|
// Enable LayoutAnimation for Android
|
|
if (
|
|
Platform.OS === "android" &&
|
|
UIManager.setLayoutAnimationEnabledExperimental
|
|
) {
|
|
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
}
|
|
|
|
const [collapsed, setCollapsed] = useState(true);
|
|
const animatedHeight = useRef(new Animated.Value(0)).current;
|
|
const tongCong = data.reduce((sum, item) => sum + item.tongChiPhi, 0);
|
|
|
|
const renderItem: ListRenderItem<CostItem> = ({ item }) => (
|
|
<View style={styles.row}>
|
|
<Text style={[styles.cell, styles.left]}>{item.loai}</Text>
|
|
<Text style={[styles.cell, styles.highlight]}>
|
|
{item.tongChiPhi.toLocaleString()}
|
|
</Text>
|
|
</View>
|
|
);
|
|
|
|
const contentHeight = 220; // Chiều cao cố định cho bảng, có thể điều chỉnh
|
|
const handleToggle = () => {
|
|
if (collapsed) {
|
|
Animated.timing(animatedHeight, {
|
|
toValue: contentHeight,
|
|
duration: 350,
|
|
useNativeDriver: false,
|
|
}).start();
|
|
} else {
|
|
Animated.timing(animatedHeight, {
|
|
toValue: 0,
|
|
duration: 350,
|
|
useNativeDriver: false,
|
|
}).start();
|
|
}
|
|
setCollapsed((prev) => !prev);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={handleToggle}
|
|
style={{
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: collapsed ? 0 : 12,
|
|
}}
|
|
>
|
|
<Text style={styles.title}>Chi phí chuyến đi</Text>
|
|
{collapsed && (
|
|
<Text
|
|
style={[
|
|
styles.title,
|
|
{ color: "#ff6600", fontWeight: "bold", marginLeft: 8 },
|
|
]}
|
|
>
|
|
{tongCong.toLocaleString()}
|
|
</Text>
|
|
)}
|
|
<IconSymbol
|
|
name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
|
|
size={15}
|
|
color="#000000"
|
|
/>
|
|
</TouchableOpacity>
|
|
|
|
<Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
|
|
{/* Header */}
|
|
<View style={[styles.row, styles.header]}>
|
|
<Text style={[styles.cell, styles.left, styles.headerText]}>
|
|
Loại
|
|
</Text>
|
|
<Text style={[styles.cell, styles.headerText]}>Tổng chi phí</Text>
|
|
</View>
|
|
|
|
{/* Body */}
|
|
<FlatList
|
|
data={data}
|
|
renderItem={renderItem}
|
|
keyExtractor={(item) => item.id}
|
|
/>
|
|
|
|
{/* Footer */}
|
|
<View style={[styles.row]}>
|
|
<Text style={[styles.cell, styles.left, styles.footerText]}>
|
|
Tổng cộng
|
|
</Text>
|
|
<Text style={[styles.cell, styles.total]}>
|
|
{tongCong.toLocaleString()}
|
|
</Text>
|
|
</View>
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default TripCostTable;
|