themed-button, themed-mapview, selectChantier maj

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({