Browse Source

pluviometer register screen: adding scrollview

master
analuizaff 4 years ago
parent
commit
58773a019f
  1. 10
      src/app/components/SchoolPicker.js
  2. 104
      src/app/screens/PluviometerRegisterScreen.js

10
src/app/components/SchoolPicker.js

@ -1,13 +1,9 @@
import React, { useContext, useState, Component, Fragment } from "react";
import { StyleSheet, Text, View, PixelRatio, Picker, KeyboardAvoidingView } from "react-native";
import React, { useState, Fragment } from "react";
import { StyleSheet, View } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
import { FontAwesome5 } from '@expo/vector-icons'; import { FontAwesome5 } from '@expo/vector-icons';
import colors from "../config/colors"; import colors from "../config/colors";
import { dimensions } from "../config/dimensions";
import Screen from "./Screen";
import SearchableDropdown from 'react-native-searchable-dropdown'; import SearchableDropdown from 'react-native-searchable-dropdown';
import { KeyboardAwareFlatList, KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
const items = [ const items = [
//substituir posteriormente pelas escolas //substituir posteriormente pelas escolas
@ -77,7 +73,7 @@ function SchoolPicker(props) {
borderRadius: 6, borderRadius: 6,
width: "100%", width: "100%",
}} itemTextStyle={{ color: '#222' }} }} itemTextStyle={{ color: '#222' }}
itemsContainerStyle={{ maxHeight: "80%" }}
itemsContainerStyle={{ maxHeight: "100%" }}
items={items} items={items}
chip={true} chip={true}
resetValue={false} resetValue={false}

104
src/app/screens/PluviometerRegisterScreen.js

@ -3,24 +3,17 @@ import { StyleSheet, Text, View, ScrollView, PixelRatio, SafeAreaView, KeyboardA
import * as Yup from "yup"; import * as Yup from "yup";
import { import {
Form, Form,
FormField,
FormPicker as Picker,
SubmitButton, SubmitButton,
} from "../components/forms"; } 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 { 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 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 FormLocationPicker from "../components/forms/FormLocationPicker";
import { TextInput, TouchableOpacity } from "react-native-gesture-handler";
import { EventLocationContext } from "../context/EventLocationContext"; import { EventLocationContext } from "../context/EventLocationContext";
import SchoolPicker from "../components/SchoolPicker"; import SchoolPicker from "../components/SchoolPicker";
import { KeyboardAwareFlatList, KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
@ -41,67 +34,76 @@ function PluviometerRegisterScreen(props) {
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<Form <Form
initialValues={{
initialValues={{
}}
onSubmit={() => {
//insertRainData({ ...values, rain, location, date, time, address });
showMessage({
message: "Ainda não implementado",
duration: 1950,
icon: "warning",
type: "warning",
onPress: () => { },
});
//props.navigation.navigate("Home");
}}>
}}
onSubmit={() => {
//insertRainData({ ...values, rain, location, date, time, address });
showMessage({
message: "Ainda não implementado",
duration: 1950,
icon: "warning",
type: "warning",
onPress: () => { },
});
//props.navigation.navigate("Home");
}}>
<View <View
style={{ style={{
flexDirection: "column", flexDirection: "column",
justifyContent: "space-between",
alignContent: "flex-start", alignContent: "flex-start",
flex: 0.9,
justifyContent: "space-evenly",
flex: 1
}} }}
> >
<View style={{ flex: 0.8 }}>
<Text style={styles.title}> Cadastro do Pluviômetro </Text>
<View style={{ flex: 0.10 }}>
<Text style={styles.title}>Cadastro do Pluviômetro</Text>
</View> </View>
<View style={{ flex: 2 }}>
<View style={{ flex: 0.30 }}>
<Text style={styles.label}>Escola: </Text> <Text style={styles.label}>Escola: </Text>
<SchoolPicker <SchoolPicker
itemSelected={(value) => setSchool(value)} /> itemSelected={(value) => setSchool(value)} />
</View> </View>
<View style={{ flex: 2 }}>
{/*Local do evento:*/}
<Text style={styles.label}>Endereço do pluviômetro: </Text>
<View style={{
flex: 0.60, flexDirection: "column",
justifyContent: "space-between"
}}>
<ScrollView> <ScrollView>
<FormLocationPicker subtitle="Defina o endereço do pluviômetro" />
{/*Local do evento:*/}
<View style={{ flex: 1 }}>
<Text style={styles.label}>Endereço do pluviômetro: </Text>
<FormLocationPicker subtitle="Defina o endereço do pluviômetro" />
</View>
{/*Data da coleta:*/}
<View style={{ flex: 1 }}>
<Text style={{
fontSize: dimensions.text.secondary,
fontWeight: "bold",
textAlign: "left",
color: colors.lightBlue, marginBottom: 10
}}>Data do cadastro: </Text>
<FormDatePicker
disabled={true}
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
subtitle=" "
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
</View>
<View style={{ flex: 0.10, marginTop:15 }}>
<SubmitButton title="Cadastrar" alignContent="flex-end" />
</View>
</ScrollView> </ScrollView>
</View> </View>
{/*Data da coleta:*/}
<View style={{ flex: 2 }}>
<Text style={{
fontSize: dimensions.text.secondary,
fontWeight: "bold",
textAlign: "left",
color: colors.lightBlue, marginBottom: 10
}}>Data do cadastro: </Text>
<FormDatePicker
disabled={true}
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
subtitle=" "
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
</View>
</View> </View>
<SubmitButton title="Cadastrar" style={{ marginBottom: 100 }} />
</Form> </Form>
</Screen> </Screen>
); );

Loading…
Cancel
Save