themed-button, themed-mapview, selectChantier maj

components/selectChantier.tsx

@@ -1,7 +1,9 @@
 import { useState } from 'react';
-import { Button, GestureResponderEvent, ScrollView, StyleSheet, View } from 'react-native';
+import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { ThemedTextInput } from './themed-textinpute';
 import { ThemedView } from "./themed-view";
+import { ThemedText } from './themed-text';
+import { ThemedButton } from './themed-button';
 
 export default function SelectChantier() {
 
@@ -22,40 +24,54 @@ export default function SelectChantier() {
       );
     };
 
+    if(isOpen){
     return (
-        <ThemedView lvl={2} style={styles.selectZone}>
-          {!isOpen && (
-             <Button onPress={onPressOpen} title={"Open"}/>
-          )}
-           {isOpen && (
-            <ScrollView>
-               <Button onPress={onPressOpen} title={"Close"}/>
-                <View style={styles.searchZone}>
-                    <ThemedView lvl={0} style={styles.searchMenu}>
-                        <ThemedTextInput placeholderTextColor="#808080"
-                            placeholder='Rechercher un chantier'
-                            value={search}
-                            onChangeText={setSearch}
-                        />
-                    </ThemedView>
-                </View>
-                
-                <View>
+        <View style={styles.closedSelectZone}>
+              <ThemedButton  style={styles.button} lvl={2} onPress={onPressOpen}>
+              <ThemedText style={styles.buttonText}>Open</ThemedText>
+              </ThemedButton>
+        </View>
+    )
+    }
+    else{
+      return(
+        <ThemedView lvl={2} style={styles.openedSelectZone}>
+          <ScrollView>
+            <ThemedButton  style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
+              <ThemedText style={styles.buttonText}>Close</ThemedText>
+            </ThemedButton>
+              <View style={styles.searchZone}>
+                <ThemedTextInput
+                  lvl={1}
+                  border={5}
+                  style={styles.input}
+                  placeholder='Rechercher un chantier'
+                  value={search}
+                  onChangeText={setSearch}
+                />
+              </View>
+              
+              <View>
 
-                </View>
-            </ScrollView>
-           )}
-        </ThemedView>
-
-    );
+              </View>
+          </ScrollView>
+      </ThemedView>
+      )
+    };
 }
 
 const styles = StyleSheet.create({
-    selectZone:{
+  openedSelectZone:{
     position: 'absolute',
     width: "100%",
-    margin: 0,
-    borderRadius: 5,
+    borderRadius: 10,
+    zIndex: 9999,
+    elevation: 9999,
+  },
+  closedSelectZone:{
+    position: 'absolute',
+    width: "50%",
+    borderRadius: 10,
     zIndex: 9999,
     elevation: 9999,
   },
@@ -79,5 +95,27 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   chantier:{
+  },
+  input: {
+    width: '100%',
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 10,
+    fontSize: 16,
+  },
+  button:{
+    width:'100%',
+    margin: 5,
+    borderRadius: 10,
+    padding: 10,
+  },
+  buttonOpen:{
+    width:'50%',
+    margin: 5,
+    borderRadius: 10,
+    padding: 10,
+  },
+  buttonText:{
+    textAlign: 'center',
   }
 });