57 lines
2.6 KiB
TypeScript
57 lines
2.6 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Modal, Text, TouchableOpacity, View } from 'react-native';
|
|
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
|
|
import { Check, X } from 'lucide-react-native';
|
|
|
|
export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: any) => {
|
|
// Stato locale temporaneo per la selezione nel modale
|
|
const [localRange, setLocalRange] = useState(currentRange);
|
|
|
|
// Sincronizza lo stato locale quando il modale si apre
|
|
useEffect(() => {
|
|
if (visible) setLocalRange(currentRange);
|
|
}, [visible, currentRange]);
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
transparent={true}
|
|
animationType="fade"
|
|
onRequestClose={onClose}
|
|
>
|
|
<View className="flex-1 bg-black/60 justify-center items-center p-6">
|
|
<View className="bg-white rounded-[2rem] p-6 w-full max-w-sm shadow-2xl">
|
|
<View className="flex-row justify-between items-center mb-4">
|
|
<Text className="text-xl font-bold text-gray-800">Seleziona Periodo</Text>
|
|
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-50 rounded-full">
|
|
<X size={20} color="#4b5563" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<DateTimePicker
|
|
mode="range"
|
|
locale="it"
|
|
startDate={localRange.startDate}
|
|
endDate={localRange.endDate}
|
|
onChange={(params: any) => setLocalRange(params)}
|
|
// selectedItemColor="#099499"
|
|
// headerTextStyle={{ color: '#1f2937', fontWeight: 'bold', fontSize: 18 }}
|
|
// calendarTextStyle={{ color: '#374151' }}
|
|
// weekDaysTextStyle={{ color: '#9ca3af', fontWeight: 'bold' }}
|
|
/>
|
|
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
onApply(localRange);
|
|
onClose();
|
|
}}
|
|
className="mt-6 bg-[#099499] rounded-xl py-4 flex-row justify-center items-center active:bg-[#077d82]"
|
|
>
|
|
<Check size={20} color="white" className="mr-2" />
|
|
<Text className="text-white font-bold text-lg ml-2">Applica Filtro</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}; |