fermeture auto + composant selectChantier

components/chantierSummary.tsx

@@ -0,0 +1,61 @@
+import SelectChantier from '@/components/selectChantier';
+import SetStatus from '@/components/setStatus';
+import { ThemedView, } from '@/components/themed-view';
+import Constants from 'expo-constants'; //pour connaître la taille de la barre menu de l'OS en haut
+import React from 'react';
+import { StyleSheet, View, Image, ViewStyle, StyleProp } from 'react-native';
+import { ThemedText } from './themed-text';
+import { Chantier } from '@/class/class';
+
+
+type Props = {
+    data: {
+        chantier:Chantier|null;
+    }
+    style?: StyleProp<ViewStyle>;
+};
+
+export default function ChantierSummary({data,style , ...otherProps }: Props) {
+
+
+  return(
+    <View  style={style}>
+        {data.chantier ? (
+            <ThemedView lvl={4} style={styles.chantier}>
+                <View>
+                    <Image source={{ uri:"https://cdn.discordapp.com/attachments/1425108443571945644/1427207643180826757/raw.png?ex=69392bb2&is=6937da32&hm=dcc09e76d3dca89d2418947b46efbd38673b9dc559027724b2e51d493b173bc9&" /*chantier.urlImg*/ }} style={styles.image} />
+                </View>
+                <View>
+                    <ThemedText>{data.chantier.chef != null ? "true" : "false"}</ThemedText>
+                    <ThemedText>Adresse: {data.chantier.adresse}</ThemedText>
+                    <ThemedText>Chef de chantier: {data.chantier.chef.last_name}{" "}{data.chantier.chef.name}</ThemedText>
+                    <ThemedText>État: {data.chantier.etat}</ThemedText>
+                </View>
+            </ThemedView>
+        ) : 
+            <ThemedText>
+                Pas de chantier Selectionné
+            </ThemedText>
+        }
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  chantier: {
+    padding: 5,
+    //marginTop:5,
+    //margin:5,
+    borderRadius: 10,
+    //borderWidth: 1,
+    flexDirection: 'row',
+    height: 150,
+  },
+  image:{
+    margin:0,
+    width: 70,
+    height: 140,
+    borderRadius: 5,
+    marginRight: 10,
+  },
+});

components/selectChantier.tsx

@@ -20,6 +20,7 @@ import { ThemedTextInput } from "./themed-textinput";
 import { ThemedView } from "./themed-view";
 
 const screenHeight = Dimensions.get("window").height;
+const { width, height } = Dimensions.get("window");
 
 /*
 
@@ -80,12 +81,13 @@ export default function SelectChantier() {
 
   return (
     <Animated.View layout={LinearTransition.duration(200)} style={isOpen ? styles.windowOpean : styles.windowClose}>
+      {isOpen && (<Pressable style={styles.autoClose} onPress={() => setIsOpen(false)}/>)}
       <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
-        <ThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
+        <AnimatedThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
           <ThemedText style={styles.buttonText}>
-            {isOpen ? "Fermer" : "Chantier"}
+            {isOpen ? "Fermer" : (chantier!=null ? chantier.adresse : "Chantier")}
           </ThemedText>
-        </ThemedButton>
+        </AnimatedThemedButton>
         {isOpen && (
           <View style={styles.menu}>
             <ThemedTextInput lvl={1} border={4} style={styles.input} placeholder="Rechercher un chantier" value={search} onChangeText={setSearch}/>
@@ -118,12 +120,22 @@ const styles = StyleSheet.create({
     width: "100%",
     height: screenHeight / 2,
     padding: 10,
+    zIndex:1000,
   },
   window: {
     borderRadius: 15,
     height: "100%",
     //backgroundColor: '#00FF00',
     overflow: "hidden",
+  },
+    autoClose: {
+    
+    position: 'absolute',
+    top: -height,
+    left: -width,
+    width:width*2,
+    height:height*2,
+    //backgroundColor: 'rgba(255, 0, 0, 0.5)',
   },
   menu: {
     padding: 5,

components/setStatus.tsx

@@ -1,12 +1,11 @@
 import { useChantier } from '@/app/ContextChantier';
-import { useState } from 'react';
-import { Dimensions, LayoutAnimation, Pressable, StyleSheet, View } from 'react-native';
+import { useCallback, useState } from 'react';
+import { Dimensions, LayoutAnimation, Modal, Pressable, StyleSheet, View } from 'react-native';
 import Animated, { LinearTransition } from 'react-native-reanimated';
 import { ThemedButton } from './themed-button';
 import { ThemedText } from './themed-text';
 import { ThemedView } from "./themed-view";
 
-const screenHeight = Dimensions.get("window").height;
 const { width, height } = Dimensions.get("window");
 
 
@@ -15,6 +14,8 @@ export default function SetStatus() {
     const { chantier, setChantier} = useChantier();
     const [currentSatus, setCurrentSearch] = useState("En cours");
     const [isOpen,setIsOpen] = useState(false);
+    const [openConfirmation,setOpenConfirmation] = useState(false);
+
 
     const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
 
@@ -28,6 +29,7 @@ export default function SetStatus() {
     }
 
     function selectSatus(status: string): void {
+      setOpenConfirmation(true);
         setCurrentSearch(status);
         setIsOpen(false);
     }
@@ -47,25 +49,32 @@ export default function SetStatus() {
 
     return(
 
-        <Animated.View layout={LinearTransition.duration(200)} style={styles.windowBox}>
-          <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
-            <ThemedButton style={styles.button} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
-              <ThemedText style={styles.centeredText}>{currentSatus}</ThemedText>
-            </ThemedButton>
-            {isOpen &&
-              <View style={styles.menu}>
-                  <View style={styles.list}>
-                          
-                      {choices.map((str, index) => (
-                              str!==currentSatus && choice(str, index)
-                      ))}
+          
+          <Animated.View layout={LinearTransition.duration(200)} style={styles.windowBox}>
+            {isOpen && (<Pressable style={styles.autoClose} onPress={() => setIsOpen(false)}/>)}
+
+            <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
+              <ThemedButton style={styles.button} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
+                <ThemedText style={styles.centeredText}>{currentSatus}</ThemedText>
+              </ThemedButton>
+                {isOpen && (
+                  <>
+                  {//TODO : Modal pour confirmer la changement
+                  }
+                  <View style={styles.menu}>
+                    <View style={styles.list}>
+                            
+                        {choices.map((str, index) => (
+                                str!==currentSatus && choice(str, index)
+                        ))}
+                    </View>
                   </View>
-              </View>
-            }
+                  </>
+                )}
           </AnimatedThemedView>
         </Animated.View>
+      
     )
-    
 }
 
 const styles = StyleSheet.create({
@@ -76,12 +85,22 @@ const styles = StyleSheet.create({
     width:"30%",
     padding: 10,
     paddingLeft: 0,
-    overflow: 'hidden',
+    //overflow: 'hidden',
   },
   window:{
     borderRadius:15,
     //backgroundColor: '#00FF00',
     overflow: 'hidden',
+    position: 'relative',
+  },
+  autoClose: {
+    
+    position: 'absolute',
+    top: -height,
+    left: -width,
+    width:width*2,
+    height:height*2,
+    //backgroundColor: 'rgba(255, 0, 0, 0.5)',
   },
   menu:{
     padding:0,
@@ -90,7 +109,7 @@ const styles = StyleSheet.create({
   },
   list:{
     flex: 1,
-    overflow: 'hidden',
+    //overflow: 'hidden',
     borderRadius:10,
 
   },
@@ -107,6 +126,5 @@ const styles = StyleSheet.create({
   },
   centeredText:{
     textAlign: 'center',
-    fontSize: 13,
   }
 });