Discussion :

[pierrot10]

Bonjour à tous,

J'essaye de mettre ceci en place react-native-ui-datepicker

J'y ai réussi dans mon fichier station.tsx sans trop de problèmes de cette manière

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
import DatePicker , {DateType, useDefaultStyles} from 'react-native-ui-datepicker';
export default function Station(){
 
    const colors = useThemeColors()
 
    /* SelectDate / Calendar */
    const today = dayjs().format("YYYY-MM-DD");
 
    const defaultStyles = useDefaultStyles();
 
    const [dateRange, setDateRange] = useState<{
        startDate: DateType;
        endDate: DateType;
      }>({ startDate: dayjs(), endDate: dayjs().add(3, 'days') });
 
    useEffect(()=>{
        console.info("[ID] UseEffect")
        //console.info("> range: " + dayjs(dateRange.startDate).format("YYYY-MM-DD") + ' > ' + dayjs(dateRange.endDate).format("YYYY-MM-DD"))
        return () => {
            console.info("[id] Clean useEffect")
        }
    })
 
 
return(
 
 <View style={styles.dateUiContainer}>
                    <DatePicker
                            mode="range"
                            startDate={dateRange.startDate}
                            endDate={dateRange.endDate}
                            onChange={event => setDateRange(event)}
                            //style={{borderColor:'blue', borderWidth:1}}
                            styles={defaultStyles}
                            firstDayOfWeek={1}
                            min={0}
                            max={3}
                        />
                    <Button title="Fermer" />
                </View>
   )
}

Je souhaiterais mettre ce calendrier dans un components pour qu'il s'affiche dans un modal, mais aussi pour pouvoir le rapoeler sur une autre vue.

J'ai donc modifié ainsi et la commence mes problèmes

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
import DatePicker , {DateType, useDefaultStyles} from 'react-native-ui-datepicker';
import { SelectDate } from "@/components/SelectDate";
 
export default function Station(){
 
  const [dateRange, setDateRange] = useState<{
        startDate: DateType;
        endDate: DateType;
      }>({ startDate: dayjs(), endDate: dayjs().add(3, 'days') });
 
  return(
   <SelectDate styled={styles.selectDate} dateRange={dateRange} onChange={setDateRange} />
  )
}

Ici, j'ai déjà un problème, mais je pense que cela vient de mon compents et c'est la que nait ma question, car je ne sais pas comment transmettre les date sélectionnées à ma vue, dans setRangeDate



J'ai donc créé un components /componets/SelectDate.tsx
(je précise que le modal fonctionne)

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
import { useThemeColors } from "@/hooks/useThemeColors";
import FontAwesome from '@expo/vector-icons/FontAwesome6';
import React, { useRef, useEffect, useState } from "react";
import { Modal, ViewStyle, StyleSheet, Image, Text, View, Pressable, Button, Dimensions } from "react-native";
import dayjs from 'dayjs'
import DatePicker , {DateType, useDefaultStyles} from 'react-native-ui-datepicker';
import { Row } from "./Row";
 
type Props = {
    styled?: ViewStyle,
     dateRange:{
        startDate:DateType,
        endDate:DateType,
    },
    latestMeasure?: string,
    onChange?: (event:DateType) => void
}
 
// Je ne me suis pas encore pencher sur onChange, mais ca bugera car plus bas on voit  onChange={event => setDateRange(event)}
 
export function SelectDate({styled, dateRange, latestMeasure, onChange}:Props){
const colors = useThemeColors()
    const buttonRef = useRef<View>(null)
    const [isModalVisible, setModalVisibility] = useState(false)
    const [position, setPosition] = useState<null | {top: number, right: number}>(null)
 
    const defaultStyles = useDefaultStyles();
 
    const onButtonPress = () => {
        buttonRef.current?.measureInWindow((x, y, width, height) => {
            setPosition({
                top: y + height + 10,
                right: Dimensions.get("window").width - x - width,
            })
            setModalVisibility(true)
        })
    }
    const onClose = () => {
        setModalVisibility(false)
    }
 
    return (
        <>
        <Row style={styled}>
            <Pressable onPress={onButtonPress}>
                <View
                    ref={buttonRef} 
                    style={[styles.button, {backgroundColor: colors.grayWhite}]}
                >
                    <FontAwesome name={'calendar'} size={20} color={colors.greenDark} />
                </View>
            </Pressable>
        </Row>
 
        <Modal
            animationType="fade"
            transparent
            visible={isModalVisible}
            onRequestClose={onClose}
        >
            <Pressable style={styles.backdrop} onPress={onClose} />
            <View style={[styles.popup, {backgroundColor: colors.tint, ...position}]}>
 
                <View style={styles.dateUiContainer}>
                    <DatePicker
                        mode="range"
                        startDate={dateRange.startDate}
                        endDate={dateRange.endDate}
                        onChange={event => onChange}
                        //style={{borderColor:'blue', borderWidth:1}}
                        styles={defaultStyles}
                        firstDayOfWeek={1}
                        min={0}
                        max={3}
                    />
                    <Button title="Fermer" />
 
                </View>
            </View>
 
        </Modal>
        </>
    )

J'ai encore du mal à comprendre comment ajuster le type de mes variable en fonction de ce qu'elle passe/hérite

Je vous remercie pleinement

[pierrot10]

Je pense avoir touver la solution. Qu'en pensez-vous? Est-ce une bonne manière de procéder?
Voici:

Premièrement, ma page station.tsx

Code typecsript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
// Je mets que les plus importantes qui concerne le sujet
import dayjs from 'dayjs'
import DatePicker , {DateType, useDefaultStyles} from 'react-native-ui-datepicker';
import { SelectDate } from "@/components/SelectDate";
 
 
export default function Station(){
 
   const [dateRange, setDateRange] = useState<{
        startDate: DateType;
        endDate: DateType;
    }>({ startDate: dayjs().subtract(1, 'days'), endDate: dayjs() });
 
   return(
      <SelectDate styled={styles.selectDate} dateRange={dateRange} onChange={setDateRange} />
   )
}

Je passe donc la date d'ajourd'hui - celle de un jours suivante dans dateRange

A savoir avant: Dans mon application, j'utilise @tanstack/react-query pour collecter les données d'une base de donnée. Avec ceci, j'affiche les résultats dans des graphiques
Il ne faut pas que lorsque je sélectionne des dates, que la page se rafraichi à cause du QueryKey (dateRange) car dès que dateRange change, useQuery rentre en action.

Code tyoescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 const {data, isLoading, error} = useQuery({
        queryKey: ['station', params.id, dateRange],
        queryFn: () => fetchStations(params.id, dayjs(dateRange.startDate).format("YYYY-MM-DD"), dayjs(dateRange.endDate).format("YYYY-MM-DD"))
    })

Je ne vais pas expliquer ce code ci-dessus, car il est hors sujet

Donc, pour éviter ceci, dans mon component selectDate.tsx, je défini un autre state qui va récupérer les dates de ma vue principale

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const [dates, setDates] = useState<{
            startDate: DateType;
            endDate: DateType;
          }>({ startDate: dateRange.startDate, endDate: dateRange.endDate });

Puis dans mon DatePicker, je mets à jour Dates

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

onChange={event => setDates(event)}

Puis quand je ferme mon calendrier, soit le modal (ou popup), j'envoie la valeur de Dates à ma vue principale, et @tanstack/react-query rentre en action pour faire ma requête, car dateRange est modifié

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const onClose = () => {
        onChange(dates)
        setModalVisibility(false)
    }

Qu'en pensez-vous? Est-ce que c'est bien fait comme cela?

Voici le code de mon components
selectDate.tsx

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
import { useThemeColors } from "@/hooks/useThemeColors";
import FontAwesome from '@expo/vector-icons/FontAwesome6';
import React, { useRef, useEffect, useState } from "react";
import { Modal, ViewStyle, StyleSheet, View, Pressable, Button } from "react-native";
import dayjs from 'dayjs'
import DatePicker , {DateType, useDefaultStyles} from 'react-native-ui-datepicker';
import { Row } from "./Row";
 
type Props = {
    styled: ViewStyle,
    dateRange:{
        startDate:DateType,
        endDate:DateType,
    },
    latestMeasure?: string,
    onChange: (event:any) => void
}
 
export function SelectDate({styled, dateRange, latestMeasure, onChange}:Props){
 
    const colors = useThemeColors()
    const buttonRef = useRef<View>(null)
    const [isModalVisible, setModalVisibility] = useState(false)
    const [position, setPosition] = useState<null | {top: number, right: number}>(null)
 
    const defaultStyles = useDefaultStyles();
 
 
    const [dates, setDates] = useState<{
            startDate: DateType;
            endDate: DateType;
          }>({ startDate: dateRange.startDate, endDate: dateRange.endDate });
 
    useEffect(()=>{
        console.info("[SelectDate] UseEffect")
        console.info("> range: " + dayjs(dates.startDate).format("YYYY-MM-DD") + ' > ' + dayjs(dates.endDate).format("YYYY-MM-DD"))
        return () => {
            console.info("[SelectDate] Clean useEffect")
        }
    })
 
    const onButtonPress = () => {
        buttonRef.current?.measureInWindow((x, y, width, height) => {
            setPosition({
                top: y + height + 100,
                right: 0,
            })
            setModalVisibility(true)
        })
    }
    const onClose = () => {
        onChange(dates)
        setModalVisibility(false)
    }
 
 
 
    return (
        <>
        <Row style={styled}>
            <Pressable onPress={onButtonPress}>
                <View
                    ref={buttonRef} 
                    style={[styles.buttonCalendarIcon, {backgroundColor: colors.grayWhite}]}
                >
                    <FontAwesome name={'calendar-check'} size={20} color={colors.greenDark} />
                </View>
            </Pressable>
        </Row>
        <Modal
            animationType="fade"
            transparent
            visible={isModalVisible}
            onRequestClose={onClose}
        >
            <Pressable style={styles.backdrop} onPress={onClose} />
            <View style={[styles.popup, {backgroundColor: colors.tint, ...position}]}>
                <View style={styles.dateUiContainer}>
                    <DatePicker
                        mode="range"
                        startDate={dates.startDate}
                        endDate={dates.endDate}
                        onChange={event => setDates(event)}
                        //style={{borderColor:'blue', borderWidth:1}}
                        styles={defaultStyles}
                        firstDayOfWeek={1}
                        min={0}
                        max={3}
                    />
                    <View style={styles.buttonCalendarClose}>
                        <Button onPress={onClose} color={colors.white} title="Close" />
                    </View>
                </View>
            </View>
 
        </Modal>
        </>
    )
}