73 lines
3.4 KiB
TypeScript
73 lines
3.4 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Alert, Modal, Text, TouchableOpacity, View } from 'react-native';
|
|
import DateTimePicker, { DateType, useDefaultStyles, useDefaultClassNames } from 'react-native-ui-datepicker';
|
|
import { Check, X } from 'lucide-react-native';
|
|
|
|
export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: any) => {
|
|
const defaultStyles = useDefaultStyles();
|
|
// const defaultClassNames = useDefaultClassNames();
|
|
const [range, setRange] = useState<{
|
|
startDate: DateType;
|
|
endDate: DateType;
|
|
}>({ startDate: undefined, endDate: undefined });
|
|
|
|
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"
|
|
startDate={range.startDate}
|
|
endDate={range.endDate}
|
|
onChange={(params) => setRange(params)}
|
|
timeZone='Europe/Rome'
|
|
locale='it'
|
|
styles={{
|
|
...defaultStyles,
|
|
selected: { backgroundColor: '#099499' }
|
|
}}
|
|
// classNames={{
|
|
// ...defaultClassNames,
|
|
// selected: 'bg-#099499'
|
|
// }}
|
|
/>
|
|
|
|
<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" />
|
|
<Text className="text-white font-bold text-lg ml-2">Applica Filtro</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
console.log("Reset pressed");
|
|
range.startDate = range.endDate = undefined;
|
|
// TODO: deselect dates from calendar
|
|
}}
|
|
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>
|
|
);
|
|
}; |