346 lines
10 KiB
TypeScript
346 lines
10 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
Platform,
|
|
Modal,
|
|
} from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import DateTimePicker from "@react-native-community/datetimepicker";
|
|
import { useI18n } from "@/hooks/use-i18n";
|
|
import { useThemeContext } from "@/hooks/use-theme-context";
|
|
|
|
interface TripDurationPickerProps {
|
|
startDate: Date | null;
|
|
endDate: Date | null;
|
|
onStartDateChange: (date: Date | null) => void;
|
|
onEndDateChange: (date: Date | null) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export default function TripDurationPicker({
|
|
startDate,
|
|
endDate,
|
|
onStartDateChange,
|
|
onEndDateChange,
|
|
disabled = false,
|
|
}: TripDurationPickerProps) {
|
|
const { t } = useI18n();
|
|
const { colors, colorScheme } = useThemeContext();
|
|
const [showStartPicker, setShowStartPicker] = useState(false);
|
|
const [showEndPicker, setShowEndPicker] = useState(false);
|
|
|
|
// Temp states to hold the picker value before confirming
|
|
const [tempStartDate, setTempStartDate] = useState<Date>(new Date());
|
|
const [tempEndDate, setTempEndDate] = useState<Date>(new Date());
|
|
|
|
const formatDate = (date: Date | null) => {
|
|
if (!date) return "";
|
|
const day = date.getDate().toString().padStart(2, "0");
|
|
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
|
const year = date.getFullYear();
|
|
return `${day}/${month}/${year}`;
|
|
};
|
|
|
|
const handleOpenStartPicker = () => {
|
|
const today = new Date();
|
|
const dateToUse = startDate || today;
|
|
// If no date selected, immediately set to today
|
|
if (!startDate) {
|
|
onStartDateChange(today);
|
|
}
|
|
// Always set tempStartDate to the date we're using (today if no date was selected)
|
|
setTempStartDate(dateToUse);
|
|
setShowStartPicker(true);
|
|
};
|
|
|
|
const handleOpenEndPicker = () => {
|
|
const today = new Date();
|
|
const dateToUse = endDate || today;
|
|
// If no date selected, immediately set to today
|
|
if (!endDate) {
|
|
onEndDateChange(today);
|
|
}
|
|
// Always set tempEndDate to the date we're using (today if no date was selected)
|
|
setTempEndDate(dateToUse);
|
|
setShowEndPicker(true);
|
|
};
|
|
|
|
const handleStartDateChange = (event: any, selectedDate?: Date) => {
|
|
if (Platform.OS === "android") {
|
|
setShowStartPicker(false);
|
|
if (event.type === "set" && selectedDate) {
|
|
onStartDateChange(selectedDate);
|
|
}
|
|
} else if (selectedDate) {
|
|
// For iOS, update both temp and actual date immediately
|
|
setTempStartDate(selectedDate);
|
|
onStartDateChange(selectedDate);
|
|
}
|
|
};
|
|
|
|
const handleEndDateChange = (event: any, selectedDate?: Date) => {
|
|
if (Platform.OS === "android") {
|
|
setShowEndPicker(false);
|
|
if (event.type === "set" && selectedDate) {
|
|
onEndDateChange(selectedDate);
|
|
}
|
|
} else if (selectedDate) {
|
|
// For iOS, update both temp and actual date immediately
|
|
setTempEndDate(selectedDate);
|
|
onEndDateChange(selectedDate);
|
|
}
|
|
};
|
|
|
|
const handleConfirmStartDate = () => {
|
|
setShowStartPicker(false);
|
|
};
|
|
|
|
const handleConfirmEndDate = () => {
|
|
setShowEndPicker(false);
|
|
};
|
|
|
|
const themedStyles = {
|
|
label: { color: colors.text },
|
|
dateInput: {
|
|
backgroundColor: colors.card,
|
|
borderColor: colors.border,
|
|
},
|
|
dateText: { color: colors.text },
|
|
placeholder: { color: colors.textSecondary },
|
|
pickerContainer: { backgroundColor: colors.card },
|
|
pickerHeader: { borderBottomColor: colors.border },
|
|
pickerTitle: { color: colors.text },
|
|
cancelButton: { color: colors.textSecondary },
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={[styles.label, themedStyles.label]}>
|
|
{t("diary.tripDuration")}
|
|
</Text>
|
|
<View style={styles.dateRangeContainer}>
|
|
{/* Start Date */}
|
|
<View style={styles.dateSection}>
|
|
<Text style={[styles.subLabel, themedStyles.placeholder]}>
|
|
{t("diary.startDate")}
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={[styles.dateInput, themedStyles.dateInput]}
|
|
onPress={disabled ? undefined : handleOpenStartPicker}
|
|
activeOpacity={disabled ? 1 : 0.7}
|
|
disabled={disabled}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.dateText,
|
|
themedStyles.dateText,
|
|
!startDate && themedStyles.placeholder,
|
|
]}
|
|
>
|
|
{startDate ? formatDate(startDate) : t("diary.selectDate")}
|
|
</Text>
|
|
{!disabled && (
|
|
<Ionicons
|
|
name="calendar-outline"
|
|
size={20}
|
|
color={colors.textSecondary}
|
|
/>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* End Date */}
|
|
<View style={styles.dateSection}>
|
|
<Text style={[styles.subLabel, themedStyles.placeholder]}>
|
|
{t("diary.endDate")}
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={[styles.dateInput, themedStyles.dateInput]}
|
|
onPress={disabled ? undefined : handleOpenEndPicker}
|
|
activeOpacity={disabled ? 1 : 0.7}
|
|
disabled={disabled}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.dateText,
|
|
themedStyles.dateText,
|
|
!endDate && themedStyles.placeholder,
|
|
]}
|
|
>
|
|
{endDate ? formatDate(endDate) : t("diary.selectDate")}
|
|
</Text>
|
|
{!disabled && (
|
|
<Ionicons
|
|
name="calendar-outline"
|
|
size={20}
|
|
color={colors.textSecondary}
|
|
/>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Start Date Picker */}
|
|
{showStartPicker && (
|
|
<Modal transparent animationType="fade" visible={showStartPicker}>
|
|
<View style={styles.modalOverlay}>
|
|
<View style={[styles.pickerContainer, themedStyles.pickerContainer]}>
|
|
<View style={[styles.pickerHeader, themedStyles.pickerHeader]}>
|
|
<TouchableOpacity onPress={() => setShowStartPicker(false)}>
|
|
<Text style={[styles.cancelButton, themedStyles.cancelButton]}>
|
|
{t("common.cancel")}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<Text style={[styles.pickerTitle, themedStyles.pickerTitle]}>
|
|
{t("diary.selectStartDate")}
|
|
</Text>
|
|
<TouchableOpacity onPress={handleConfirmStartDate}>
|
|
<Text style={styles.doneButton}>{t("common.done")}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<DateTimePicker
|
|
value={tempStartDate}
|
|
mode="date"
|
|
display={Platform.OS === "ios" ? "spinner" : "default"}
|
|
onChange={handleStartDateChange}
|
|
maximumDate={endDate || undefined}
|
|
themeVariant={colorScheme}
|
|
textColor={colors.text}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
)}
|
|
|
|
{/* End Date Picker */}
|
|
{showEndPicker && (
|
|
<Modal transparent animationType="fade" visible={showEndPicker}>
|
|
<View style={styles.modalOverlay}>
|
|
<View style={[styles.pickerContainer, themedStyles.pickerContainer]}>
|
|
<View style={[styles.pickerHeader, themedStyles.pickerHeader]}>
|
|
<TouchableOpacity onPress={() => setShowEndPicker(false)}>
|
|
<Text style={[styles.cancelButton, themedStyles.cancelButton]}>
|
|
{t("common.cancel")}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<Text style={[styles.pickerTitle, themedStyles.pickerTitle]}>
|
|
{t("diary.selectEndDate")}
|
|
</Text>
|
|
<TouchableOpacity onPress={handleConfirmEndDate}>
|
|
<Text style={styles.doneButton}>{t("common.done")}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<DateTimePicker
|
|
value={tempEndDate}
|
|
mode="date"
|
|
display={Platform.OS === "ios" ? "spinner" : "default"}
|
|
onChange={handleEndDateChange}
|
|
minimumDate={startDate || undefined}
|
|
themeVariant={colorScheme}
|
|
textColor={colors.text}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginBottom: 20,
|
|
},
|
|
label: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
marginBottom: 12,
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
subLabel: {
|
|
fontSize: 14,
|
|
marginBottom: 6,
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
dateRangeContainer: {
|
|
flexDirection: "row",
|
|
gap: 12,
|
|
},
|
|
dateSection: {
|
|
flex: 1,
|
|
},
|
|
dateInput: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
borderWidth: 1,
|
|
borderRadius: 8,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 12,
|
|
},
|
|
dateText: {
|
|
fontSize: 15,
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
modalOverlay: {
|
|
flex: 1,
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
justifyContent: "flex-end",
|
|
},
|
|
pickerContainer: {
|
|
borderTopLeftRadius: 20,
|
|
borderTopRightRadius: 20,
|
|
paddingBottom: 20,
|
|
},
|
|
pickerHeader: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 16,
|
|
borderBottomWidth: 1,
|
|
},
|
|
pickerTitle: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
cancelButton: {
|
|
fontSize: 16,
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
doneButton: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
color: "#3B82F6",
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
});
|