66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import { View, Text, StyleSheet, FlatList, Platform } from "react-native";
|
|
import { useThemeContext } from "@/hooks/use-theme-context";
|
|
import { useI18n } from "@/hooks/use-i18n";
|
|
import CrewCard from "./CrewCard";
|
|
|
|
interface CrewListProps {
|
|
crews: Model.TripCrews[];
|
|
onEdit?: (crew: Model.TripCrews) => void;
|
|
onDelete?: (crew: Model.TripCrews) => void;
|
|
}
|
|
|
|
export default function CrewList({ crews, onEdit, onDelete }: CrewListProps) {
|
|
const { colors } = useThemeContext();
|
|
const { t } = useI18n();
|
|
|
|
const renderItem = ({ item }: { item: Model.TripCrews }) => (
|
|
<CrewCard crew={item} onEdit={onEdit} onDelete={onDelete} />
|
|
);
|
|
|
|
const keyExtractor = (item: Model.TripCrews, index: number) =>
|
|
`${item.PersonalID}-${index}`;
|
|
|
|
const renderEmpty = () => (
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={[styles.emptyText, { color: colors.textSecondary }]}>
|
|
{t("diary.crew.noCrewMembers")}
|
|
</Text>
|
|
</View>
|
|
);
|
|
|
|
return (
|
|
<FlatList
|
|
data={crews}
|
|
renderItem={renderItem}
|
|
keyExtractor={keyExtractor}
|
|
ListEmptyComponent={renderEmpty}
|
|
showsVerticalScrollIndicator={false}
|
|
contentContainerStyle={styles.listContent}
|
|
scrollEnabled={false}
|
|
nestedScrollEnabled
|
|
/>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
listContent: {
|
|
paddingBottom: 20,
|
|
flexGrow: 1,
|
|
},
|
|
emptyContainer: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
paddingVertical: 60,
|
|
},
|
|
emptyText: {
|
|
fontSize: 16,
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
});
|