|
@ -1,5 +1,5 @@ |
|
|
import React from "react"; |
|
|
import React from "react"; |
|
|
import { StyleSheet } from "react-native"; |
|
|
|
|
|
|
|
|
import { StyleSheet, View } from "react-native"; |
|
|
import * as Yup from "yup"; |
|
|
import * as Yup from "yup"; |
|
|
|
|
|
|
|
|
import { |
|
|
import { |
|
@ -12,98 +12,65 @@ import CategoryPickerItem from "../components/CategoryPickerItem"; |
|
|
import Screen from "../components/Screen"; |
|
|
import Screen from "../components/Screen"; |
|
|
import FormImagePicker from "../components/forms/FormImagePicker"; |
|
|
import FormImagePicker from "../components/forms/FormImagePicker"; |
|
|
import useLocation from "../hooks/useLocation"; |
|
|
import useLocation from "../hooks/useLocation"; |
|
|
|
|
|
|
|
|
const validationSchema = Yup.object().shape({ |
|
|
|
|
|
title: Yup.string().required().min(1).label("Title"), |
|
|
|
|
|
price: Yup.number().required().min(1).max(10000).label("Price"), |
|
|
|
|
|
description: Yup.string().label("Description"), |
|
|
|
|
|
category: Yup.object().required().nullable().label("Category"), |
|
|
|
|
|
images: Yup.array().min(1, "Please select at least one image."), |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const categories = [ |
|
|
|
|
|
{ |
|
|
|
|
|
backgroundColor: "#2e53ff", |
|
|
|
|
|
icon: "wave", |
|
|
|
|
|
label: "Pontos de alagamento", |
|
|
|
|
|
value: 1, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
backgroundColor: "#2e53ff", |
|
|
|
|
|
icon: "weather-pouring", |
|
|
|
|
|
label: "Chuva", |
|
|
|
|
|
value: 2, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
backgroundColor: "#2e53ff", |
|
|
|
|
|
icon: "waves", |
|
|
|
|
|
label: "Diário do pluviômetro", |
|
|
|
|
|
value: 3, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
backgroundColor: "#2e53ff", |
|
|
|
|
|
icon: "waves", |
|
|
|
|
|
label: "Diário do pluviômetro", |
|
|
|
|
|
value: 3, |
|
|
|
|
|
|
|
|
import { Image, Text } from 'react-native'; |
|
|
|
|
|
import { Ionicons } from '@expo/vector-icons'; |
|
|
|
|
|
//1/3
|
|
|
|
|
|
const styles = StyleSheet.create({ |
|
|
|
|
|
container:{ |
|
|
|
|
|
paddingTop:50, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
|
|
|
backgroundColor: "#2e53ff", |
|
|
|
|
|
icon: "water-percent", |
|
|
|
|
|
label: "Nível do rio", |
|
|
|
|
|
value: 4, |
|
|
|
|
|
|
|
|
rainLogo: { |
|
|
|
|
|
width: 110, |
|
|
|
|
|
height:100, |
|
|
|
|
|
margin:30, |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
|
|
|
|
|
|
floodingLogo: { |
|
|
|
|
|
width: 85, |
|
|
|
|
|
height:85, |
|
|
|
|
|
marginTop: 70, |
|
|
|
|
|
|
|
|
function SharingDataScreen() { |
|
|
|
|
|
const location = useLocation(); |
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const SharingDataScreen = () => { |
|
|
return( |
|
|
return( |
|
|
<Screen style={styles.container}> |
|
|
|
|
|
<Form |
|
|
|
|
|
initialValues={{ |
|
|
|
|
|
title: "", |
|
|
|
|
|
price: "", |
|
|
|
|
|
description: "", |
|
|
|
|
|
category: null, |
|
|
|
|
|
images: [], |
|
|
|
|
|
}} |
|
|
|
|
|
onSubmit={(values) => console.log(location)} |
|
|
|
|
|
validationSchema={validationSchema} |
|
|
|
|
|
> |
|
|
|
|
|
<FormImagePicker name="images" /> |
|
|
|
|
|
<FormField maxLength={255} name="title" placeholder="Título" /> |
|
|
|
|
|
<FormField |
|
|
|
|
|
keyboardType="numeric" |
|
|
|
|
|
maxLength={8} |
|
|
|
|
|
name="price" |
|
|
|
|
|
placeholder="Valor" |
|
|
|
|
|
width={120} |
|
|
|
|
|
|
|
|
<View style={styles.container}> |
|
|
|
|
|
<Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray'}}> |
|
|
|
|
|
Enviar uma informação |
|
|
|
|
|
</Text> |
|
|
|
|
|
|
|
|
|
|
|
<View style={{flexDirection:'row', justifyContent: 'space-around'}}> |
|
|
|
|
|
<Image |
|
|
|
|
|
style = {styles.floodingLogo} |
|
|
|
|
|
source={require("../assets/pontos_alagamento_peq.png")} |
|
|
/> |
|
|
/> |
|
|
<Picker |
|
|
|
|
|
items={categories} |
|
|
|
|
|
name="category" |
|
|
|
|
|
numberOfColumns={3} |
|
|
|
|
|
PickerItemComponent={CategoryPickerItem} |
|
|
|
|
|
placeholder="Categoria" |
|
|
|
|
|
width="50%" |
|
|
|
|
|
|
|
|
<Image |
|
|
|
|
|
style = {styles.floodingLogo} |
|
|
|
|
|
source={require("../assets/chuva_peq.png")} |
|
|
|
|
|
/> |
|
|
|
|
|
</View> |
|
|
|
|
|
<View style={{flexDirection:'row'}}> |
|
|
|
|
|
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 50}}>Pontos de {"\n"}alagamento</Text> |
|
|
|
|
|
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 130}}>Chuva</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
|
|
<View style={{flexDirection:'row', justifyContent: 'space-around'}}> |
|
|
|
|
|
<Image |
|
|
|
|
|
style = {styles.floodingLogo} |
|
|
|
|
|
source={require("../assets/diario_pluviometrico.png")} |
|
|
/> |
|
|
/> |
|
|
<FormField |
|
|
|
|
|
maxLength={255} |
|
|
|
|
|
multiline |
|
|
|
|
|
name="description" |
|
|
|
|
|
numberOfLines={3} |
|
|
|
|
|
placeholder="Descrição" |
|
|
|
|
|
|
|
|
<Image |
|
|
|
|
|
style = {styles.floodingLogo} |
|
|
|
|
|
source={require("../assets/nivel_rio.png")} |
|
|
/> |
|
|
/> |
|
|
<SubmitButton title="Post" /> |
|
|
|
|
|
</Form> |
|
|
|
|
|
</Screen> |
|
|
|
|
|
|
|
|
</View> |
|
|
|
|
|
<View style={{flexDirection:'row', justifyContent: 'space-around'}}> |
|
|
|
|
|
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10}}>Diário do{"\n"}pluviômetro</Text> |
|
|
|
|
|
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10}}>Nível de água {"\n"}no rio</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
</View> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({ |
|
|
|
|
|
container: { |
|
|
|
|
|
padding: 10, |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
export default SharingDataScreen; |
|
|
export default SharingDataScreen; |