mobile-darmasaba/components/inputForm.tsx

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

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
   disable?: boolean
   multiline?: boolean
   mb?: boolean
   focus?: boolean
};


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

   if (itemLeft != undefined || itemRight != undefined) {
      return (
         <View style={[mb && Styles.mb10]}>
            {
               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,
               multiline && { alignItems: 'flex-end' },
               round && Styles.round30,
               { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' },
               error && { borderColor: "red" },
               Platform.OS == 'ios' ? { paddingVertical: 10 } : { paddingVertical: 0, minHeight: 40 },
               { alignItems: 'center' },
               multiline
                  ? { alignItems: "flex-end" } // multiline: tombol send di bawah
                  : { alignItems: "center" }, // default: tetap di tengah
            ]}>
               {itemRight != undefined ? itemRight : itemLeft}
               <TextInput
                  editable={!disable}
                  value={value}
                  placeholder={placeholder}
                  keyboardType={type}
                  onChangeText={onChange}
                  placeholderTextColor={'gray'}
                  multiline={multiline}
                  numberOfLines={3}
                  style={[
                     Styles.mh05,
                     multiline && { height: '100%', maxHeight: 100 },
                     { width: width ? lebar * width / 100 : lebar * 0.78, color: 'black' },
                     Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 3 } : { paddingVertical: 0 },
                  ]}
               />
            </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}
            editable={!disable}
            style={[Styles.inputRoundForm, Platform.OS == 'ios' ? { paddingVertical: 11 } : { paddingVertical: 6 }, error && { borderColor: "red" }, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }, { color: 'black' }, multiline && { height: 150, textAlignVertical: 'top' }]}
            onChangeText={onChange}
            placeholderTextColor={'gray'}
            multiline={multiline}
            numberOfLines={multiline ? 5 : undefined}
         />
         {error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
         {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
      </View>
   )
}