142 lines
4.2 KiB
TypeScript
142 lines
4.2 KiB
TypeScript
import { IconSymbol } from "@/components/ui/icon-symbol"; // biểu tượng giống dự án bạn
|
|
import React, { useRef, useState } from "react";
|
|
import {
|
|
Animated,
|
|
Platform,
|
|
Text,
|
|
TouchableOpacity,
|
|
UIManager,
|
|
View,
|
|
} from "react-native";
|
|
import styles from "./style/FishingToolsTable.styles";
|
|
|
|
// ---------------------------
|
|
// 🧩 Interface
|
|
// ---------------------------
|
|
interface ToolItem {
|
|
id: string;
|
|
ten: string;
|
|
soLuong: number;
|
|
}
|
|
|
|
// ---------------------------
|
|
// 🎣 Dữ liệu mẫu
|
|
// ---------------------------
|
|
const data: ToolItem[] = [
|
|
{ id: "1", ten: "Lưới kéo", soLuong: 1 },
|
|
{ id: "2", ten: "Cần câu", soLuong: 1 },
|
|
{ id: "3", ten: "Mồi câu", soLuong: 5 },
|
|
];
|
|
|
|
const FishingToolsTable: React.FC = () => {
|
|
// Bật animation trên Android
|
|
if (
|
|
Platform.OS === "android" &&
|
|
UIManager.setLayoutAnimationEnabledExperimental
|
|
) {
|
|
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
}
|
|
|
|
const [collapsed, setCollapsed] = useState(true);
|
|
const [contentHeight, setContentHeight] = useState<number>(0);
|
|
const animatedHeight = useRef(new Animated.Value(0)).current;
|
|
const tongSoLuong = data.reduce((sum, item) => sum + item.soLuong, 0);
|
|
|
|
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 ? "arrowshape.down.fill" : "arrowshape.up.fill"}
|
|
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) => (
|
|
<View key={item.id} style={styles.row}>
|
|
<Text style={[styles.cell, styles.left]}>{item.ten}</Text>
|
|
<Text style={[styles.cell, styles.right]}>{item.soLuong}</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) => (
|
|
<View key={item.id} style={styles.row}>
|
|
<Text style={[styles.cell, styles.left]}>{item.ten}</Text>
|
|
<Text style={[styles.cell, styles.right]}>{item.soLuong}</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;
|