Browse Source

Increase/Decrease buttons in Pluviometer sharing data form.

master
GabrielTrettel 3 years ago
parent
commit
81296668f5
  1. 4
      src/app/components/TextInput.js
  2. 2
      src/app/components/forms/ErrorMessage.js
  3. 119
      src/app/components/forms/FormField.js
  4. 42
      src/app/screens/PluviometerSharingDataScreen.js

4
src/app/components/TextInput.js

@ -3,12 +3,12 @@ import { View, TextInput, StyleSheet } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "../config/colors"; import colors from "../config/colors";
import defaultStyles from "../config/styles"; import defaultStyles from "../config/styles";
import {Shadow} from "react-native-shadow-2";
import { Shadow } from "react-native-shadow-2";
function AppTextInput({ icon, width = "100%", ...otherProps }) { function AppTextInput({ icon, width = "100%", ...otherProps }) {
return ( return (
<Shadow <Shadow
viewStyle={{ width: width, height: otherProps.numberOfLines * 20}}
viewStyle={{ width: width, height: otherProps.numberOfLines * 21 }}
offset={[0, 4]} offset={[0, 4]}
distance={4} distance={4}
radius={4} radius={4}

2
src/app/components/forms/ErrorMessage.js

@ -10,7 +10,7 @@ function ErrorMessage({ error, visible }) {
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
error: { color: "red" },
error: { color: "red", paddingTop: 10 },
}); });
export default ErrorMessage; export default ErrorMessage;

119
src/app/components/forms/FormField.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>
); );
} }

42
src/app/screens/PluviometerSharingDataScreen.js

@ -1,25 +1,16 @@
import React, { useState, useContext, useEffect } from "react"; import React, { useState, useContext, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView, PixelRatio } from "react-native";
import { StyleSheet, Text, View, ScrollView } from "react-native";
import * as Yup from "yup"; import * as Yup from "yup";
import {
Form,
FormField,
FormPicker as Picker,
SubmitButton,
} from "../components/forms";
import { Form, FormField, SubmitButton } from "../components/forms";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import useLocation from "../hooks/useLocation";
import FormImagePicker from "../components/forms/FormImagePicker"; import FormImagePicker from "../components/forms/FormImagePicker";
import { insertPluviometerData } from "../database/databaseLoader"; import { insertPluviometerData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
import { dimensions, scaleDimsFromWidth } from "../config/dimensions"; import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
import FormDatePicker from "../components/forms/FormDatePicker";
import colors from "../config/colors/"; import colors from "../config/colors/";
import moment from "moment"; import moment from "moment";
import FormLocationPicker from "../components/forms/FormLocationPicker";
import { TouchableOpacity } from "react-native-gesture-handler";
import { EventLocationContext } from "../context/EventLocationContext";
import PickEventDateLocation from "../components/PickEventDateLocation"; import PickEventDateLocation from "../components/PickEventDateLocation";
import { EventLocationContext } from "../context/EventLocationContext";
const dims = scaleDimsFromWidth(85, 85, 25); const dims = scaleDimsFromWidth(85, 85, 25);
@ -36,24 +27,19 @@ const validationSchema = Yup.object().shape({
function PluviometerSharingDataScreen(props) { function PluviometerSharingDataScreen(props) {
const context = useContext(EventLocationContext); const context = useContext(EventLocationContext);
const amount = 2;
const [dateTime, setDateTime] = useState(moment());
const [time, setTime] = useState(moment());
useEffect(() => { useEffect(() => {
context.defaultLocation(); context.defaultLocation();
}, []); }, []);
const location = context.eventCoordinates;
const address = context.eventLocation;
const [dateTime, setDateTime] = useState(moment());
const [time, setTime] = useState(moment());
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<ScrollView> <ScrollView>
<Form <Form
initialValues={{ initialValues={{
pluviometer: "",
pluviometer: 0,
description: "", description: "",
images: [], images: [],
}} }}
@ -69,22 +55,20 @@ function PluviometerSharingDataScreen(props) {
}} }}
validationSchema={validationSchema} validationSchema={validationSchema}
> >
<Text style={{...styles.labelStyle, paddingTop: 24 }}>Quantidade de chuva (mm):</Text>
<Text style={{ ...styles.labelStyle, paddingTop: 24 }}>
Quantidade de chuva (mm):
</Text>
<FormField <FormField
keyboardType="decimal-pad"
keyboardType="number-pad"
maxLength={200} maxLength={200}
numberOfLines={2} numberOfLines={2}
name="pluviometer" name="pluviometer"
placeholder="Digite a quantidade de chuva"
placeholder="Quantidade de chuva"
increaseDecreaseButtons={true}
/> />
<FormImagePicker
backgroundColor={colors.primary}
name="images"
styles={{ width: 50 }}
/>
<FormImagePicker backgroundColor={colors.primary} name="images" />
<PickEventDateLocation <PickEventDateLocation
setDate={setDateTime} setDate={setDateTime}

Loading…
Cancel
Save