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

21
src/app/screens/LoginScreen.js

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