|
|
@ -1,47 +1,76 @@ |
|
|
|
import React, { useState } from "react"; |
|
|
|
import { |
|
|
|
StyleSheet, |
|
|
|
Text, |
|
|
|
Image, |
|
|
|
View, |
|
|
|
TouchableHighlight, |
|
|
|
} from "react-native"; |
|
|
|
import { Dimensions } from "react-native"; |
|
|
|
import { StyleSheet, Text, Image, View } from "react-native"; |
|
|
|
import * as Yup from "yup"; |
|
|
|
|
|
|
|
import { Form, SubmitButton, FormField } from "../components/forms"; |
|
|
|
import FormImagePicker from "../components/forms/FormImagePicker"; |
|
|
|
import Screen from "../components/Screen"; |
|
|
|
import useLocation from "../hooks/useLocation"; |
|
|
|
import colors from "../config/colors"; |
|
|
|
import { TouchableNativeFeedback } from "react-native-gesture-handler"; |
|
|
|
|
|
|
|
function submitForm(passable, image) { |
|
|
|
console.log(passable, image); |
|
|
|
} |
|
|
|
|
|
|
|
const validationSchema = Yup.object().shape({ |
|
|
|
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"), |
|
|
|
description: Yup.string() |
|
|
|
.label("Description") |
|
|
|
.required("Por favor, forneça uma descrição"), |
|
|
|
}); |
|
|
|
|
|
|
|
const screen_width = Dimensions.get("window").width; |
|
|
|
|
|
|
|
function SharingFloodZonesScreen() { |
|
|
|
const [passable, setPassable] = useState(0); |
|
|
|
const [image, setImage] = useState(); |
|
|
|
const location = useLocation(); |
|
|
|
const [passable, setPassable] = useState(-1); |
|
|
|
|
|
|
|
console.log(passable); |
|
|
|
|
|
|
|
return ( |
|
|
|
<Screen style={styles.container}> |
|
|
|
<Text style={styles.header}>Pontos de alagamento</Text> |
|
|
|
|
|
|
|
<Form |
|
|
|
initialValues={{ |
|
|
|
images: [], |
|
|
|
description: "", |
|
|
|
}} |
|
|
|
onSubmit={(values) => console.log({ ...values, passable, location })} |
|
|
|
validationSchema={validationSchema} |
|
|
|
> |
|
|
|
<View style={styles.imgs_container}> |
|
|
|
<TouchableHighlight onPress={() => setPassable(1)}> |
|
|
|
<View style={styles.img_block}> |
|
|
|
<TouchableNativeFeedback onPress={() => setPassable(1)}> |
|
|
|
<View style={styles.img_block} borderWidth={passable == 1 ? 1 : 0}> |
|
|
|
<Image |
|
|
|
style={styles.image} |
|
|
|
source={require("../assets/floodZonesAssets/passable_icon.png")} |
|
|
|
/> |
|
|
|
<Text>Transitável</Text> |
|
|
|
</View> |
|
|
|
</TouchableHighlight> |
|
|
|
</TouchableNativeFeedback> |
|
|
|
|
|
|
|
<TouchableHighlight onPress={() => setPassable(0)}> |
|
|
|
<View style={styles.img_block}> |
|
|
|
<TouchableNativeFeedback onPress={() => setPassable(0)}> |
|
|
|
<View style={styles.img_block} borderWidth={passable == 0 ? 1 : 0}> |
|
|
|
<Image |
|
|
|
style={styles.image} |
|
|
|
source={require("../assets/floodZonesAssets/not_passable_icon.png")} |
|
|
|
/> |
|
|
|
<Text>Intransitável</Text> |
|
|
|
</View> |
|
|
|
</TouchableHighlight> |
|
|
|
</TouchableNativeFeedback> |
|
|
|
</View> |
|
|
|
|
|
|
|
<FormImagePicker name="images" height={10} /> |
|
|
|
|
|
|
|
<FormField |
|
|
|
maxLength={255} |
|
|
|
multiline |
|
|
|
name="description" |
|
|
|
numberOfLines={3} |
|
|
|
placeholder="Descrição" |
|
|
|
/> |
|
|
|
<SubmitButton title="Enviar" backgroundColor={colors.background} /> |
|
|
|
</Form> |
|
|
|
</Screen> |
|
|
|
); |
|
|
|
} |
|
|
@ -49,9 +78,9 @@ function SharingFloodZonesScreen() { |
|
|
|
const styles = StyleSheet.create({ |
|
|
|
container: { |
|
|
|
padding: 10, |
|
|
|
alignItems: "center", |
|
|
|
justifyContent: "center", |
|
|
|
}, |
|
|
|
|
|
|
|
header: { |
|
|
|
fontSize: 18, |
|
|
|
color: colors.primary, |
|
|
@ -66,16 +95,17 @@ const styles = StyleSheet.create({ |
|
|
|
img_block: { |
|
|
|
height: 100, |
|
|
|
padding: 10, |
|
|
|
display: "flex", |
|
|
|
flexDirection: "column", |
|
|
|
borderRadius: 5, |
|
|
|
borderStyle: "dotted", |
|
|
|
borderColor: "blue", |
|
|
|
justifyContent: "center", |
|
|
|
alignItems: "center", |
|
|
|
}, |
|
|
|
imgs_container: { |
|
|
|
display: "flex", |
|
|
|
alignSelf: "center", |
|
|
|
width: screen_width, |
|
|
|
flexDirection: "row", |
|
|
|
justifyContent: "space-evenly", |
|
|
|
padding: 10, |
|
|
|
justifyContent: "center", |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|