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

components/themed-button.tsx

@@ -0,0 +1,37 @@
+import { Pressable, type PressableProps } from 'react-native';
+
+import { useThemeColor } from '@/hooks/use-theme-color';
+
+export type ThemedPressableProps = PressableProps & {
+  lightColor?: string;
+  darkColor?: string;
+  lvl?:number;
+  border?:number;
+};
+
+export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1, ...otherProps }: ThemedPressableProps) {
+  var lvlStr:string = "background";
+  var borderColor ="";
+  if(lvl>=0 && lvl<6){
+    lvlStr+=lvl;
+  }
+  else lvlStr+='5';
+
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
+
+
+  if(border!=-1){
+    var borderStr = "";
+    if(border>=0 && border<6){
+      borderStr="background"+border;
+      borderColor = useThemeColor({ light: lightColor, dark: darkColor },borderStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
+    }
+    else{
+      borderColor = backgroundColor
+    }
+  }
+
+
+
+  return <Pressable  style={(state) =>[{ backgroundColor, borderColor }, typeof style === 'function' ? style(state) : style,]} {...otherProps}/>;
+}

components/themed-mapview.tsx

@@ -0,0 +1,22 @@
+import MapView, { Marker, PROVIDER_DEFAULT, type MapViewProps  } from 'react-native-maps';
+
+
+import { useThemeColor, useThemeColorMap } from '@/hooks/use-theme-color';
+
+export type ThemedMapViewProps = MapViewProps & {
+  lightColor?: string;
+  darkColor?: string;
+};
+
+export function ThemedMapView({children, style, lightColor, darkColor, ...otherProps }: ThemedMapViewProps) {
+
+
+  const mapeStyle = useThemeColorMap();
+
+
+
+
+  return<MapView customMapStyle={mapeStyle} style={style} {...otherProps}>
+      {children}
+      </MapView>;
+}

components/themed-textinpute.tsx

@@ -6,29 +6,44 @@ export type ThemedTextInputProps = TextInputProps & {
   lightColor?: string;
   darkColor?: string;
   reverse?:boolean;
+  lvl?:number;
+  border?:number;
   type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
 };
 
-export function ThemedTextInput({
-  style,
-  lightColor,
-  darkColor,
-  reverse,
-  type = 'default',
-
-  ...rest
-}: ThemedTextInputProps) {
+export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lvl=1,border=-1,type = 'default', ...rest}: ThemedTextInputProps) {
 
   var text:string = 'text'
   if(reverse){
     text += '_';
   }
-  const color = useThemeColor({ light: lightColor, dark: darkColor }, text as 'text'|'text_');
+  const color = useThemeColor({ light: lightColor, dark: darkColor}, text as 'text'|'text_');
+
+  var lvlStr:string = "background";
+  var borderColor ="";
+  if(lvl>=0 && lvl<6){
+    lvlStr+=lvl;
+  }
+  else lvlStr+='5';
+
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
+
+
+  if(border!=-1){
+    if(border>=0 && border<6){
+      const borderStr="background"+border;
+      borderColor = useThemeColor({ light: lightColor, dark: darkColor },borderStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
+    }
+    else{
+      borderColor = backgroundColor
+    }
+  }
+
 
   return (
     <TextInput
       style={[
-        { color },
+        { color,backgroundColor,borderColor },
         type === 'default' ? styles.default : undefined,
         type === 'title' ? styles.title : undefined,
         type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
@@ -37,8 +52,10 @@ export function ThemedTextInput({
         style,
       ]}
       {...rest}
+      placeholderTextColor="#808080"
     />
   );
+  
 }
 
 const styles = StyleSheet.create({