Browse Source

Implementing SharingFloodZonesScreen UI

master
GabrielTrettel 4 years ago
parent
commit
80eb9503d5
  1. 78
      src/app/screens/SharingFloodZonesScreen.js

78
src/app/screens/SharingFloodZonesScreen.js

@ -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",
},
});

Loading…
Cancel
Save