forked from cemaden-educacao/WPD-MobileApp
GabrielTrettel
3 years ago
4 changed files with 151 additions and 60 deletions
-
2src/app/components/TextInput.js
-
2src/app/components/forms/ErrorMessage.js
-
119src/app/components/forms/FormField.js
-
42src/app/screens/PluviometerSharingDataScreen.js
@ -1,24 +1,131 @@ |
|||||
import React from "react"; |
|
||||
|
import React, { useState, useEffect } from "react"; |
||||
import { useFormikContext } from "formik"; |
import { useFormikContext } from "formik"; |
||||
|
|
||||
import TextInput from "../TextInput"; |
import TextInput from "../TextInput"; |
||||
import ErrorMessage from "./ErrorMessage"; |
import ErrorMessage from "./ErrorMessage"; |
||||
import {View} from "react-native"; |
|
||||
|
import { View, Text } from "react-native"; |
||||
|
import { TouchableOpacity } from "react-native-gesture-handler"; |
||||
|
import colors from "../../config/colors"; |
||||
|
import { Shadow } from "react-native-shadow-2"; |
||||
|
|
||||
function AppFormField({ name, width, ...otherProps }) { |
|
||||
const { setFieldTouched, handleChange, errors, touched } = useFormikContext(); |
|
||||
|
function IncreaseDecreaseButtons({ content }) { |
||||
|
return ( |
||||
|
<Shadow |
||||
|
offset={[0, 4]} |
||||
|
distance={4} |
||||
|
radius={4} |
||||
|
startColor="rgba(0, 0, 0, 0.25)" |
||||
|
paintInside={true} |
||||
|
> |
||||
|
<View |
||||
|
style={{ |
||||
|
backgroundColor: colors.primary, |
||||
|
width: 35, |
||||
|
height: 42, |
||||
|
justifyContent: "center", |
||||
|
alignItems: "center", |
||||
|
borderRadius: 4, |
||||
|
}} |
||||
|
> |
||||
|
<Text style={{ color: "white", fontSize: 24 }}>{content}</Text> |
||||
|
</View> |
||||
|
</Shadow> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
function AppFormField({ |
||||
|
name, |
||||
|
width, |
||||
|
increaseDecreaseButtons = false, |
||||
|
...otherProps |
||||
|
}) { |
||||
|
const { |
||||
|
values, |
||||
|
setFieldTouched, |
||||
|
setFieldValue, |
||||
|
errors, |
||||
|
touched, |
||||
|
} = useFormikContext(); |
||||
|
|
||||
|
const [pluv, setPluv] = useState(0); |
||||
|
|
||||
|
console.log(values); |
||||
|
console.log(pluv); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
setFieldValue("pluviometer", Number(pluv), true); |
||||
|
}, [pluv]); |
||||
|
|
||||
|
const increase = () => { |
||||
|
setPluv((Number(pluv) + 1).toString()); |
||||
|
}; |
||||
|
|
||||
|
const decrease = () => { |
||||
|
setPluv((Number(pluv) - 1).toString()); |
||||
|
}; |
||||
|
|
||||
return ( |
return ( |
||||
|
<View> |
||||
|
<View |
||||
|
style={{ |
||||
|
flex: 1, |
||||
|
flexDirection: "row", |
||||
|
paddingLeft: 16, |
||||
|
paddingRight: increaseDecreaseButtons ? 0 : 16, |
||||
|
}} |
||||
|
> |
||||
<View |
<View |
||||
paddingHorizontal={16}> |
|
||||
|
style={{ |
||||
|
alignSelf: "stretch", |
||||
|
flex: 1, |
||||
|
}} |
||||
|
> |
||||
<TextInput |
<TextInput |
||||
onBlur={() => setFieldTouched(name)} |
onBlur={() => setFieldTouched(name)} |
||||
onChangeText={handleChange(name)} |
|
||||
|
onChangeText={(val) => { |
||||
|
setPluv(val); |
||||
|
}} |
||||
width={width} |
width={width} |
||||
|
value={pluv} |
||||
{...otherProps} |
{...otherProps} |
||||
/> |
/> |
||||
|
</View> |
||||
|
|
||||
|
{increaseDecreaseButtons && ( |
||||
|
<> |
||||
|
<TouchableOpacity |
||||
|
onPress={() => { |
||||
|
increase(); |
||||
|
}} |
||||
|
style={{ |
||||
|
paddingLeft: 4, |
||||
|
paddingBottom: 8, |
||||
|
paddingRight: 1.5, |
||||
|
}} |
||||
|
> |
||||
|
<IncreaseDecreaseButtons content={"+"} /> |
||||
|
</TouchableOpacity> |
||||
|
|
||||
|
<TouchableOpacity |
||||
|
onPress={() => { |
||||
|
decrease(); |
||||
|
}} |
||||
|
style={{ |
||||
|
paddingLeft: 1.5, |
||||
|
paddingBottom: 8, |
||||
|
paddingRight: 16, |
||||
|
}} |
||||
|
> |
||||
|
<IncreaseDecreaseButtons content={"-"} /> |
||||
|
</TouchableOpacity> |
||||
|
</> |
||||
|
)} |
||||
|
</View> |
||||
|
|
||||
|
<View style={{ paddingLeft: 16 }}> |
||||
<ErrorMessage error={errors[name]} visible={touched[name]} /> |
<ErrorMessage error={errors[name]} visible={touched[name]} /> |
||||
</View> |
</View> |
||||
|
</View> |
||||
); |
); |
||||
} |
} |
||||
|
|
||||
|
Write
Preview
Loading…
Cancel
Save
Reference in new issue