62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
import React from "react";
|
|
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
|
|
import styles from "../../style/NetDetailModal.styles";
|
|
|
|
interface FishSelectDropdownProps {
|
|
options: Model.FishSpeciesResponse[];
|
|
selectedFishId: number | null;
|
|
isOpen: boolean;
|
|
onToggle: () => void;
|
|
onSelect: (value: Model.FishSpeciesResponse) => void;
|
|
zIndex: number;
|
|
styleOverride?: any;
|
|
}
|
|
|
|
export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
|
|
options,
|
|
selectedFishId,
|
|
isOpen,
|
|
onToggle,
|
|
onSelect,
|
|
zIndex,
|
|
styleOverride,
|
|
}) => {
|
|
const dropdownStyle = styleOverride || styles.optionsList;
|
|
const findFishNameById = (id: number | null) => {
|
|
const fish = options.find((item) => item.id === id);
|
|
return fish?.name || "Chọn cá";
|
|
};
|
|
const [selectedFish, setSelectedFish] =
|
|
React.useState<Model.FishSpeciesResponse | null>(null);
|
|
return (
|
|
<View style={{ zIndex }}>
|
|
<TouchableOpacity style={styles.selectButton} onPress={onToggle}>
|
|
<Text style={styles.selectButtonText}>
|
|
{findFishNameById(selectedFishId)}
|
|
</Text>
|
|
<IconSymbol
|
|
name={isOpen ? "chevron.up" : "chevron.down"}
|
|
size={16}
|
|
color="#666"
|
|
/>
|
|
</TouchableOpacity>
|
|
{isOpen && (
|
|
<ScrollView style={dropdownStyle} nestedScrollEnabled={true}>
|
|
{options.map((option, optIndex) => (
|
|
<TouchableOpacity
|
|
key={option.id || optIndex}
|
|
style={styles.optionItem}
|
|
onPress={() => onSelect(option)}
|
|
>
|
|
<Text style={styles.optionText}>
|
|
{findFishNameById(option.id)}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ScrollView>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|