Khởi tạo ban đầu
This commit is contained in:
Tran Anh Tuan
197
components/tripInfo/NetListTable.tsx
Normal file
197
components/tripInfo/NetListTable.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { useI18n } from "@/hooks/use-i18n";
|
||||
import { useFishes } from "@/state/use-fish";
|
||||
import { useTrip } from "@/state/use-trip";
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Animated, Text, TouchableOpacity, View } from "react-native";
|
||||
import CreateOrUpdateHaulModal from "./modal/CreateOrUpdateHaulModal";
|
||||
import { useAppTheme } from "@/hooks/use-app-theme";
|
||||
import { useThemeContext } from "@/hooks/use-theme-context";
|
||||
import { createTableStyles } from "./ThemedTable";
|
||||
|
||||
const NetListTable: React.FC = () => {
|
||||
const [collapsed, setCollapsed] = useState(true);
|
||||
const [contentHeight, setContentHeight] = useState<number>(0);
|
||||
const animatedHeight = useRef(new Animated.Value(0)).current;
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [selectedNet, setSelectedNet] = useState<Model.FishingLog | null>(null);
|
||||
const { t } = useI18n();
|
||||
const { colorScheme } = useAppTheme();
|
||||
const { colors } = useThemeContext();
|
||||
const styles = useMemo(() => createTableStyles(colorScheme), [colorScheme]);
|
||||
|
||||
const { trip } = useTrip();
|
||||
const { fishSpecies, getFishSpecies } = useFishes();
|
||||
useEffect(() => {
|
||||
getFishSpecies();
|
||||
}, []);
|
||||
|
||||
const handleToggle = () => {
|
||||
const toValue = collapsed ? contentHeight : 0;
|
||||
Animated.timing(animatedHeight, {
|
||||
toValue,
|
||||
duration: 300,
|
||||
useNativeDriver: false,
|
||||
}).start();
|
||||
setCollapsed((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleStatusPress = (id: string) => {
|
||||
const net = trip?.fishing_logs?.find((item) => item.fishing_log_id === id);
|
||||
if (net) {
|
||||
setSelectedNet(net);
|
||||
setModalVisible(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* Header toggle */}
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={handleToggle}
|
||||
style={styles.headerRow}
|
||||
>
|
||||
<Text style={styles.title}>{t("trip.netList.title")}</Text>
|
||||
{collapsed && (
|
||||
<Text style={styles.totalCollapsed}>
|
||||
{trip?.fishing_logs?.length}
|
||||
</Text>
|
||||
)}
|
||||
<IconSymbol
|
||||
name={collapsed ? "chevron.down" : "chevron.up"}
|
||||
size={16}
|
||||
color={colors.icon}
|
||||
/>
|
||||
</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;
|
||||
// Update measured content height whenever it actually changes.
|
||||
if (height > 0 && height !== contentHeight) {
|
||||
setContentHeight(height);
|
||||
// If the panel is currently expanded, animate to the new height so
|
||||
// newly added/removed rows become visible immediately.
|
||||
if (!collapsed) {
|
||||
Animated.timing(animatedHeight, {
|
||||
toValue: height,
|
||||
duration: 200,
|
||||
useNativeDriver: false,
|
||||
}).start();
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={[styles.row, styles.tableHeader]}>
|
||||
<Text style={[styles.sttCell, styles.headerText]}>
|
||||
{t("trip.netList.sttHeader")}
|
||||
</Text>
|
||||
<Text style={[styles.cell, styles.headerText]}>
|
||||
{t("trip.netList.statusHeader")}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Body */}
|
||||
{trip?.fishing_logs?.map((item, index) => (
|
||||
<View key={item.fishing_log_id} style={styles.row}>
|
||||
{/* Cột STT */}
|
||||
<Text style={styles.sttCell}>
|
||||
{t("trip.netList.haulPrefix")} {index + 1}
|
||||
</Text>
|
||||
|
||||
{/* Cột Trạng thái */}
|
||||
<View style={[styles.cell, styles.statusContainer]}>
|
||||
<View
|
||||
style={[
|
||||
styles.statusDot,
|
||||
{ backgroundColor: item.status ? "#2ecc71" : "#FFD600" },
|
||||
]}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={() => handleStatusPress(item.fishing_log_id)}
|
||||
>
|
||||
<Text style={styles.statusText}>
|
||||
{item.status
|
||||
? t("trip.netList.completed")
|
||||
: t("trip.netList.pending")}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</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.sttCell, styles.headerText]}>
|
||||
{t("trip.netList.sttHeader")}
|
||||
</Text>
|
||||
<Text style={[styles.cell, styles.headerText]}>
|
||||
{t("trip.netList.statusHeader")}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Body */}
|
||||
{trip?.fishing_logs?.map((item, index) => (
|
||||
<View key={item.fishing_log_id} style={styles.row}>
|
||||
{/* Cột STT */}
|
||||
<Text style={styles.sttCell}>
|
||||
{t("trip.netList.haulPrefix")} {index + 1}
|
||||
</Text>
|
||||
|
||||
{/* Cột Trạng thái */}
|
||||
<View style={[styles.cell, styles.statusContainer]}>
|
||||
<View
|
||||
style={[
|
||||
styles.statusDot,
|
||||
{ backgroundColor: item.status ? "#2ecc71" : "#FFD600" },
|
||||
]}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={() => handleStatusPress(item.fishing_log_id)}
|
||||
>
|
||||
<Text style={styles.statusText}>
|
||||
{item.status
|
||||
? t("trip.netList.completed")
|
||||
: t("trip.netList.pending")}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</Animated.View>
|
||||
<CreateOrUpdateHaulModal
|
||||
isVisible={modalVisible}
|
||||
onClose={() => {
|
||||
console.log("OnCLose");
|
||||
setModalVisible(false);
|
||||
}}
|
||||
fishingLog={selectedNet}
|
||||
fishingLogIndex={
|
||||
selectedNet
|
||||
? trip!.fishing_logs!.findIndex(
|
||||
(item) => item.fishing_log_id === selectedNet.fishing_log_id
|
||||
) + 1
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
{/* Modal chi tiết */}
|
||||
{/* <NetDetailModal
|
||||
visible={modalVisible}
|
||||
onClose={() => {
|
||||
console.log("OnCLose");
|
||||
setModalVisible(false);
|
||||
}}
|
||||
netData={selectedNet}
|
||||
/> */}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default NetListTable;
|
||||
Reference in New Issue
Block a user