119 lines
3.9 KiB
TypeScript
119 lines
3.9 KiB
TypeScript
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
import { useTrip } from "@/state/use-trip";
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import { Animated, Text, TouchableOpacity, View } from "react-native";
|
|
import styles from "./style/FishingToolsTable.styles";
|
|
|
|
const FishingToolsTable: React.FC = () => {
|
|
const [collapsed, setCollapsed] = useState(true);
|
|
const [contentHeight, setContentHeight] = useState<number>(0);
|
|
const animatedHeight = useRef(new Animated.Value(0)).current;
|
|
|
|
const { trip } = useTrip();
|
|
const data: Model.FishingGear[] = trip?.fishing_gears ?? [];
|
|
const tongSoLuong = data.reduce((sum, item) => sum + Number(item.number), 0);
|
|
|
|
// Reset animated height khi dữ liệu thay đổi
|
|
useEffect(() => {
|
|
// setContentHeight(0); // Reset để tính lại chiều cao
|
|
setCollapsed(true); // Reset về trạng thái gập lại
|
|
}, [data]);
|
|
|
|
const handleToggle = () => {
|
|
const toValue = collapsed ? contentHeight : 0;
|
|
Animated.timing(animatedHeight, {
|
|
toValue,
|
|
duration: 300,
|
|
useNativeDriver: false,
|
|
}).start();
|
|
setCollapsed((prev) => !prev);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* Header / Toggle */}
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={handleToggle}
|
|
style={styles.headerRow}
|
|
>
|
|
<Text style={styles.title}>Danh sách ngư cụ</Text>
|
|
{collapsed && <Text style={styles.totalCollapsed}>{tongSoLuong}</Text>}
|
|
<IconSymbol
|
|
name={collapsed ? "chevron.down" : "chevron.up"}
|
|
size={16}
|
|
color="#000"
|
|
/>
|
|
</TouchableOpacity>
|
|
|
|
{/* Nội dung ẩn để đo chiều cao */}
|
|
<View
|
|
style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
|
|
onLayout={(event) => {
|
|
const height = event.nativeEvent.layout.height;
|
|
if (height > 0 && contentHeight === 0) {
|
|
setContentHeight(height);
|
|
}
|
|
}}
|
|
>
|
|
{/* Table Header */}
|
|
<View style={[styles.row, styles.tableHeader]}>
|
|
<Text style={[styles.cell, styles.left, styles.headerText]}>Tên</Text>
|
|
<Text style={[styles.cell, styles.right, styles.headerText]}>
|
|
Số lượng
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Body */}
|
|
{data.map((item, index) => (
|
|
<View key={index} style={styles.row}>
|
|
<Text style={[styles.cell, styles.left]}>{item.name}</Text>
|
|
<Text style={[styles.cell, styles.right]}>{item.number}</Text>
|
|
</View>
|
|
))}
|
|
|
|
{/* Footer */}
|
|
<View style={[styles.row]}>
|
|
<Text style={[styles.cell, styles.left, styles.footerText]}>
|
|
Tổng cộng
|
|
</Text>
|
|
<Text style={[styles.cell, styles.right, styles.footerTotal]}>
|
|
{tongSoLuong}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Nội dung mở/đóng */}
|
|
<Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
|
|
{/* Table Header */}
|
|
<View style={[styles.row, styles.tableHeader]}>
|
|
<Text style={[styles.cell, styles.left, styles.headerText]}>Tên</Text>
|
|
<Text style={[styles.cell, styles.right, styles.headerText]}>
|
|
Số lượng
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Body */}
|
|
{data.map((item, index) => (
|
|
<View key={index} style={styles.row}>
|
|
<Text style={[styles.cell, styles.left]}>{item.name}</Text>
|
|
<Text style={[styles.cell, styles.right]}>{item.number}</Text>
|
|
</View>
|
|
))}
|
|
|
|
{/* Footer */}
|
|
<View style={[styles.row]}>
|
|
<Text style={[styles.cell, styles.left, styles.footerText]}>
|
|
Tổng cộng
|
|
</Text>
|
|
<Text style={[styles.cell, styles.right, styles.footerTotal]}>
|
|
{tongSoLuong}
|
|
</Text>
|
|
</View>
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default FishingToolsTable;
|