Initial commit
This commit is contained in:
180
components/SupplierFilter.tsx
Normal file
180
components/SupplierFilter.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import { Supplier } from '@/types/types';
|
||||
import api from '@/utils/api';
|
||||
import { ChevronDown, Search, X } from 'lucide-react-native';
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { Modal, FlatList, Text, TextInput, TouchableOpacity, View, Keyboard, KeyboardEvent, Platform, InteractionManager, ActivityIndicator } from 'react-native';
|
||||
|
||||
interface SupplierFilterProps {
|
||||
selectedSupplierId: any;
|
||||
onSupplierSelect: (supplierId: any) => void;
|
||||
textColor?: string;
|
||||
}
|
||||
|
||||
export default function SupplierFilter({ selectedSupplierId, onSupplierSelect, textColor }: SupplierFilterProps) {
|
||||
const [showPicker, setShowPicker] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [keyboardHeight, setKeyboardHeight] = useState(0);
|
||||
const [suppliers, setSuppliers] = useState<Supplier[]>([]);
|
||||
const [isFetching, setIsFetching] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSuppliers = async () => {
|
||||
try {
|
||||
const res = await api.get('/registry/get-suppliers');
|
||||
if (res.data?.success) {
|
||||
setSuppliers(res.data.suppliers || []);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching suppliers:', err);
|
||||
} finally {
|
||||
setIsFetching(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Delay the heavy API call and state update until the modal animation finishes
|
||||
InteractionManager.runAfterInteractions(() => {
|
||||
fetchSuppliers();
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Keyboard height listener
|
||||
useEffect(() => {
|
||||
const showSubscription = Keyboard.addListener(
|
||||
Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
|
||||
(e: KeyboardEvent) => setKeyboardHeight(e.endCoordinates.height)
|
||||
);
|
||||
const hideSubscription = Keyboard.addListener(
|
||||
Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
|
||||
() => setKeyboardHeight(0)
|
||||
);
|
||||
|
||||
return () => {
|
||||
showSubscription.remove();
|
||||
hideSubscription.remove();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Reset search query every time modal is opened
|
||||
useEffect(() => {
|
||||
if (showPicker) {
|
||||
setSearchQuery('');
|
||||
}
|
||||
}, [showPicker]);
|
||||
|
||||
const filteredSuppliers = useMemo(() => {
|
||||
if (!showPicker) return [];
|
||||
if (!searchQuery.trim()) return suppliers;
|
||||
const lowerQuery = searchQuery.toLowerCase();
|
||||
return suppliers.filter(s => s.label.toLowerCase().includes(lowerQuery));
|
||||
}, [suppliers, searchQuery, showPicker]);
|
||||
|
||||
const selectedSupplierLabel = selectedSupplierId
|
||||
? suppliers.find(s => s.code === selectedSupplierId)?.label || 'Fornitore Selezionato'
|
||||
: 'Tutti i fornitori';
|
||||
|
||||
return (
|
||||
<View className="mb-8">
|
||||
<Text className={`text-lg font-bold ${textColor || 'text-gray-700'} mb-3`}>Fornitore</Text>
|
||||
<View className="flex-row items-center gap-3">
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowPicker(true)}
|
||||
className="flex-1 flex-row items-center justify-between bg-white px-5 py-4 rounded-2xl border border-gray-200 shadow-sm"
|
||||
>
|
||||
<Text className={`font-medium text-base flex-1 mr-2 ${selectedSupplierId ? 'text-gray-800' : 'text-gray-500'}`} numberOfLines={1}>
|
||||
{selectedSupplierLabel}
|
||||
</Text>
|
||||
<ChevronDown size={20} color="#6b7280" pointerEvents="none" />
|
||||
</TouchableOpacity>
|
||||
|
||||
{selectedSupplierId !== null && (
|
||||
<TouchableOpacity
|
||||
onPress={() => onSupplierSelect(null)}
|
||||
className="bg-gray-50 p-4 rounded-2xl border border-gray-200 shadow-sm justify-center items-center"
|
||||
>
|
||||
<X size={22} color="#4b5563" pointerEvents="none" />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Nested Place Picker Modal */}
|
||||
<Modal visible={showPicker} transparent={true} animationType="fade" onRequestClose={() => setShowPicker(false)}>
|
||||
<TouchableOpacity
|
||||
activeOpacity={1}
|
||||
onPress={() => setShowPicker(false)}
|
||||
className="flex-1 bg-black/50 justify-end"
|
||||
style={{ paddingBottom: keyboardHeight }}
|
||||
>
|
||||
<View className="bg-white rounded-t-3xl p-5 max-h-[70%]" onStartShouldSetResponder={() => true}>
|
||||
<View className="flex-row justify-between items-center mb-4 border-b border-gray-100 pb-4">
|
||||
<Text className="text-xl font-bold text-gray-800">Seleziona Fornitore</Text>
|
||||
<TouchableOpacity onPress={() => setShowPicker(false)} className="p-2 bg-gray-100 rounded-full active:bg-gray-200">
|
||||
<X size={20} color="#4b5563" pointerEvents="none" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Search Bar */}
|
||||
<View className="bg-gray-100 flex-row items-center px-4 py-3 rounded-2xl mb-4 border border-gray-200 focus:border-[#1071C2]">
|
||||
<Search size={20} color="#9ca3af" />
|
||||
<TextInput
|
||||
className="flex-1 ml-3 text-base text-gray-800"
|
||||
placeholder="Cerca fornitore..."
|
||||
value={searchQuery}
|
||||
onChangeText={setSearchQuery}
|
||||
placeholderTextColor="#9ca3af"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
{searchQuery.length > 0 && (
|
||||
<TouchableOpacity onPress={() => setSearchQuery('')} className="p-1">
|
||||
<X size={18} color="#6b7280" />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<FlatList
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingBottom: 30 }}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
data={filteredSuppliers}
|
||||
keyExtractor={(item, index) => item.code?.toString() ?? `no-code-${index}`}
|
||||
ListHeaderComponent={() => (
|
||||
searchQuery.trim() === '' ? (
|
||||
<TouchableOpacity
|
||||
className={`py-4 px-4 rounded-xl flex-row justify-between items-center mb-2 ${selectedSupplierId === null ? 'bg-blue-50' : ''}`}
|
||||
onPress={() => { onSupplierSelect(null); setShowPicker(false); }}
|
||||
>
|
||||
<Text className={`text-lg ${selectedSupplierId === null ? 'font-bold text-[#1071C2]' : 'text-gray-700'}`}>
|
||||
Tutti i fornitori
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
) : null
|
||||
)}
|
||||
ListEmptyComponent={() => (
|
||||
<View className="py-8 items-center">
|
||||
{isFetching ? (
|
||||
<ActivityIndicator size="large" color="#1071C2" />
|
||||
) : (
|
||||
<Text className="text-gray-500 font-medium text-center">Nessun fornitore trovato per "{searchQuery}"</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
initialNumToRender={15}
|
||||
maxToRenderPerBatch={20}
|
||||
windowSize={5}
|
||||
removeClippedSubviews={true}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
className={`py-4 px-4 rounded-xl flex-row justify-between items-center mb-2 ${selectedSupplierId === item.code ? 'bg-blue-50' : ''}`}
|
||||
onPress={() => { onSupplierSelect(item.code); setShowPicker(false); }}
|
||||
>
|
||||
<Text className={`text-lg ${selectedSupplierId === item.code ? 'font-bold text-[#1071C2]' : 'text-gray-700'}`}>
|
||||
{item.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user