104 lines
4.0 KiB
JavaScript
104 lines
4.0 KiB
JavaScript
import React, { useMemo, useState } from 'react';
|
|
import { Modal, Pressable, Text, View } from 'react-native';
|
|
import Ionicons from '@expo/vector-icons/Ionicons';
|
|
import { styles } from '../styles';
|
|
import { cn } from '../utils/cn';
|
|
import { todayYMD } from '../utils/date';
|
|
|
|
const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
|
|
|
|
function toYMD(date) {
|
|
const y = date.getFullYear();
|
|
const m = `${date.getMonth() + 1}`.padStart(2, '0');
|
|
const d = `${date.getDate()}`.padStart(2, '0');
|
|
return `${y}-${m}-${d}`;
|
|
}
|
|
|
|
function parseFromYMD(value) {
|
|
if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return new Date();
|
|
const date = new Date(`${value}T00:00:00`);
|
|
return Number.isNaN(date.getTime()) ? new Date() : date;
|
|
}
|
|
|
|
function monthLabel(date) {
|
|
return date.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
|
|
}
|
|
|
|
function buildMonthGrid(viewDate) {
|
|
const first = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
|
|
const startWeekday = (first.getDay() + 6) % 7;
|
|
const daysInMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0).getDate();
|
|
|
|
const cells = [];
|
|
for (let i = 0; i < startWeekday; i += 1) cells.push(null);
|
|
for (let day = 1; day <= daysInMonth; day += 1) {
|
|
cells.push(new Date(viewDate.getFullYear(), viewDate.getMonth(), day));
|
|
}
|
|
|
|
while (cells.length % 7 !== 0) cells.push(null);
|
|
return cells;
|
|
}
|
|
|
|
export default function DatePickerModal({ visible, value, onClose, onSelect, title = 'Pick date' }) {
|
|
const [viewDate, setViewDate] = useState(parseFromYMD(value || todayYMD()));
|
|
|
|
const grid = useMemo(() => buildMonthGrid(viewDate), [viewDate]);
|
|
const selected = value || todayYMD();
|
|
|
|
const goMonth = (diff) => {
|
|
setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + diff, 1));
|
|
};
|
|
|
|
return (
|
|
<Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
|
|
<View className={styles.dateModalBackdrop}>
|
|
<View className={styles.dateModalCard}>
|
|
<View className={styles.sectionHeader}>
|
|
<View className={styles.sectionHeaderLeft}>
|
|
<View className={styles.sectionHeaderIconWrap}>
|
|
<Ionicons name="calendar-outline" size={16} color="#d4d4d8" />
|
|
</View>
|
|
<Text className={styles.cardTitle}>{title}</Text>
|
|
</View>
|
|
<Pressable className={styles.secondaryBtnTight} onPress={onClose}>
|
|
<View className={styles.buttonContent}>
|
|
<Ionicons name="close" size={14} color="#f4f4f5" />
|
|
<Text className={styles.secondaryBtnText}>Close</Text>
|
|
</View>
|
|
</Pressable>
|
|
</View>
|
|
|
|
<View className={styles.calendarHeader}>
|
|
<Pressable className={styles.calendarNavBtn} onPress={() => goMonth(-1)}>
|
|
<Ionicons name="chevron-back" size={18} color="#e4e4e7" />
|
|
</Pressable>
|
|
<Text className={styles.calendarMonthText}>{monthLabel(viewDate)}</Text>
|
|
<Pressable className={styles.calendarNavBtn} onPress={() => goMonth(1)}>
|
|
<Ionicons name="chevron-forward" size={18} color="#e4e4e7" />
|
|
</Pressable>
|
|
</View>
|
|
|
|
<View className={styles.calendarWeekRow}>
|
|
{WEEKDAYS.map((w) => (
|
|
<Text key={w} className={styles.calendarWeekday}>{w}</Text>
|
|
))}
|
|
</View>
|
|
|
|
<View className={styles.calendarGrid}>
|
|
{grid.map((cell, idx) => {
|
|
if (!cell) return <View key={`empty-${idx}`} className={styles.calendarCell} />;
|
|
const ymd = toYMD(cell);
|
|
const isSelected = ymd === selected;
|
|
return (
|
|
<Pressable key={ymd} className={cn(styles.calendarCell, isSelected && styles.calendarCellActive)} onPress={() => onSelect(ymd)}>
|
|
<Text className={cn(styles.calendarCellText, isSelected && styles.calendarCellTextActive)}>{cell.getDate()}</Text>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}
|