selection chantier (animation,correction) ; ajustement et amélioration du thème ; chantier provider

components/selectChantier.tsx

@@ -1,133 +1,152 @@
 import { useState } from 'react';
-import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View } from 'react-native';
+import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View, LayoutAnimation } from 'react-native';
 import { ThemedTextInput } from './themed-textinpute';
 import { ThemedView } from "./themed-view";
 import { ThemedText } from './themed-text';
 import { ThemedButton } from './themed-button';
 import { Chantier, Chef, exempleChantier } from '@/class/class';
-import {BlurView} from 'expo-blur';
 import { Dimensions } from "react-native";
+import Animated, { Layout,LinearTransition,Easing,runOnJS } from 'react-native-reanimated';
+import { useChantier } from '@/app/Context';
 
 const screenHeight = Dimensions.get("window").height;
 
+
+/*
+
+<ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
+  <SelectChantier ></SelectChantier>
+</ThemedView>
+
+*/
+
 export default function SelectChantier() {
 
+    const { chantier, setChantier } = useChantier();
     const [search, setSearch] = useState('');
     const [isOpen,setIsOpen] = useState(false);
     const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]);
     
+    const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
+    const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
+    const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
+    const AnimatedThemedTextInput = Animated.createAnimatedComponent(ThemedTextInput);
 
-  function onPressOpen(event: GestureResponderEvent): void {
+  function onPressOpen(): void {
+    LayoutAnimation.configureNext(
+      LayoutAnimation.Presets.easeInEaseOut
+    );
     setIsOpen(!isOpen);
   }
 
+  function selectChantier(chantier: Chantier): void {
+    setChantier(chantier);
+    setIsOpen(false);
+  }
+
+
 
     const renderChantier = (chantier:Chantier, index: number)  => {
       return(
-      <ThemedView key={index} lvl={3} style={styles.chantier}>
-        <ThemedText>adresse: {chantier.adresse}</ThemedText>
-        <ThemedText>chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText>
-        <ThemedText>date de début: {chantier.dateDep}</ThemedText>
-        <ThemedText>etat: {chantier.etat}</ThemedText>
-      </ThemedView>
+      <Pressable key={index} onPress={() => selectChantier(chantier)}>
+        <ThemedView lvl={4} style={styles.chantier}>
+          <ThemedText>adresse: {chantier.adresse}</ThemedText>
+          <ThemedText>chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText>
+          <ThemedText >date de début: {chantier.dateDep}</ThemedText>
+          <ThemedText>etat: {chantier.etat}</ThemedText>
+        </ThemedView >
+      </Pressable>
       );
+      
     };
 
-    if(!isOpen){
-    return (
-        <View style={styles.closedSelectZone}>
-          <ThemedButton  style={styles.button} lvl={2} onPress={onPressOpen}>
-            <ThemedText style={styles.buttonText}>Open</ThemedText>
+
+    return(
+      <Animated.View 
+      layout={LinearTransition.duration(200)}
+      style={isOpen ? styles.windowOpean : styles.windowClose}>
+
+        <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()}>
+            <ThemedText style={styles.buttonText}>{isOpen ? "Close" : "Open"}</ThemedText>
           </ThemedButton>
-        </View>
+          {isOpen &&
+            <View style={styles.menu}>
+                <ThemedTextInput
+                  lvl={1}
+                  border={4}
+                  style={styles.input}
+                  placeholder='Rechercher un chantier'
+                  value={search}
+                  onChangeText={setSearch}
+                />
+                  <ThemedView lvl={2} style={styles.list}>
+                    <ScrollView contentContainerStyle={styles.chantiersList} >
+                      
+                      {chantiers.map((chantier, index) => (
+                        renderChantier(chantier, index)
+                        ))
+                      }
+                    </ScrollView>
+                  </ThemedView>
+            </View>
+          }
+        </AnimatedThemedView>
+      </Animated.View>
     )
-    }
-    else{
-      return(
-        <View style={styles.openedSelectZone}>
-          <BlurView intensity={1} blurReductionFactor={0.2} experimentalBlurMethod='dimezisBlurView' style={styles.blur}>
-            <ThemedView lvl={0} opacity="40">
-              
-                <ThemedButton  style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
-                  <ThemedText style={styles.buttonText}>Close</ThemedText>
-                </ThemedButton>
-
-                <View style={styles.searchZone}>
-                  <ThemedTextInput
-                    lvl={1}
-                    border={4}
-                    style={styles.input}
-                    placeholder='Rechercher un chantier'
-                    value={search}
-                    onChangeText={setSearch}
-                  />
-                </View>
-                
-                
-                  <ScrollView>
-                    {chantiers.map((chantier, index) => (
-                      renderChantier(chantier, index)
-                      ))
-                    }
-                  </ScrollView>
-                  
-
-            </ThemedView>
-            
-        </BlurView>
-      </View>
-
-
-      )
-    };
+    
 }
 
 const styles = StyleSheet.create({
-  openedSelectZone:{
-    position: 'absolute',
-    width: "100%",
-    borderRadius: 10,
-    zIndex: 9999,
-    elevation: 9999,
-    overflow: "hidden",
-    paddingTop:25,
-    height: screenHeight/2,
-  },
-  blur:{
-    /*flex: 1,*/
-    /*backgroundColor: "rgba(255,255,255,0.0001)",*/
-  },
-  closedSelectZone:{
-    position: 'absolute',
-    width: "50%",
-    borderRadius: 10,
-    zIndex: 9999,
-    elevation: 9999,
-  },
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  searchMenu:{
-    color:'#FFAAAA',
-    borderRadius: 5,
-    width: "100%",
-    margin: 0,
 
+  windowClose:{
+    //backgroundColor: '#00FFFF',
+    //borderRadius:10,
+    padding: 10,
+    width:"50%",
+    height:60,
+    overflow: 'hidden',    
+  },
+  windowOpean:{
+    //backgroundColor: '#00FFFF',
+    //borderRadius:10,
+    width:"100%",
+    height: screenHeight/2,
+    padding: 10,
+  },
+  window:{
+    borderRadius:15,
+    height: "100%",
+    //backgroundColor: '#00FF00',
+    overflow: 'hidden',
+  },
+  menu:{
+    padding:5,
+    flex: 1, 
+    minHeight: 0,
+    //backgroundColor:'#FF00FF',
+  },
+  list:{
+    flex: 1,
+    overflow: 'hidden',
+    borderRadius:10,
+
+  },
+  chantiersList:{
+    //padding:5,
+    //backgroundColor:'0000FF',
+    //flexDirection: 'row',
+    //alignItems: 'center',
+    gap: 8,
     
-  },
-    searchZone:{
-    width: "100%",
-    padding:10,
-    marginTop:10,
-    alignItems: 'center',
   },
   chantier:{
-    padding:10,
-    margin:10,
+    padding:5,
+    //marginTop:5,
+    //margin:5,
     borderRadius:10,
     //borderWidth: 1,
+    
   },
   input: {
     width: '100%',
@@ -135,18 +154,21 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     padding: 10,
     fontSize: 16,
+    marginBottom:10,
   },
-  button:{
+  buttonClose:{
     width:'100%',
-    margin: 5,
-    borderRadius: 10,
+    margin: 0,
+    borderRadius: 15,
     padding: 10,
+    height:40,
   },
   buttonOpen:{
     width:'50%',
     margin: 5,
     borderRadius: 10,
     padding: 10,
+    height:40,
   },
   buttonText:{
     textAlign: 'center',