65 lines
2.9 KiB
TypeScript
65 lines
2.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Modal, Text, TouchableOpacity, View } from 'react-native';
|
|
import { DateType } from 'react-native-ui-datepicker';
|
|
import { Check, X } from 'lucide-react-native';
|
|
import { AppDatePicker } from './AppDatePicker';
|
|
|
|
export const RangePickerModal = ({ visible, onClose, onApply }: any) => {
|
|
const [range, setRange] = useState<{
|
|
startDate: DateType;
|
|
endDate: DateType;
|
|
}>({ startDate: null, endDate: null });
|
|
|
|
const clearCalendar = () => {
|
|
setRange({ startDate: null, endDate: null });
|
|
onApply({ startDate: null, endDate: null });
|
|
onClose();
|
|
};
|
|
|
|
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" pointerEvents="none" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<AppDatePicker
|
|
mode="range"
|
|
startDate={range.startDate}
|
|
endDate={range.endDate}
|
|
onChange={(params) => setRange(params)}
|
|
timeZone='Europe/Rome'
|
|
/>
|
|
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
console.log("Data inizio: ", range.startDate?.toLocaleString());
|
|
console.log("Data fine: ", range.endDate?.toLocaleString());
|
|
onApply(range);
|
|
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" pointerEvents="none" />
|
|
<Text className="text-white font-bold text-lg ml-2">Applica Filtro</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={clearCalendar}
|
|
className="mt-2 bg-gray-200 rounded-xl py-4 flex-row justify-center items-center active:bg-gray-300"
|
|
>
|
|
<Text className="text-gray-700 font-bold text-lg ml-2">Reset</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}; |