158 lines
4.8 KiB
TypeScript
158 lines
4.8 KiB
TypeScript
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
import React, { useRef, useState } from "react";
|
|
import {
|
|
Animated,
|
|
Platform,
|
|
Text,
|
|
TouchableOpacity,
|
|
UIManager,
|
|
View,
|
|
} from "react-native";
|
|
import styles from "./style/NetListTable.styles";
|
|
|
|
// ---------------------------
|
|
// 🧩 Interface
|
|
// ---------------------------
|
|
interface NetItem {
|
|
id: string;
|
|
stt: string;
|
|
trangThai: string;
|
|
}
|
|
|
|
// ---------------------------
|
|
// 🧵 Dữ liệu mẫu
|
|
// ---------------------------
|
|
const data: NetItem[] = [
|
|
{ id: "1", stt: "Mẻ 3", trangThai: "Đã hoàn thành" },
|
|
{ id: "2", stt: "Mẻ 2", trangThai: "Đã hoàn thành" },
|
|
{ id: "3", stt: "Mẻ 1", trangThai: "Đã hoàn thành" },
|
|
];
|
|
|
|
const NetListTable: React.FC = () => {
|
|
// Bật animation cho 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 tongSoMe = data.length;
|
|
|
|
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 mẻ lưới</Text>
|
|
{collapsed && <Text style={styles.totalCollapsed}>{tongSoMe}</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);
|
|
}
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<View style={[styles.row, styles.tableHeader]}>
|
|
<Text style={[styles.cell, styles.left, styles.headerText]}>STT</Text>
|
|
<Text style={[styles.cell, styles.headerText]}>Trạng thái</Text>
|
|
<Text style={[styles.cell, styles.right, styles.headerText]}>
|
|
Thao tác
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Body */}
|
|
{data.map((item) => (
|
|
<View key={item.id} style={styles.row}>
|
|
{/* Cột STT */}
|
|
<Text style={[styles.cell, styles.left]}>{item.stt}</Text>
|
|
|
|
{/* Cột Trạng thái */}
|
|
<View style={[styles.cell, styles.statusContainer]}>
|
|
<View style={styles.statusDot} />
|
|
<Text style={styles.statusText}>{item.trangThai}</Text>
|
|
</View>
|
|
|
|
{/* Cột Thao tác */}
|
|
<View style={[styles.cell, styles.actions]}>
|
|
<IconSymbol name="eye" size={16} color="#333" />
|
|
<IconSymbol
|
|
name="square.and.pencil"
|
|
size={16}
|
|
color="#333"
|
|
style={{ marginLeft: 10 }}
|
|
/>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
{/* Bảng hiển thị với animation */}
|
|
<Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
|
|
{/* Header */}
|
|
<View style={[styles.row, styles.tableHeader]}>
|
|
<Text style={[styles.cell, styles.left, styles.headerText]}>STT</Text>
|
|
<Text style={[styles.cell, styles.headerText]}>Trạng thái</Text>
|
|
<Text style={[styles.cell, styles.right, styles.headerText]}>
|
|
Thao tác
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Body */}
|
|
{data.map((item) => (
|
|
<View key={item.id} style={styles.row}>
|
|
{/* Cột STT */}
|
|
<Text style={[styles.cell, styles.left]}>{item.stt}</Text>
|
|
|
|
{/* Cột Trạng thái */}
|
|
<View style={[styles.cell, styles.statusContainer]}>
|
|
<View style={styles.statusDot} />
|
|
<Text style={styles.statusText}>{item.trangThai}</Text>
|
|
</View>
|
|
|
|
{/* Cột Thao tác */}
|
|
<View style={[styles.cell, styles.actions]}>
|
|
<IconSymbol name="eye" size={16} color="#333" />
|
|
<IconSymbol
|
|
name="square.and.pencil"
|
|
size={16}
|
|
color="#333"
|
|
style={{ marginLeft: 10 }}
|
|
/>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default NetListTable;
|