feat: fixes

2025-12-10 11:52:25 +01:00
parent d92303dd8a
commit bff35bb118
7 changed files with 348 additions and 15 deletions
@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from "react";
+import { Modal, View, Text, StyleSheet, ScrollView, Pressable } from "react-native";
+import { Palette, gutters } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import GradientButton from "../GradientButton";
+import BorderGradientButton from "../BorderGradientButton";
+
+const WebDateModal = ({ visible, onClose, onValidate, initialDate }) => {
+    const currentYear = new Date().getFullYear();
+    const [day, setDay] = useState(initialDate ? initialDate.getDate() : 1);
+    const [month, setMonth] = useState(initialDate ? initialDate.getMonth() : 0);
+    const [year, setYear] = useState(initialDate ? initialDate.getFullYear() : currentYear - 18);
+
+    useEffect(() => {
+        if (visible && initialDate) {
+            setDay(initialDate.getDate());
+            setMonth(initialDate.getMonth());
+            setYear(initialDate.getFullYear());
+        } else if (visible && !initialDate) {
+            setYear(currentYear - 18); // Default to 18 years ago
+        }
+    }, [visible, initialDate]);
+
+    const days = Array.from({ length: 31 }, (_, i) => i + 1);
+    const months = [
+        "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+        "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
+    ];
+    const years = Array.from({ length: 100 }, (_, i) => currentYear - i);
+
+    const renderPickerColumn = (data, selectedValue, onSelect, getLabel = (item) => item, getValue = (item, index) => item) => (
+        <View style={styles.column}>
+            <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>
+                {data.map((item, index) => {
+                    const value = getValue(item, index);
+                    const isSelected = selectedValue === value;
+                    return (
+                        <Pressable
+                            key={index}
+                            onPress={() => onSelect(value)}
+                            style={[styles.item, isSelected && styles.selectedItem]}
+                        >
+                            <Text style={[styles.itemText, isSelected && styles.selectedItemText]}>
+                                {getLabel(item)}
+                            </Text>
+                        </Pressable>
+                    );
+                })}
+            </ScrollView>
+        </View>
+    );
+
+    const handleValidate = () => {
+        const newDate = new Date(year, month, day);
+        onValidate(newDate);
+        onClose();
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            transparent={true}
+            animationType="fade"
+            onRequestClose={onClose}
+        >
+            <View style={styles.overlay}>
+                <View style={styles.modalContainer}>
+                    <Text style={styles.title}>Date de naissance</Text>
+                    <View style={styles.pickerContainer}>
+                        {renderPickerColumn(days, day, setDay)}
+                        {renderPickerColumn(months, month, setMonth, (m) => m, (_, i) => i)}
+                        {renderPickerColumn(years, year, setYear)}
+                    </View>
+                    <View style={styles.buttonContainer}>
+                        <BorderGradientButton
+                            title="Annuler"
+                            onPress={onClose}
+                            containerStyle={{ flex: 1 }}
+                        />
+                        <View style={{ width: 10 }} />
+                        <GradientButton
+                            title="Valider"
+                            onPress={handleValidate}
+                            containerStyle={{ flex: 1 }}
+                        />
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0,0,0,0.7)",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    modalContainer: {
+        width: 400,
+        backgroundColor: Palette.black,
+        borderRadius: 20,
+        padding: gutters,
+        borderWidth: 1,
+        borderColor: Palette.gray,
+        maxHeight: "80%",
+    },
+    title: {
+        color: Palette.white,
+        fontFamily: FONT_FAMILY.InterSemiBold,
+        fontSize: 18,
+        textAlign: "center",
+        marginBottom: 20,
+    },
+    pickerContainer: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        height: 200,
+        marginBottom: 20,
+    },
+    column: {
+        flex: 1,
+        borderWidth: 1,
+        borderColor: Palette.transparentPrimary,
+        borderRadius: 8,
+        marginHorizontal: 4,
+        backgroundColor: Palette.glass,
+    },
+    scrollContent: {
+        paddingVertical: 10,
+    },
+    item: {
+        paddingVertical: 8,
+        alignItems: "center",
+    },
+    selectedItem: {
+        backgroundColor: Palette.primary,
+    },
+    itemText: {
+        color: Palette.gray,
+        fontFamily: FONT_FAMILY.InterRegular,
+        fontSize: 16,
+    },
+    selectedItemText: {
+        color: Palette.white,
+        fontFamily: FONT_FAMILY.InterSemiBold,
+    },
+    buttonContainer: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+});
+
+export default WebDateModal;