Browse Source

Fixing all alignments in forms to new prototype

master
GabrielTrettel 3 years ago
parent
commit
4d6bc0c4f3
  1. 6
      src/app/components/ImageInput.js
  2. 1
      src/app/components/ImageInputList.js
  3. 36
      src/app/components/PickEventDateLocation.js
  4. 5
      src/app/components/TextInput.js
  5. 16
      src/app/components/forms/FormDatePicker.js
  6. 102
      src/app/components/forms/FormLocationPicker.js
  7. 54
      src/app/screens/PluviometerSharingDataScreen.js
  8. 43
      src/app/screens/RainSharingDataScreen.js
  9. 88
      src/app/screens/RiverFloodSharingDataScreen.js
  10. 19
      src/app/screens/SharingFloodZonesScreen.js

6
src/app/components/ImageInput.js

@ -241,11 +241,11 @@ const styles = StyleSheet.create({
height: 35, height: 35,
}, },
addBtnContainer: { addBtnContainer: {
padding: 16,
elevation: 40,
marginVertical: 24,
paddingHorizontal: 16,
paddingTop: 24,
width: "100%", width: "100%",
}, },
addBtn: { addBtn: {
justifyContent: "center", justifyContent: "center",
flexDirection: "row", flexDirection: "row",

1
src/app/components/ImageInputList.js

@ -31,6 +31,7 @@ function ImageInputList({ imageUris = [], onRemoveImage, onAddImage }) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flexDirection: "row", flexDirection: "row",
paddingHorizontal: 16,
}, },
image: { image: {
marginRight: 10, marginRight: 10,

36
src/app/components/PickEventDateLocation.js

@ -16,29 +16,27 @@ export default function PickEventDateLocation({
<View <View
style={{ style={{
flex: 1, flex: 1,
paddingTop: 24,
paddingHorizontal: 16, paddingHorizontal: 16,
flexDirection: "column",
justifyContent: "space-between",
alignContent: "flex-start",
}} }}
> >
{/*Data da coleta:*/}
<View style={{ flex: 0.1 }}>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDate(value)}
onTimeChange={(value) => setTime(value)}
/>
<View
paddingBottom={24}>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDate(value)}
onTimeChange={(value) => setTime(value)}
/>
</View> </View>
{/*Local do evento:*/}
{location &&
<TouchableOpacity onPress={() => navigation.navigate("FormMap")}>
<FormLocationPicker />
</TouchableOpacity>}
{location && (
<TouchableOpacity onPress={() => navigation.navigate("FormMap")}>
<FormLocationPicker />
</TouchableOpacity>
)}
</View> </View>
); );
} }

5
src/app/components/TextInput.js

@ -8,7 +8,7 @@ import {Shadow} from "react-native-shadow-2";
function AppTextInput({ icon, width = "100%", ...otherProps }) { function AppTextInput({ icon, width = "100%", ...otherProps }) {
return ( return (
<Shadow <Shadow
viewStyle={{ width: width}}
viewStyle={{ width: width, height: otherProps.numberOfLines * 20}}
offset={[0, 4]} offset={[0, 4]}
distance={4} distance={4}
radius={4} radius={4}
@ -40,8 +40,7 @@ const styles = StyleSheet.create({
borderRadius: 6, borderRadius: 6,
borderColor: colors.medium, borderColor: colors.medium,
borderWidth: 1, borderWidth: 1,
padding: 10,
flexDirection: "row",
padding: 5,
}, },
icon: { icon: {
marginRight: 10, marginRight: 10,

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

@ -95,18 +95,18 @@ const FormDatePicker = (props) => {
<TouchableOpacity disabled={disabled} onPress={() => setShow(true)}> <TouchableOpacity disabled={disabled} onPress={() => setShow(true)}>
<View <View
style={{ style={{
flex: 1,
width: "100%", width: "100%",
flexDirection: "row", flexDirection: "row",
alignItems: "flex-start",
justifyContent: "space-between",
alignItems: "center",
justifyContent: "flex-start",
}} }}
> >
<View style={styles.dateIcon}> <View style={styles.dateIcon}>
<MaterialCommunityIcons <MaterialCommunityIcons
name="calendar-today" name="calendar-today"
size={30}
size={20}
color="white" color="white"
alignItems="center"
/> />
</View> </View>
<View style={styles.dateInput}> <View style={styles.dateInput}>
@ -206,18 +206,18 @@ const styles = StyleSheet.create({
justifyContent: "center", justifyContent: "center",
}, },
dateInput: { dateInput: {
flex: 0.9,
paddingLeft: 16,
height: "100%", height: "100%",
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
}, },
dateIcon: { dateIcon: {
backgroundColor: colors.primary, backgroundColor: colors.primary,
padding: 8,
width: 20,
width: 40,
height: 40,
alignItems: "center", alignItems: "center",
justifyContent: "center",
borderRadius: 5, borderRadius: 5,
flex: 0.1,
}, },
}); });

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

@ -1,69 +1,65 @@
import React, { useContext } from "react"; import React, { useContext } from "react";
import { StyleSheet, Text, View, PixelRatio } from "react-native";
import { StyleSheet, Text, View } from "react-native";
import { MaterialIcons } from "@expo/vector-icons"; import { MaterialIcons } from "@expo/vector-icons";
import colors from "../../config/colors"; import colors from "../../config/colors";
import EventLocationInput from "../EventLocationInput";
import { dimensions } from "../../config/dimensions"; import { dimensions } from "../../config/dimensions";
import { EventLocationContext } from "../../context/EventLocationContext"; import { EventLocationContext } from "../../context/EventLocationContext";
function FormLocationPicker({ subtitle }) { function FormLocationPicker({ subtitle }) {
const context = useContext(EventLocationContext);
const local = context.eventLocation.toString();
const context = useContext(EventLocationContext);
const local = context.eventLocation.toString();
return (
<View style={{ marginTop: 10, width: "100%" }}>
<View style={styles.location}>
<View style={styles.mapIcon}>
<MaterialIcons
name="location-on"
size={28}
color="white"
alignItems="center"
alignContent="center"
/>
</View>
<View style={styles.adressText}>
<Text style={{
fontSize: dimensions.text.default,
}}>
{local}
</Text>
<View>
<Text style={{ color: colors.primary, height: 50 }}>
{(subtitle ? subtitle : "Defina o local no mapa" )}
</Text>
</View>
</View>
</View>
return (
<View style={styles.location}>
<View style={styles.mapIcon}>
<MaterialIcons
name="location-on"
size={20}
color="white"
/>
</View>
<View style={styles.adressText}>
<Text
style={{
fontSize: dimensions.text.default,
}}
>
{local}
</Text>
<Text style={{ color: colors.primary}}>
{subtitle ? subtitle : "Defina o local no mapa"}
</Text>
</View> </View>
);
</View>
);
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
location: {
//flex: 1,
width: "100%",
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "space-between",
// backgroundColor: colors.secondary,
},
adressText: {
flex: 0.90,
height: "100%",
flexDirection: "column",
justifyContent: "center",
paddingLeft: 5,
},
mapIcon: {
backgroundColor: colors.primary,
padding: 8,
width: 20,
alignItems: "center",
borderRadius: 5,
flex: 0.10,
},
location: {
flex: 1,
width: "100%",
flexDirection: "row",
alignContent: "space-around",
justifyContent: "flex-start",
},
adressText: {
height: "100%",
paddingLeft: 24,
},
mapIcon: {
backgroundColor: colors.primary,
width: 40,
height: 40,
justifyContent: "center",
alignItems: "center",
borderRadius: 5,
},
}); });
export default FormLocationPicker; export default FormLocationPicker;

54
src/app/screens/PluviometerSharingDataScreen.js

@ -69,15 +69,16 @@ function PluviometerSharingDataScreen(props) {
}} }}
validationSchema={validationSchema} validationSchema={validationSchema}
> >
<View style={{ flex: 1 }}>
<Text style={styles.labelStyle}>Quantidade de chuva (mm):</Text>
<FormField
keyboardType="decimal-pad"
maxLength={200}
name="pluviometer"
placeholder="Digite a quantidade de chuva"
/>
</View>
<Text style={{...styles.labelStyle, paddingTop: 24 }}>Quantidade de chuva (mm):</Text>
<FormField
keyboardType="decimal-pad"
maxLength={200}
numberOfLines={2}
name="pluviometer"
placeholder="Digite a quantidade de chuva"
/>
<FormImagePicker <FormImagePicker
backgroundColor={colors.primary} backgroundColor={colors.primary}
@ -85,34 +86,26 @@ function PluviometerSharingDataScreen(props) {
styles={{ width: 50 }} styles={{ width: 50 }}
/> />
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
alignContent: "flex-start",
}}
>
<PickEventDateLocation <PickEventDateLocation
setDate={setDateTime} setDate={setDateTime}
setTime={setTime} setTime={setTime}
navigation={props.navigation} navigation={props.navigation}
location={false} location={false}
/>
/>
<Text style={styles.labelStyle}>Comentário:</Text>
<FormField
maxLength={255}
multiline
name="description"
numberOfLines={3}
placeholder="Escreva um comentário (Opcional)..."
/>
<View paddingVertical={24}>
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</View> </View>
<View style={{ flex: 1 }}>
<Text style={styles.labelStyle}>Comentário:</Text>
<FormField
maxLength={255}
multiline
name="description"
numberOfLines={3}
placeholder="Escreva um comentário (Opcional)..."
/>
</View>
<SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
<View style={{ flex: 1 }}></View>
</Form> </Form>
</ScrollView> </ScrollView>
</Screen> </Screen>
@ -131,6 +124,7 @@ const styles = StyleSheet.create({
}, },
labelStyle: { labelStyle: {
paddingHorizontal: 16, paddingHorizontal: 16,
paddingBottom: 12,
fontSize: dimensions.text.secondary, fontSize: dimensions.text.secondary,
fontWeight: "bold", fontWeight: "bold",
textAlign: "left", textAlign: "left",

43
src/app/screens/RainSharingDataScreen.js

@ -72,11 +72,12 @@ function RainSharingDataScreen(props) {
<View <View
style={{ style={{
paddingHorizontal: 16, paddingHorizontal: 16,
paddingTop: 16,
}} }}
> >
<View style={styles.imgs_row}>
<View flexDirection="row" justifyContent="center" paddingBottom={16}>
<TouchableNativeFeedback onPress={() => setRain(0)}> <TouchableNativeFeedback onPress={() => setRain(0)}>
<View style={styles.img_block}>
<View style={{paddingRight: 16}}>
{rain == 0 ? ( {rain == 0 ? (
<assets.rainLevel.Rain_0_5_Toggle {...dims} /> <assets.rainLevel.Rain_0_5_Toggle {...dims} />
) : ( ) : (
@ -86,17 +87,17 @@ function RainSharingDataScreen(props) {
</TouchableNativeFeedback> </TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRain(1)}> <TouchableNativeFeedback onPress={() => setRain(1)}>
<View style={styles.img_block}>
{rain == 1 ? ( {rain == 1 ? (
<assets.rainLevel.Rain_1_5_Toggle {...dims} /> <assets.rainLevel.Rain_1_5_Toggle {...dims} />
) : ( ) : (
<assets.rainLevel.Rain_1_5 {...dims} /> <assets.rainLevel.Rain_1_5 {...dims} />
)} )}
</View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
</View>
<View flexDirection="row" justifyContent="center">
<TouchableNativeFeedback onPress={() => setRain(2)}> <TouchableNativeFeedback onPress={() => setRain(2)}>
<View style={styles.img_block}>
<View style={{paddingRight: 16}}>
{rain == 2 ? ( {rain == 2 ? (
<assets.rainLevel.Rain_2_5_Toggle {...dims} /> <assets.rainLevel.Rain_2_5_Toggle {...dims} />
) : ( ) : (
@ -104,27 +105,13 @@ function RainSharingDataScreen(props) {
)} )}
</View> </View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
</View>
<View flexDirection="row" justifyContent="center">
<TouchableNativeFeedback onPress={() => setRain(3)}> <TouchableNativeFeedback onPress={() => setRain(3)}>
<View style={styles.img_block}>
{rain == 3 ? ( {rain == 3 ? (
<assets.rainLevel.Rain_3_5_Toggle {...dims} /> <assets.rainLevel.Rain_3_5_Toggle {...dims} />
) : ( ) : (
<assets.rainLevel.Rain_3_5 {...dims} /> <assets.rainLevel.Rain_3_5 {...dims} />
)} )}
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRain(4)}>
<View style={styles.img_block}>
{rain == 4 ? (
<assets.rainLevel.Rain_4_5_Toggle {...dims} />
) : (
<assets.rainLevel.Rain_4_5 {...dims} />
)}
</View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
</View> </View>
</View> </View>
@ -151,7 +138,9 @@ function RainSharingDataScreen(props) {
placeholder="Escreva um comentário (Opcional)..." placeholder="Escreva um comentário (Opcional)..."
/> />
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
<View paddingVertical={24}>
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</View>
</Form> </Form>
</ScrollView> </ScrollView>
</Screen> </Screen>
@ -163,12 +152,12 @@ const styles = StyleSheet.create({
backgroundColor: colors.white, backgroundColor: colors.white,
}, },
img_block: { img_block: {
flex: 1,
borderRadius: 5,
borderStyle: "dotted",
borderColor: colors.white,
borderWidth: borderWidth,
alignItems: "center",
// flex: 1,
// borderRadius: 5,
// borderStyle: "dotted",
// borderColor: colors.white,
// borderWidth: borderWidth,
// alignItems: "center",
}, },
imgs_row: { imgs_row: {
flexDirection: "row", flexDirection: "row",
@ -180,6 +169,8 @@ const styles = StyleSheet.create({
}, },
labelStyle: { labelStyle: {
paddingHorizontal: 16, paddingHorizontal: 16,
paddingTop: 24,
paddingBottom: 12,
fontSize: dimensions.text.secondary, fontSize: dimensions.text.secondary,
fontWeight: "bold", fontWeight: "bold",
textAlign: "left", textAlign: "left",

88
src/app/screens/RiverFloodSharingDataScreen.js

@ -48,7 +48,7 @@ function RiverFloodSharingDataScreen(props) {
const [date, setDate] = useState(moment()); const [date, setDate] = useState(moment());
const [time, setTime] = useState(moment()); const [time, setTime] = useState(moment());
const dims = scaleDimsFromWidth(80, 80, 20);
const dims = { width: 105, height: 105 }; //scaleDimsFromWidth(80, 80, 26);
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
@ -66,7 +66,14 @@ function RiverFloodSharingDataScreen(props) {
setError(true); setError(true);
return; return;
} }
insertRiverData({ ...values, riverScale, location, date, time, address });
insertRiverData({
...values,
riverScale,
location,
date,
time,
address,
});
showMessage({ showMessage({
message: "Informação enviada!", message: "Informação enviada!",
duration: 1950, duration: 1950,
@ -77,30 +84,42 @@ function RiverFloodSharingDataScreen(props) {
}} }}
validationSchema={validationSchema} validationSchema={validationSchema}
> >
<View style={{paddingHorizontal: 16}}>
<View style={styles.imgs_row}>
<TouchableNativeFeedback onPress={() => setRiverScale(0)}>
<View style={styles.img_block}>
{riverScale == 0 ? (
<assets.riverLevel.LowToggle {...dims} />
) : (
<assets.riverLevel.Low {...dims} />
)}
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRiverScale(1)}>
<View style={styles.img_block}>
<View
style={{
paddingHorizontal: 16,
paddingTop: 16,
flexDirection: "column",
}}
>
<View
flexDirection="row"
justifyContent="center"
paddingBottom={16}
>
<View style={styles.imgs_row}>
<TouchableNativeFeedback onPress={() => setRiverScale(0)}>
<View style={{ paddingRight: 16 }}>
{riverScale == 0 ? (
<assets.riverLevel.LowToggle {...dims} />
) : (
<assets.riverLevel.Low {...dims} />
)}
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRiverScale(1)}>
{riverScale == 1 ? ( {riverScale == 1 ? (
<assets.riverLevel.NormalToggle {...dims} /> <assets.riverLevel.NormalToggle {...dims} />
) : ( ) : (
<assets.riverLevel.Normal {...dims} /> <assets.riverLevel.Normal {...dims} />
)} )}
</View>
</TouchableNativeFeedback>
</TouchableNativeFeedback>
</View>
</View>
<View flexDirection="row" justifyContent="center">
<TouchableNativeFeedback onPress={() => setRiverScale(2)}> <TouchableNativeFeedback onPress={() => setRiverScale(2)}>
<View style={styles.img_block}>
<View style={{ paddingRight: 16 }}>
{riverScale == 2 ? ( {riverScale == 2 ? (
<assets.riverLevel.HighToggle {...dims} /> <assets.riverLevel.HighToggle {...dims} />
) : ( ) : (
@ -110,13 +129,11 @@ function RiverFloodSharingDataScreen(props) {
</TouchableNativeFeedback> </TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRiverScale(3)}> <TouchableNativeFeedback onPress={() => setRiverScale(3)}>
<View style={styles.img_block}>
{riverScale == 3 ? (
<assets.riverLevel.FloodingToggle {...dims} />
) : (
<assets.riverLevel.Flooding {...dims} />
)}
</View>
{riverScale == 3 ? (
<assets.riverLevel.FloodingToggle {...dims} />
) : (
<assets.riverLevel.Flooding {...dims} />
)}
</TouchableNativeFeedback> </TouchableNativeFeedback>
</View> </View>
</View> </View>
@ -126,13 +143,15 @@ function RiverFloodSharingDataScreen(props) {
)} )}
<FormImagePicker backgroundColor={colors.primary} name="images" /> <FormImagePicker backgroundColor={colors.primary} name="images" />
<PickEventDateLocation <PickEventDateLocation
setDate={setDate} setDate={setDate}
setTime={setTime} setTime={setTime}
navigation={props.navigation}/>
navigation={props.navigation}
/>
<View style={{ flex: 1 }}>
<Text style={styles.labelStyle}>Comentário:</Text> <Text style={styles.labelStyle}>Comentário:</Text>
<FormField <FormField
maxLength={255} maxLength={255}
multiline multiline
@ -140,8 +159,10 @@ function RiverFloodSharingDataScreen(props) {
numberOfLines={3} numberOfLines={3}
placeholder="Escreva um comentário (Opcional)..." placeholder="Escreva um comentário (Opcional)..."
/> />
<View paddingVertical={24}>
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</View> </View>
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form> </Form>
</KeyboardAwareScrollView> </KeyboardAwareScrollView>
</Screen> </Screen>
@ -152,13 +173,6 @@ const styles = StyleSheet.create({
container: { container: {
backgroundColor: colors.white, backgroundColor: colors.white,
}, },
img_block: {
borderRadius: 5,
borderStyle: "dotted",
borderColor: colors.white,
borderWidth: borderWidth,
alignItems: "center",
},
imgs_row: { imgs_row: {
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
@ -169,6 +183,8 @@ const styles = StyleSheet.create({
}, },
labelStyle: { labelStyle: {
paddingHorizontal: 16, paddingHorizontal: 16,
paddingTop: 24,
paddingBottom: 12,
fontSize: dimensions.text.secondary, fontSize: dimensions.text.secondary,
fontWeight: "bold", fontWeight: "bold",
textAlign: "left", textAlign: "left",

19
src/app/screens/SharingFloodZonesScreen.js

@ -82,7 +82,7 @@ function SharingFloodZonesScreen(props) {
> >
<View style={styles.imgs_container}> <View style={styles.imgs_container}>
<TouchableNativeFeedback onPress={() => setPassable(1)}> <TouchableNativeFeedback onPress={() => setPassable(1)}>
<View>
<View style={{paddingRight: 17}}>
{passable == 1 ? ( {passable == 1 ? (
<Image <Image
source={assets.floodZones.passable_toggle} source={assets.floodZones.passable_toggle}
@ -98,7 +98,6 @@ function SharingFloodZonesScreen(props) {
</TouchableNativeFeedback> </TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(0)}> <TouchableNativeFeedback onPress={() => setPassable(0)}>
<View style={styles.img_block}>
{passable == 0 ? ( {passable == 0 ? (
<Image <Image
source={assets.floodZones.notPassable_toggle} source={assets.floodZones.notPassable_toggle}
@ -110,7 +109,6 @@ function SharingFloodZonesScreen(props) {
source={assets.floodZones.notPassable2} source={assets.floodZones.notPassable2}
/> />
)} )}
</View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
</View> </View>
@ -123,7 +121,8 @@ function SharingFloodZonesScreen(props) {
<PickEventDateLocation <PickEventDateLocation
setDate={setDate} setDate={setDate}
setTime={setTime} setTime={setTime}
navigation={props.navigation}/>
navigation={props.navigation}
/>
<Text style={styles.labelStyle}>Comentário:</Text> <Text style={styles.labelStyle}>Comentário:</Text>
<FormField <FormField
@ -133,7 +132,10 @@ function SharingFloodZonesScreen(props) {
numberOfLines={3} numberOfLines={3}
placeholder="Escreva um comentário (Opcional)..." placeholder="Escreva um comentário (Opcional)..."
/> />
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
<View paddingVertical={24}>
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</View>
</Form> </Form>
</KeyboardAwareScrollView> </KeyboardAwareScrollView>
</Screen> </Screen>
@ -144,7 +146,6 @@ const dims = scaleDimsFromWidth(93, 106, 30.0);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
// padding: 17,
backgroundColor: colors.white, backgroundColor: colors.white,
}, },
@ -161,10 +162,10 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
}, },
imgs_container: { imgs_container: {
paddingTop: 16,
flexDirection: "row", flexDirection: "row",
justifyContent: "space-evenly",
justifyContent: "center",
}, },
text: { text: {
paddingTop: 5, paddingTop: 5,
fontSize: dimensions.text.default, fontSize: dimensions.text.default,
@ -178,6 +179,8 @@ const styles = StyleSheet.create({
fontSize: dimensions.text.secondary, fontSize: dimensions.text.secondary,
fontWeight: "bold", fontWeight: "bold",
paddingHorizontal: 16, paddingHorizontal: 16,
paddingTop: 24,
paddingBottom: 12,
textAlign: "left", textAlign: "left",
color: colors.lightBlue, color: colors.lightBlue,
}, },

Loading…
Cancel
Save