img chantier

components/themed-textinput.tsx

@@ -0,0 +1,86 @@
+import { StyleSheet, TextInput, ViewStyle, type TextInputProps } from 'react-native';
+
+import { useThemeColor } from '@/hooks/use-theme-color';
+
+export type ThemedTextInputProps = TextInputProps & {
+  lightColor?: string;
+  darkColor?: string;
+  reverse?:boolean;
+  lvl?:number;
+  border?:number;
+  opacity?:string;
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+};
+
+//nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
+export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lvl=1,border=-1,opacity="FF",type = 'default', ...rest}: ThemedTextInputProps) {
+
+  var text:string = 'text'
+  if(reverse){
+    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')+opacity;
+
+
+  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,backgroundColor,borderColor },
+        type === 'default' ? styles.default : undefined,
+        type === 'title' ? styles.title : undefined,
+        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
+        type === 'subtitle' ? styles.subtitle : undefined,
+        type === 'link' ? styles.link : undefined,
+        style,
+      ]}
+      {...rest}
+      placeholderTextColor="#808080"
+    />
+  );
+  
+}
+
+const styles = StyleSheet.create({
+  default: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  defaultSemiBold: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '600',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    lineHeight: 32,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  link: {
+    lineHeight: 30,
+    fontSize: 16,
+    color: '#0a7ea4',
+  },
+});