From fe96fa007b5ed441de25f052356b5d72ed7acef5 Mon Sep 17 00:00:00 2001 From: analuizaff Date: Mon, 22 Mar 2021 19:22:03 -0300 Subject: [PATCH] updating date-time and location picker layout --- src/app/components/EventLocationInput.js | 4 +- src/app/components/forms/FormDatePicker.js | 39 +++++++++++-------- .../components/forms/FormLocationPicker.js | 36 ++++++++++------- src/app/context/CurrentLocationContext.js | 6 +-- src/app/screens/MapFormScreen.js | 8 ++-- .../screens/PluviometerSharingDataScreen.js | 10 ++--- src/app/screens/RainSharingDataScreen.js | 8 ++-- .../screens/RiverFloodSharingDataScreen.js | 10 ++--- src/app/screens/SharingFloodZonesScreen.js | 10 ++--- 9 files changed, 65 insertions(+), 66 deletions(-) diff --git a/src/app/components/EventLocationInput.js b/src/app/components/EventLocationInput.js index 01dccb4..7a4b749 100644 --- a/src/app/components/EventLocationInput.js +++ b/src/app/components/EventLocationInput.js @@ -3,6 +3,7 @@ import { EventLocationContext } from "../context/EventLocationContext"; import { Text } from "react-native"; import { dimensions } from "../config/dimensions"; +import colors from "../config/colors"; const EventLocationInput = () => { const context = useContext(EventLocationContext); @@ -11,7 +12,8 @@ const EventLocationInput = () => { {context.eventLocation} diff --git a/src/app/components/forms/FormDatePicker.js b/src/app/components/forms/FormDatePicker.js index 658c453..fd3d783 100644 --- a/src/app/components/forms/FormDatePicker.js +++ b/src/app/components/forms/FormDatePicker.js @@ -52,17 +52,17 @@ const FormDatePicker = (props) => { setShow(false); if (mode == "date") { - setDate(moment(auxDate)); //atualizar a data com a variável auxiliar - props.onDateChange(auxDate); - setMode("time"); - setShow(true); // to show the picker again in time mode - } - else { - setTime(moment(auxDate)); - props.onTimeChange(auxDate); - setShow(false); - setMode("date"); - } + setDate(moment(auxDate)); //atualizar a data com a variável auxiliar + props.onDateChange(auxDate); + setMode("time"); + setShow(true); // to show the picker again in time mode + } + else { + setTime(moment(auxDate)); + props.onTimeChange(auxDate); + setShow(false); + setMode("date"); + } }; const renderDatePicker = () => { @@ -108,8 +108,13 @@ const FormDatePicker = (props) => { - {" "}{date.format("DD/MM/YYYY")} {"\n"} {time.format("HH:mm")} + {" "}{date.format("DD/MM/YYYY")} {" | "} {time.format("HH:mm")} + + + Defina a data do evento + + {Platform.OS !== "ios" && show && renderDatePicker()} @@ -177,8 +182,8 @@ const FormDatePicker = (props) => { FormDatePicker.defaultProps = { textStyle: {}, defaultDate: moment(), - onDateChange: () => {}, - onTimeChange: () => {}, + onDateChange: () => { }, + onTimeChange: () => { }, }; const styles = StyleSheet.create({ @@ -198,8 +203,8 @@ const styles = StyleSheet.create({ justifyContent: "center", }, dateInput: { - flex: 0.8, - backgroundColor: colors.white, + flex: 0.9, + backgroundColor: colors.white, paddingLeft: 5, }, dateIcon: { @@ -208,7 +213,7 @@ const styles = StyleSheet.create({ width: 20, alignItems: "center", borderRadius: 5, - flex: 0.2, + flex: 0.1, }, }); diff --git a/src/app/components/forms/FormLocationPicker.js b/src/app/components/forms/FormLocationPicker.js index 954fd92..c901585 100644 --- a/src/app/components/forms/FormLocationPicker.js +++ b/src/app/components/forms/FormLocationPicker.js @@ -1,16 +1,18 @@ -import React from "react"; +import React, { useContext } from "react"; import { StyleSheet, Text, View, PixelRatio } from "react-native"; import { MaterialIcons } from "@expo/vector-icons"; import colors from "../../config/colors"; import EventLocationInput from "../EventLocationInput"; +import { dimensions } from "../../config/dimensions"; +import { EventLocationContext } from "../../context/EventLocationContext"; function FormLocationPicker() { + const context = useContext(EventLocationContext); + const local = context.eventLocation.toString(); return ( - 3 || PixelRatio.getFontScale() > 1.14 ? 0 : 15), - marginTop: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? 10 : 0)}}> + - - + + {local} + + + Defina o local no mapa + + - - - Defina o local no mapa - - ); } @@ -39,14 +45,14 @@ function FormLocationPicker() { const styles = StyleSheet.create({ location: { //flex: 1, - width:"100%", + width: "100%", flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between", - // backgroundColor: colors.secondary, + // backgroundColor: colors.secondary, }, adressText: { - flex: 0.80, + flex: 0.90, paddingLeft: 5, }, mapIcon: { @@ -55,7 +61,7 @@ const styles = StyleSheet.create({ width: 20, alignItems: "center", borderRadius: 5, - flex: 0.20, + flex: 0.10, }, }); diff --git a/src/app/context/CurrentLocationContext.js b/src/app/context/CurrentLocationContext.js index 9c89e8c..cc93f11 100644 --- a/src/app/context/CurrentLocationContext.js +++ b/src/app/context/CurrentLocationContext.js @@ -41,9 +41,9 @@ const CurrentLocationProvider = ({ children }) => { const address = await Location.reverseGeocodeAsync(coordenadas); if (address[0] != undefined) { var street = (address[0].street == null ? "" : address[0].street); - var number = (address[0].name == null ? "" : address[0].name); - var district = (address[0].district == null ? "" : address[0].district); - setCurrentLocation(street + ", "+ number + "\n" + district , coordenadas.x); + var number = (address[0].name == null ? "" : ", " + address[0].name); + var district = (address[0].district == null ? "" : "\n" + address[0].district); + setCurrentLocation(street + number + district , coordenadas.x); } else{//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio setCurrentLocation("Erro ao carregar localização", coordenadas.x); diff --git a/src/app/screens/MapFormScreen.js b/src/app/screens/MapFormScreen.js index 98f0636..8795cc7 100644 --- a/src/app/screens/MapFormScreen.js +++ b/src/app/screens/MapFormScreen.js @@ -24,9 +24,9 @@ const MapFormScreen = (props) => { const address = await Location.reverseGeocodeAsync(coordenadas); if (address[0] != undefined) { var street = (address[0].street == null ? "" : address[0].street); - var number = (address[0].name == null ? "" : address[0].name); - var district = (address[0].district == null ? "" : address[0].district); - context.saveNewLocation(street + ", " + number + "\n" + district, coordenadas); + var number = (address[0].name == null ? "" : ", " + address[0].name); + var district = (address[0].district == null ? "" : "\n" + address[0].district); + context.saveNewLocation(street + number + district, coordenadas); } else { //Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio context.saveNewLocation("Erro ao carregar endereço", coordenadas); @@ -63,7 +63,7 @@ const MapFormScreen = (props) => { ...lat_long_delta, }} onRegionChangeComplete={(r) => { - console.log(r); + // console.log(r); setMarker({ latitude: r.latitude, longitude: r.longitude }); }} /> diff --git a/src/app/screens/PluviometerSharingDataScreen.js b/src/app/screens/PluviometerSharingDataScreen.js index 96953c9..a68664e 100644 --- a/src/app/screens/PluviometerSharingDataScreen.js +++ b/src/app/screens/PluviometerSharingDataScreen.js @@ -87,18 +87,14 @@ function PluviometerSharingDataScreen(props) { 3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"), + flexDirection: "column", justifyContent: "space-between", alignContent: "flex-start", }} > {/*Data da coleta:*/} {/*Local do evento:*/} - + props.navigation.navigate("FormMap")} > diff --git a/src/app/screens/RainSharingDataScreen.js b/src/app/screens/RainSharingDataScreen.js index 0f88a7d..d4841e3 100644 --- a/src/app/screens/RainSharingDataScreen.js +++ b/src/app/screens/RainSharingDataScreen.js @@ -131,7 +131,7 @@ function RainSharingDataScreen(props) { 3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"), + flexDirection: "column", justifyContent: "space-between", alignContent: "flex-start", }} @@ -139,9 +139,7 @@ function RainSharingDataScreen(props) { {/*Data da coleta:*/} {/*Local do evento:*/} - + props.navigation.navigate("FormMap")} > diff --git a/src/app/screens/RiverFloodSharingDataScreen.js b/src/app/screens/RiverFloodSharingDataScreen.js index 0021bf6..18f173e 100644 --- a/src/app/screens/RiverFloodSharingDataScreen.js +++ b/src/app/screens/RiverFloodSharingDataScreen.js @@ -129,18 +129,14 @@ function RiverFloodSharingDataScreen(props) { 3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"), + flexDirection: "column", justifyContent: "space-between", alignContent:"flex-start", }} > {/*Data da coleta:*/} {/*Local do evento:*/} - + props.navigation.navigate("FormMap")} > diff --git a/src/app/screens/SharingFloodZonesScreen.js b/src/app/screens/SharingFloodZonesScreen.js index c17582e..5b389be 100644 --- a/src/app/screens/SharingFloodZonesScreen.js +++ b/src/app/screens/SharingFloodZonesScreen.js @@ -115,18 +115,14 @@ function SharingFloodZonesScreen(props) { 3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"), + flexDirection: "column", justifyContent: "space-between", alignContent:"flex-start", }} > {/*Data da coleta:*/} {/*Local do evento:*/} - + props.navigation.navigate("FormMap")} >