Browse Source

Fixing padding bug from FormField in login screen

master
GabrielTrettel 3 years ago
parent
commit
cf196bcdaa
  1. 96
      src/app/components/forms/FormField.js
  2. 21
      src/app/screens/LoginScreen.js

96
src/app/components/forms/FormField.js

@ -33,66 +33,46 @@ function IncreaseDecreaseButtons({ content }) {
);
}
function AppFormField({
function RenderPluviometerInput({
name,
width,
increaseDecreaseButtons = false,
...otherProps
}) {
const {
values,
setFieldTouched,
setFieldValue,
errors,
touched,
} = useFormikContext();
const [pluv, setPluv] = useState(0);
console.log(values);
console.log(pluv);
otherProps,
width,
values,
}) {
console.log(name == "pluviometer");
const [fieldVal, setFieldVal] = useState(values[name]);
useEffect(() => {
setFieldValue("pluviometer", Number(pluv), true);
}, [pluv]);
setFieldValue(name, fieldVal, true);
}, [fieldVal]);
const increase = () => {
setPluv((Number(pluv) + 1).toString());
setFieldVal((Number(fieldVal) + 1).toString());
};
const decrease = () => {
setPluv((Number(pluv) - 1).toString());
setFieldVal((Number(fieldVal) - 1).toString());
};
return (
<View>
<View
style={{
flex: 1,
flexDirection: "row",
paddingLeft: 16,
paddingRight: increaseDecreaseButtons ? 0 : 16,
}}
>
<View
style={{
alignSelf: "stretch",
flex: 1,
}}
>
<View style={{flex: 1,alignSelf: "stretch"}}>
<TextInput
onBlur={() => setFieldTouched(name)}
onChangeText={(val) => {
setPluv(val);
setFieldVal(val);
}}
width={width}
value={pluv}
{...otherProps}
/>
value={fieldVal.toString()}
{...otherProps}/>
</View>
{increaseDecreaseButtons && (
<>
<TouchableOpacity
onPress={() => {
increase();
@ -118,11 +98,53 @@ function AppFormField({
>
<IncreaseDecreaseButtons content={"-"} />
</TouchableOpacity>
</>
</View>
);
}
function AppFormField({
name,
width,
increaseDecreaseButtons = false,
...otherProps
}) {
const {
values,
setFieldTouched,
setFieldValue,
handleChange,
errors,
touched,
} = useFormikContext();
return (
<View>
<View
style={{
paddingLeft: 16,
paddingRight: increaseDecreaseButtons ? 0 : 16,
}}
>
{name != "pluviometer" ? (
<TextInput
onBlur={() => setFieldTouched(name)}
onChangeText={handleChange(name)}
width={width}
{...otherProps}
/>
) : (
<RenderPluviometerInput
name={name}
setFieldTouched={setFieldTouched}
setFieldValue={setFieldValue}
otherProps={otherProps}
width={width}
values={values}
/>
)}
</View>
<View style={{ paddingLeft: 16 }}>
<View style={{ paddingHorizontal: 16}}>
<ErrorMessage error={errors[name]} visible={touched[name]} />
</View>
</View>

21
src/app/screens/LoginScreen.js

@ -1,5 +1,5 @@
import React, { useState, useContext } from "react";
import { StyleSheet, View, Text } from "react-native";
import { StyleSheet, View } from "react-native";
import * as Yup from "yup";
import {
Form,
@ -10,7 +10,6 @@ import {
import Screen from "../components/Screen";
import colors from "../config/colors";
import { dimensions } from "../config/dimensions";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
import login from "../api/auth";
import jwdDecode from "jwt-decode";
import { AuthContext } from "../auth/context";
@ -59,6 +58,7 @@ export default function LoginScreen(props) {
handleSubmit(name, password, setLoginFailed)
}
>
<View>
<assets.AppLogoTitle
preserveAspectRatio="xMidYMid meet"
width={300}
@ -67,25 +67,33 @@ export default function LoginScreen(props) {
marginBottom={dimensions.spacing.big_padding}
/>
<ErrorMessage error="Email ou senha inválidos" visible={loginFailed} />
<ErrorMessage
error="Email ou senha inválidos"
visible={loginFailed}
/>
<View style={{ paddingVertical: 24 }}>
<FormField
maxLength={12}
name="name"
keyboardType="numeric"
numberOfLines={1}
numberOfLines={2}
placeholder="Número de telefone celular"
/>
</View>
<View style={{ paddingBottom: 24 }}>
<FormField
maxLength={12}
name="password"
secureTextEntry={true}
numberOfLines={1}
numberOfLines={2}
placeholder="Senha"
/>
</View>
<SubmitButton title="entrar" backgroundColor={colors.primary} />
</View>
{/* <TouchableNativeFeedback
onPress={() => {
props.navigation.navigate("Register");
@ -103,7 +111,6 @@ export default function LoginScreen(props) {
const styles = StyleSheet.create({
containter: {
padding: 10,
justifyContent: "center",
},
});
Loading…
Cancel
Save