99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import * as React from "react";
|
|
import { View, TextInput, type TextInputProps } from "react-native";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
interface InputProps extends TextInputProps {
|
|
containerClassName?: string;
|
|
borderClassName?: string;
|
|
placeholderText?: string;
|
|
placeholderClassName?: string;
|
|
placeholderColor?: string;
|
|
textClassName?: string;
|
|
leftIcon?: React.ReactNode;
|
|
rightIcon?: React.ReactNode;
|
|
}
|
|
|
|
const Input = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
|
|
(
|
|
{
|
|
containerClassName,
|
|
borderClassName,
|
|
className,
|
|
placeholderText,
|
|
placeholderClassName,
|
|
placeholderColor,
|
|
textClassName,
|
|
leftIcon,
|
|
rightIcon,
|
|
placeholder,
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const resolvedPlaceholder = placeholder ?? placeholderText;
|
|
|
|
// If no container / icons are provided, fall back to a simple input
|
|
if (!leftIcon && !rightIcon && !containerClassName && !borderClassName) {
|
|
return (
|
|
<TextInput
|
|
ref={ref}
|
|
className={cn(
|
|
"h-10 native:h-12 rounded-xl border border-input bg-background px-3 text-base lg:text-sm native:text-lg native:leading-[1.25] placeholder:text-muted-foreground file:border-0 file:bg-transparent file:font-medium",
|
|
props.editable === false && "opacity-50",
|
|
textClassName,
|
|
className
|
|
)}
|
|
placeholder={resolvedPlaceholder}
|
|
placeholderClassName={cn(
|
|
"text-muted-foreground",
|
|
placeholderClassName
|
|
)}
|
|
placeholderTextColor={placeholderColor}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// Enhanced layout: rounded container with optional left/right icons (search-bar style)
|
|
return (
|
|
<View className={cn("flex-row items-center", containerClassName)}>
|
|
<View
|
|
className={cn(
|
|
"flex-row items-center rounded-[8px] border border-[#E5E7F0] bg-white px-4 h-10 native:h-12 flex-1",
|
|
borderClassName
|
|
)}
|
|
>
|
|
{leftIcon ? <View className="mr-2">{leftIcon}</View> : null}
|
|
|
|
<TextInput
|
|
ref={ref}
|
|
{...props}
|
|
placeholder={resolvedPlaceholder}
|
|
className={cn(
|
|
"flex-1 text-sm native:text-sm lg:text-sm native:leading-[1.25]",
|
|
props.editable === false && "opacity-50",
|
|
textClassName,
|
|
className
|
|
)}
|
|
placeholderClassName={cn(
|
|
"text-muted-foreground",
|
|
placeholderClassName
|
|
)}
|
|
placeholderTextColor={placeholderColor}
|
|
/>
|
|
</View>
|
|
|
|
{rightIcon ? (
|
|
<View className="ml-3 w-10 h-10 native:h-12 native:w-12 rounded-[8px] border border-[#D9DBE9] bg-white items-center justify-center">
|
|
{rightIcon}
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
);
|
|
}
|
|
);
|
|
|
|
Input.displayName = "Input";
|
|
|
|
export { Input };
|