tuanta/SeaGateway-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update table

Browse Source
This commit is contained in:
MinhNN
2025-10-31 17:38:48 +07:00
parent 5307f44a34
commit 2fac0b8093
5 changed files with 14 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/tripInfo/CrewListTable.tsx
View File

@@ -1,13 +1,6 @@
import { IconSymbol } from "@/components/ui/icon-symbol"; import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { import { Animated, Text, TouchableOpacity, View } from "react-native";
Animated,
Platform,
Text,
TouchableOpacity,
UIManager,
View,
} from "react-native";
import styles from "./style/CrewListTable.styles"; import styles from "./style/CrewListTable.styles";
// --------------------------- // ---------------------------
@@ -35,13 +28,6 @@ const data: CrewMember[] = [
]; ];
const CrewListTable: React.FC = () => { const CrewListTable: React.FC = () => {
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const [collapsed, setCollapsed] = useState(true); const [collapsed, setCollapsed] = useState(true);
const [contentHeight, setContentHeight] = useState<number>(0); const [contentHeight, setContentHeight] = useState<number>(0);
const animatedHeight = useRef(new Animated.Value(0)).current; const animatedHeight = useRef(new Animated.Value(0)).current;

19
components/tripInfo/FishingToolsList.tsx
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 React, { useRef, useState } from "react";
import { import { Animated, Text, TouchableOpacity, View } from "react-native";
Animated,
Platform,
Text,
TouchableOpacity,
UIManager,
View,
} from "react-native";
import styles from "./style/FishingToolsTable.styles"; import styles from "./style/FishingToolsTable.styles";
// --------------------------- // ---------------------------
@@ -29,14 +22,6 @@ const data: ToolItem[] = [
]; ];
const FishingToolsTable: React.FC = () => { 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 [collapsed, setCollapsed] = useState(true);
const [contentHeight, setContentHeight] = useState<number>(0); const [contentHeight, setContentHeight] = useState<number>(0);
const animatedHeight = useRef(new Animated.Value(0)).current; const animatedHeight = useRef(new Animated.Value(0)).current;

53
components/tripInfo/NetListTable.tsx
View File

@@ -1,13 +1,6 @@
import { IconSymbol } from "@/components/ui/icon-symbol"; import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { import { Animated, Text, TouchableOpacity, View } from "react-native";
Animated,
Platform,
Text,
TouchableOpacity,
UIManager,
View,
} from "react-native";
import styles from "./style/NetListTable.styles"; import styles from "./style/NetListTable.styles";
// --------------------------- // ---------------------------
@@ -29,14 +22,6 @@ const data: NetItem[] = [
]; ];
const NetListTable: React.FC = () => { const NetListTable: React.FC = () => {
// Bật animation cho Android
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const [collapsed, setCollapsed] = useState(true); const [collapsed, setCollapsed] = useState(true);
const [contentHeight, setContentHeight] = useState<number>(0); const [contentHeight, setContentHeight] = useState<number>(0);
const animatedHeight = useRef(new Animated.Value(0)).current; const animatedHeight = useRef(new Animated.Value(0)).current;
@@ -81,35 +66,21 @@ const NetListTable: React.FC = () => {
> >
{/* Header */} {/* Header */}
<View style={[styles.row, styles.tableHeader]}> <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.headerText]}>Trạng thái</Text>
<Text style={[styles.cell, styles.right, styles.headerText]}>
Thao tác
</Text>
</View> </View>
{/* Body */} {/* Body */}
{data.map((item) => ( {data.map((item) => (
<View key={item.id} style={styles.row}> <View key={item.id} style={styles.row}>
{/* Cột STT */} {/* 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 */} {/* Cột Trạng thái */}
<View style={[styles.cell, styles.statusContainer]}> <View style={[styles.cell, styles.statusContainer]}>
<View style={styles.statusDot} /> <View style={styles.statusDot} />
<Text style={styles.statusText}>{item.trangThai}</Text> <Text style={styles.statusText}>{item.trangThai}</Text>
</View> </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>
))} ))}
</View> </View>
@@ -118,35 +89,21 @@ const NetListTable: React.FC = () => {
<Animated.View style={{ height: animatedHeight, overflow: "hidden" }}> <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
{/* Header */} {/* Header */}
<View style={[styles.row, styles.tableHeader]}> <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.headerText]}>Trạng thái</Text>
<Text style={[styles.cell, styles.right, styles.headerText]}>
Thao tác
</Text>
</View> </View>
{/* Body */} {/* Body */}
{data.map((item) => ( {data.map((item) => (
<View key={item.id} style={styles.row}> <View key={item.id} style={styles.row}>
{/* Cột STT */} {/* 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 */} {/* Cột Trạng thái */}
<View style={[styles.cell, styles.statusContainer]}> <View style={[styles.cell, styles.statusContainer]}>
<View style={styles.statusDot} /> <View style={styles.statusDot} />
<Text style={styles.statusText}>{item.trangThai}</Text> <Text style={styles.statusText}>{item.trangThai}</Text>
</View> </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>
))} ))}
</Animated.View> </Animated.View>

17
components/tripInfo/TripCostTable.tsx
View File

@@ -1,13 +1,6 @@
import { IconSymbol } from "@/components/ui/icon-symbol"; import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { import { Animated, Text, TouchableOpacity, View } from "react-native";
Animated,
Platform,
Text,
TouchableOpacity,
UIManager,
View,
} from "react-native";
import styles from "./style/TripCostTable.styles"; import styles from "./style/TripCostTable.styles";
// --------------------------- // ---------------------------
@@ -65,14 +58,6 @@ const data: CostItem[] = [
// --------------------------- // ---------------------------
const TripCostTable: React.FC = () => { const TripCostTable: React.FC = () => {
// Enable LayoutAnimation for Android
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const [collapsed, setCollapsed] = useState(true); const [collapsed, setCollapsed] = useState(true);
const [contentHeight, setContentHeight] = useState<number>(0); const [contentHeight, setContentHeight] = useState<number>(0);
const animatedHeight = useRef(new Animated.Value(0)).current; const animatedHeight = useRef(new Animated.Value(0)).current;

13
components/tripInfo/style/NetListTable.styles.ts
View File

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