69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import { TextInput, TextInputProps } from "react-native-paper";
|
|
import {
|
|
KeyboardTypeOptions,
|
|
Platform,
|
|
NativeSyntheticEvent,
|
|
TextInputSubmitEditingEventData,
|
|
SubmitBehavior,
|
|
} from "react-native";
|
|
|
|
interface FormInputProps {
|
|
label: string;
|
|
value: string;
|
|
onChangeText: (text: string) => void;
|
|
onBlur?: () => void;
|
|
icon?: string;
|
|
keyboardType?: KeyboardTypeOptions;
|
|
disabled?: boolean;
|
|
autoCapitalize?: TextInputProps["autoCapitalize"];
|
|
style?: any;
|
|
onSubmitEditing?: (
|
|
e?: NativeSyntheticEvent<TextInputSubmitEditingEventData>
|
|
) => void;
|
|
returnKeyType?: any;
|
|
submitBehavior?: SubmitBehavior;
|
|
}
|
|
|
|
export const FormInput = ({
|
|
label,
|
|
value,
|
|
onChangeText,
|
|
onBlur,
|
|
icon = "pencil",
|
|
keyboardType = "default",
|
|
disabled = false,
|
|
autoCapitalize = "none",
|
|
style = {},
|
|
onSubmitEditing,
|
|
returnKeyType,
|
|
submitBehavior,
|
|
}: FormInputProps) => {
|
|
return (
|
|
<TextInput
|
|
label={label}
|
|
mode="flat"
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
onBlur={onBlur}
|
|
style={{
|
|
marginBottom: 16,
|
|
backgroundColor: "transparent",
|
|
...style,
|
|
}}
|
|
keyboardType={keyboardType}
|
|
autoCapitalize={autoCapitalize}
|
|
onSubmitEditing={onSubmitEditing}
|
|
returnKeyType={returnKeyType}
|
|
submitBehavior={submitBehavior ?? "submit"}
|
|
onKeyPress={(e) => {
|
|
if (Platform.OS === "web" && e.nativeEvent.key === "Enter") {
|
|
onSubmitEditing?.();
|
|
}
|
|
}}
|
|
left={<TextInput.Icon icon={icon} color="#6750a4" />}
|
|
theme={{ colors: { primary: "#6750a4" } }}
|
|
disabled={disabled}
|
|
/>
|
|
);
|
|
};
|