Browse Source

align date-time and location picker

master
analuizaff 4 years ago
parent
commit
6668d44811
  1. 11
      src/app/components/EventLocationInput.js
  2. 13
      src/app/components/forms/FormDatePicker.js
  3. 26
      src/app/components/forms/FormLocationPicker.js
  4. 3
      src/app/screens/PluviometerSharingDataScreen.js
  5. 3
      src/app/screens/RainSharingDataScreen.js
  6. 3
      src/app/screens/RiverFloodSharingDataScreen.js
  7. 3
      src/app/screens/SharingFloodZonesScreen.js

11
src/app/components/EventLocationInput.js

@ -2,12 +2,19 @@ import React, { useContext } from "react";
import { EventLocationContext } from "../context/EventLocationContext";
import { Text } from "react-native";
import { dimensions } from "../config/dimensions";
const EventLocationInput = () => {
const context = useContext(EventLocationContext);
return(
<Text> {context.eventLocation} </Text>
return (
<Text style={{
fontSize: dimensions.text.default,
textAlign: "justify",
flex: 1
}}>
{context.eventLocation}
</Text>
);
}

13
src/app/components/forms/FormDatePicker.js

@ -72,6 +72,7 @@ const FormDatePicker = (props) => {
value={new Date(auxDate)}
mode={mode}
is24Hour={true}
locale={"pt-br"}
minimumDate={new Date(moment().subtract(1, "month"))}
maximumDate={new Date(moment())}
formatChosenDate={(selectedDate) => {
@ -91,9 +92,9 @@ const FormDatePicker = (props) => {
<TouchableOpacity onPress={() => setShow(true)}>
<View
style={{
flex: 1,
width: "100%",
flexDirection: "row",
alignItems: "center",
alignItems: "flex-start",
justifyContent: "space-between",
}}
>
@ -107,8 +108,7 @@ const FormDatePicker = (props) => {
</View>
<View style={styles.dateInput}>
<Text style={{ fontSize: dimensions.text.default }}>
{" "}
{date.format("DD/MM/YYYY")} {"\n "} {time.format("HH:mm")}
{" "}{date.format("DD/MM/YYYY")} {"\n"} {time.format("HH:mm")}
</Text>
</View>
</View>
@ -199,9 +199,8 @@ const styles = StyleSheet.create({
},
dateInput: {
flex: 0.8,
backgroundColor: colors.white,
borderRadius: 25,
marginVertical: 10,
backgroundColor: colors.white,
paddingLeft: 5,
},
dateIcon: {
backgroundColor: colors.primary,

26
src/app/components/forms/FormLocationPicker.js

@ -8,7 +8,7 @@ import EventLocationInput from "../EventLocationInput";
function FormLocationPicker() {
return (
<View>
<View style={{ width:"100%", paddingLeft: 15 }}>
<View style={styles.location}>
<View style={styles.mapIcon}>
<MaterialIcons
@ -21,37 +21,39 @@ function FormLocationPicker() {
</View>
<View style={styles.adressText}>
<Text>
<EventLocationInput/>
<EventLocationInput />
</Text>
</View>
</View>
<Text style={{ color: colors.primary }}>
Defina o local no mapa
<View>
<Text style={{ color: colors.primary }}>
Defina o local no mapa
</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
location: {
flex: 1,
//flex: 1,
width:"100%",
flexDirection: "row",
alignItems: "center",
alignItems: "flex-start",
justifyContent: "space-between",
// backgroundColor: colors.secondary,
},
adressText: {
flex: 0.78,
backgroundColor: colors.white,
borderRadius: 25,
marginVertical: 10,
flex: 0.80,
paddingLeft: 5,
},
mapIcon: {
backgroundColor: colors.primary,
padding: 8,
width: 20,
alignItems: "center",
alignItems: "flex-start",
borderRadius: 5,
flex: 0.2,
flex: 0.20,
},
});

3
src/app/screens/PluviometerSharingDataScreen.js

@ -86,6 +86,7 @@ function PluviometerSharingDataScreen(props) {
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignContent:"flex-start",
}}
>
{/*Data da coleta:*/}
@ -107,7 +108,7 @@ function PluviometerSharingDataScreen(props) {
/>
</View>
{/*Local do evento:*/}
<View style={{ flex: 0.48 }}>
<View style={{ flex: 0.52 }}>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>

3
src/app/screens/RainSharingDataScreen.js

@ -132,6 +132,7 @@ function RainSharingDataScreen(props) {
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignContent:"flex-start",
}}
>
{/*Data da coleta:*/}
@ -153,7 +154,7 @@ function RainSharingDataScreen(props) {
/>
</View>
{/*Local do evento:*/}
<View style={{ flex: 0.48 }}>
<View style={{ flex: 0.52 }}>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>

3
src/app/screens/RiverFloodSharingDataScreen.js

@ -130,6 +130,7 @@ function RiverFloodSharingDataScreen(props) {
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignContent:"flex-start",
}}
>
{/*Data da coleta:*/}
@ -151,7 +152,7 @@ function RiverFloodSharingDataScreen(props) {
/>
</View>
{/*Local do evento:*/}
<View style={{ flex: 0.48 }}>
<View style={{ flex: 0.52 }}>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>

3
src/app/screens/SharingFloodZonesScreen.js

@ -118,6 +118,7 @@ function SharingFloodZonesScreen(props) {
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignContent:"flex-start",
}}
>
{/*Data da coleta:*/}
@ -139,7 +140,7 @@ function SharingFloodZonesScreen(props) {
/>
</View>
{/*Local do evento:*/}
<View style={{ flex: 0.48 }}>
<View style={{ flex: 0.51 }}>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>

Loading…
Cancel
Save