51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { View, Text, TextInput, type TextInputProps, type ViewStyle } from "react-native";
|
|
import { useTheme } from "../theme";
|
|
|
|
interface InputProps extends TextInputProps {
|
|
error?: string;
|
|
label?: string;
|
|
containerStyle?: ViewStyle;
|
|
}
|
|
|
|
export function Input({ error, label, containerStyle, style, ...props }: InputProps) {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<View style={[{ gap: theme.spacing.xs }, containerStyle]}>
|
|
{label && (
|
|
<Text style={{ color: theme.colors.textSecondary, ...theme.typography.caption, fontWeight: "500" }}>
|
|
{label}
|
|
</Text>
|
|
)}
|
|
<TextInput
|
|
accessible
|
|
accessibilityLabel={label || props.placeholder || "Внесете текст"}
|
|
accessibilityRole="none"
|
|
placeholderTextColor={theme.colors.textTertiary}
|
|
style={[
|
|
{
|
|
backgroundColor: theme.colors.surface,
|
|
borderWidth: 1.5,
|
|
borderRadius: theme.radius.md,
|
|
paddingVertical: 13,
|
|
paddingHorizontal: theme.spacing.md,
|
|
fontSize: 15,
|
|
color: theme.colors.text,
|
|
...theme.shadows.xs,
|
|
},
|
|
error
|
|
? { borderColor: theme.colors.error, backgroundColor: theme.colors.errorLight }
|
|
: { borderColor: theme.colors.border },
|
|
typeof style === "object" ? style : undefined,
|
|
]}
|
|
{...props}
|
|
/>
|
|
{error && (
|
|
<Text style={{ color: theme.colors.error, ...theme.typography.caption }}>
|
|
{error}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|