fermeture auto + composant selectChantier

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,
   }
 });