mobile-darmasaba/components/inputForm.tsx

import Styles from "@/constants/Styles";
import { Dimensions, Text, TextInput, View } from "react-native";

type Props = {
   label?: string;
   placeholder?: string;
   onChange?: (val: string) => void;
   info?: string;
   itemLeft?: React.ReactNode;
   itemRight?: React.ReactNode;
   error?: boolean;
   errorText?: string;
   required?: boolean;
   type: 'default' | 'visible-password' | 'numeric'
   round?: boolean
   width?: number
   bg?: 'white' | 'transparent'
   value?: string
};


export function InputForm({ label, value, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round, width, bg }: Props) {
   const lebar = Dimensions.get("window").width;

   if (itemLeft != undefined || itemRight != undefined) {
      return (
         <View style={{ marginBottom: 10 }}>
            {
               label != undefined && (
                  <Text style={[{ marginBottom: 5, textTransform: "capitalize" }, error && Styles.cError]}>
                     {label}
                     {required && (<Text style={Styles.cError}>*</Text>)}
                  </Text>
               )
            }
            <View style={[Styles.inputRoundForm, itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }, Styles.pv10]}>
               {itemRight != undefined ? itemRight : itemLeft}
               <TextInput
                  value={value}
                  placeholder={placeholder}
                  keyboardType={type}
                  onChangeText={onChange}
                  style={[Styles.mh05, { width: width ? lebar * width / 100 : lebar * 0.78 }]}
               />
            </View>
            {error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
            {info != undefined && (<Text style={[Styles.textInformation, Styles.cGray, Styles.mt05]}>{info}</Text>)}
         </View>
      )
   }



   return (
      <View style={[Styles.mb10]}>
         {
            label != undefined && (
               <Text style={[Styles.mb05, error && Styles.cError]}>
                  {label}
                  {required && (<Text style={Styles.cError}>*</Text>)}
               </Text>
            )
         }
         <TextInput
            value={value}
            placeholder={placeholder}
            keyboardType={type}
            style={[Styles.inputRoundForm, error && { borderColor: "red" }, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }]}
            onChangeText={onChange}
         />
         {error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
         {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
      </View>
   )
}