leonardo/mariani_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add DatePicker and refactor some views layout

Browse Source
This commit is contained in:
leonardo
2025-12-09 13:06:35 +01:00
parent 2251c42ecf
commit abe14f4c3f
12 changed files with 379 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/RangePickerModal.tsx
View File

@ -1,16 +1,15 @@
import React, { useState, useEffect } from 'react';
import { Modal, Text, TouchableOpacity, View } from 'react-native';
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
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) => {
// 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]);
const defaultStyles = useDefaultStyles();
// const defaultClassNames = useDefaultClassNames();
const [range, setRange] = useState<{
startDate: DateType;
endDate: DateType;
}>({ startDate: undefined, endDate: undefined });
return (
<Modal
@ -30,19 +29,26 @@ export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: an
<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' }}
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={() => {
onApply(localRange);
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]"
@ -50,6 +56,16 @@ export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: an
<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>