update table

This commit is contained in:
2025-10-31 17:38:48 +07:00
parent 5307f44a34
commit 2fac0b8093
5 changed files with 14 additions and 104 deletions

View File

@@ -1,13 +1,6 @@
import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useRef, useState } from "react";
import {
Animated,
Platform,
Text,
TouchableOpacity,
UIManager,
View,
} from "react-native";
import { Animated, Text, TouchableOpacity, View } from "react-native";
import styles from "./style/CrewListTable.styles";
// ---------------------------
@@ -35,13 +28,6 @@ const data: CrewMember[] = [
];
const CrewListTable: React.FC = () => {
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;

View File

@@ -1,13 +1,6 @@
import { IconSymbol } from "@/components/ui/icon-symbol"; // biểu tượng giống dự án bạn
import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useRef, useState } from "react";
import {
Animated,
Platform,
Text,
TouchableOpacity,
UIManager,
View,
} from "react-native";
import { Animated, Text, TouchableOpacity, View } from "react-native";
import styles from "./style/FishingToolsTable.styles";
// ---------------------------
@@ -29,14 +22,6 @@ const data: ToolItem[] = [
];
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;

View File

@@ -1,13 +1,6 @@
import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useRef, useState } from "react";
import {
Animated,
Platform,
Text,
TouchableOpacity,
UIManager,
View,
} from "react-native";
import { Animated, Text, TouchableOpacity, View } from "react-native";
import styles from "./style/NetListTable.styles";
// ---------------------------
@@ -29,14 +22,6 @@ const data: NetItem[] = [
];
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;
@@ -81,35 +66,21 @@ const NetListTable: React.FC = () => {
>
{/* Header */}
<View style={[styles.row, styles.tableHeader]}>
<Text style={[styles.cell, styles.left, styles.headerText]}>STT</Text>
<Text style={[styles.sttCell, 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>
<Text style={styles.sttCell}>{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>
@@ -118,35 +89,21 @@ const NetListTable: React.FC = () => {
<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.sttCell, 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>
<Text style={styles.sttCell}>{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 File

@@ -1,13 +1,6 @@
import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useRef, useState } from "react";
import {
Animated,
Platform,
Text,
TouchableOpacity,
UIManager,
View,
} from "react-native";
import { Animated, Text, TouchableOpacity, View } from "react-native";
import styles from "./style/TripCostTable.styles";
// ---------------------------
@@ -65,14 +58,6 @@ const data: CostItem[] = [
// ---------------------------
const TripCostTable: React.FC = () => {
// Enable LayoutAnimation for 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;

View File

@@ -48,11 +48,12 @@ export default StyleSheet.create({
color: "#111",
textAlign: "center",
},
left: {
sttCell: {
flex: 0.3,
fontSize: 15,
color: "#111",
textAlign: "left",
},
right: {
textAlign: "right",
paddingLeft: 10,
},
headerText: {
fontWeight: "600",
@@ -73,8 +74,4 @@ export default StyleSheet.create({
fontSize: 15,
color: "#111",
},
actions: {
flexDirection: "row",
justifyContent: "flex-end",
},
});