Open Izocel opened 1 year ago
import { APP_NAME } from "@env";
import { Text, View } from "react-native";
import { connect } from "react-redux";
import { setError } from "../reducers/ScreenNotificationReducer";
import { useNavigation } from "@react-navigation/native";
import { theme } from "../styles/theme";
import { Validators, FormGenerator } from "react-reactive-form";
const Login = (props) => {
const navigation = useNavigation;
handleReset = () => {
this.loginForm.reset();
};
handleSubmit = (e) => {
e.preventDefault();
console.log("Form values", this.loginForm.value);
};
setForm = (form) => {
this.loginForm = form;
this.loginForm.meta = {
handleReset: this.handleReset,
};
};
return (
<View style={styles.centered}>
<Text>{APP_NAME}: This is the login view</Text>
{RenderLoginForm()}
</View>
);
};
const RenderLoginForm = () => {
return (
<form onSubmit={this.handleSubmit}>
<FormGenerator onMount={this.setForm} fieldConfig={fieldConfig} />
</form>
);
};
const TextInput = ({ handler, touched, hasError, meta }) => (
<div>
<input placeholder={`Enter ${meta.label}`} {...handler()} />
<span>
{touched && hasError("required") && `${meta.label} is required`}
</span>
</div>
);
// Checkbox component
const CheckBox = ({ handler }) => (
<div>
<input {...handler("checkbox")} />
</div>
);
// Field config to configure form
const fieldConfig = {
controls: {
username: {
options: {
validators: Validators.required,
},
render: TextInput,
meta: { label: "Username" },
},
password: {
options: {
validators: Validators.required,
},
render: TextInput,
meta: { label: "Password" },
},
rememberMe: {
render: CheckBox,
},
$field_0: {
isStatic: false,
render: ({ invalid, meta: { handleReset } }) => (
<Vi>
<button type="button" onClick={handleReset}>
Reset
</button>
<button type="submit" disabled={invalid}>
Submit
</button>
</Vi>
),
},
},
};
const mapDispatchToProps = {
setError,
};
const styles = {
...theme,
};
export default connect(null, mapDispatchToProps)(Login);
Invariant Violation: View config getter callback for component
input
must be a function (receivedundefined
). Make sure to start component names with a capital letter.