Browse Source

Adding shadows and refactoring event location and time to its custom

component
master
GabrielTrettel 3 years ago
parent
commit
cfcb87a7b3
  1. 28
      src/app/components/ImageInput.js
  2. 44
      src/app/components/PickEventDateLocation.js
  3. 11
      src/app/components/TextInput.js
  4. 6
      src/app/components/forms/FormField.js
  5. 25
      src/app/components/forms/FormImagePicker.js
  6. 8
      src/app/components/forms/SubmitButton.js
  7. 24
      src/app/screens/MapFeedScreen.js
  8. 28
      src/app/screens/PluviometerSharingDataScreen.js
  9. 52
      src/app/screens/RainSharingDataScreen.js
  10. 40
      src/app/screens/RiverFloodSharingDataScreen.js
  11. 52
      src/app/screens/SharingFloodZonesScreen.js
  12. 1
      src/package.json

28
src/app/components/ImageInput.js

@ -1,4 +1,5 @@
import React, { useEffect, useState } from "react";
import { Shadow } from "react-native-shadow-2";
import {
View,
StyleSheet,
@ -70,12 +71,24 @@ const launchImageLibrary = async (onChangeImage, callBack) => {
function addNewImageBtn() {
return (
<View style={styles.addBtnContainer}>
<Shadow
viewStyle={{width: "100%"}}
offset={[0, 4]}
distance={4}
radius={4}
startColor="rgba(0, 0, 0, 0.25)"
paintInside={true}
>
<View style={styles.addBtn}>
<MaterialCommunityIcons color={colors.white} name="camera" size={20} />
<Text style={{ color: colors.white, marginLeft: 10, fontSize: 14 }}>
CÂMERA
</Text>
</View>
</Shadow>
</View>
);
}
@ -227,15 +240,20 @@ const styles = StyleSheet.create({
fontWeight: "bold",
height: 35,
},
addBtnContainer: {
padding: 16,
elevation: 40,
marginVertical: 24,
width: "100%",
},
addBtn: {
marginVertical: 10,
borderRadius: 6,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
backgroundColor: colors.primary,
flexDirection: "row",
height: 42,
width: "100%",
alignItems: "center",
borderRadius: 6,
backgroundColor: colors.primary,
},
});

44
src/app/components/PickEventDateLocation.js

@ -0,0 +1,44 @@
import React from "react";
import { View } from "react-native";
import colors from "../config/colors";
import { TouchableOpacity } from "react-native-gesture-handler";
import FormDatePicker from "../components/forms/FormDatePicker";
import FormLocationPicker from "../components/forms/FormLocationPicker";
export default function PickEventDateLocation({
setDate = () => {},
setTime = () => {},
navigation = () => {},
location = true,
}) {
return (
<View
style={{
flex: 1,
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>
{/*Local do evento:*/}
{location &&
<TouchableOpacity onPress={() => navigation.navigate("FormMap")}>
<FormLocationPicker />
</TouchableOpacity>}
</View>
);
}

11
src/app/components/TextInput.js

@ -3,9 +3,18 @@ import { View, TextInput, StyleSheet } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "../config/colors";
import defaultStyles from "../config/styles";
import {Shadow} from "react-native-shadow-2";
function AppTextInput({ icon, width = "100%", ...otherProps }) {
return (
<Shadow
viewStyle={{ width: width}}
offset={[0, 4]}
distance={4}
radius={4}
startColor="rgba(0, 0, 0, 0.25)"
paintInside={true}
>
<View style={[styles.container, { width }]}>
{icon && (
<MaterialCommunityIcons
@ -21,6 +30,7 @@ function AppTextInput({ icon, width = "100%", ...otherProps }) {
{...otherProps}
/>
</View>
</Shadow>
);
}
@ -32,7 +42,6 @@ const styles = StyleSheet.create({
borderWidth: 1,
padding: 10,
flexDirection: "row",
marginVertical: 10,
},
icon: {
marginRight: 10,

6
src/app/components/forms/FormField.js

@ -3,12 +3,14 @@ import { useFormikContext } from "formik";
import TextInput from "../TextInput";
import ErrorMessage from "./ErrorMessage";
import {View} from "react-native";
function AppFormField({ name, width, ...otherProps }) {
const { setFieldTouched, handleChange, errors, touched } = useFormikContext();
return (
<>
<View
paddingHorizontal={16}>
<TextInput
onBlur={() => setFieldTouched(name)}
onChangeText={handleChange(name)}
@ -16,7 +18,7 @@ function AppFormField({ name, width, ...otherProps }) {
{...otherProps}
/>
<ErrorMessage error={errors[name]} visible={touched[name]} />
</>
</View>
);
}

25
src/app/components/forms/FormImagePicker.js

@ -1,16 +1,13 @@
import React, { useState } from "react";
import React from "react";
import { useFormikContext } from "formik";
import ErrorMessage from "./ErrorMessage";
import ImageInputList from "../ImageInputList";
import { View, Text, StyleSheet, Modal, Alert } from "react-native";
import colors from "../../config/colors";
import { dimensions } from "../../config/dimensions";
import { View, Alert } from "react-native";
function FormImagePicker({ name }) {
const { errors, setFieldValue, touched, values } = useFormikContext();
const imageUris = values[name];
const [modalVisible, setModalVisible] = useState(false);
const handleAdd = (uri) => {
if (imageUris.length === 0) {
@ -55,23 +52,5 @@ function FormImagePicker({ name }) {
);
}
const styles = StyleSheet.create({
labelStyle: {
fontSize: dimensions.text.secondary,
fontWeight: "bold",
textAlign: "left",
color: colors.primary,
marginBottom: 5,
marginTop: 15,
},
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22,
},
});
export default FormImagePicker;

8
src/app/components/forms/SubmitButton.js

@ -2,11 +2,17 @@ import React from "react";
import { useFormikContext } from "formik";
import Button from "../Button";
import {View} from "react-native";
function SubmitButton({ title }) {
const { handleSubmit } = useFormikContext();
return <Button title={title} onPress={handleSubmit} />;
return (
<View
style={{paddingHorizontal: 16}}>
<Button title={title} onPress={handleSubmit} />
</View>
);
}
export default SubmitButton;

24
src/app/screens/MapFeedScreen.js

@ -9,19 +9,19 @@ export default function MapFeedScreen() {
const focusChanged = attachFocusToQuery();
const [error, setError] = useState(false);
useEffect(() => {
loadForms();
}, []);
// useEffect(() => {
// loadForms();
// }, []);
const loadForms = async () => {
const response = await formsApi.getForms();
console.log(response);
if (!response.ok) {
console.log("resposta não ok!");
return setError(true);
}
setError(false);
}
// const loadForms = async () => {
// const response = await formsApi.getForms();
// console.log(response);
// if (!response.ok) {
// console.log("resposta não ok!");
// return setError(true);
// }
// setError(false);
// }
return (

28
src/app/screens/PluviometerSharingDataScreen.js

@ -19,6 +19,7 @@ import moment from "moment";
import FormLocationPicker from "../components/forms/FormLocationPicker";
import { TouchableOpacity } from "react-native-gesture-handler";
import { EventLocationContext } from "../context/EventLocationContext";
import PickEventDateLocation from "../components/PickEventDateLocation";
const dims = scaleDimsFromWidth(85, 85, 25);
@ -92,26 +93,13 @@ function PluviometerSharingDataScreen(props) {
alignContent: "flex-start",
}}
>
{/*Data da coleta:*/}
<View style={{ flex: 1 }}>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
<PickEventDateLocation
setDate={setDateTime}
setTime={setTime}
navigation={props.navigation}
location={false}
/>
</View>
{/*Local do evento:*/}
{/* <View style={{ flex: 1 }}> */}
{/* <TouchableOpacity */}
{/* onPress={() => props.navigation.navigate("FormMap")} */}
{/* > */}
{/* <FormLocationPicker /> */}
{/* </TouchableOpacity> */}
{/* </View> */}
</View>
<View style={{ flex: 1 }}>
<Text style={styles.labelStyle}>Comentário:</Text>
@ -133,7 +121,6 @@ function PluviometerSharingDataScreen(props) {
const styles = StyleSheet.create({
container: {
padding: 10,
flex: 1,
},
image: {
@ -143,6 +130,7 @@ const styles = StyleSheet.create({
alignItems: "center",
},
labelStyle: {
paddingHorizontal: 16,
fontSize: dimensions.text.secondary,
fontWeight: "bold",
textAlign: "left",

52
src/app/screens/RainSharingDataScreen.js

@ -1,5 +1,5 @@
import React, { useContext, useEffect, useState } from "react";
import { StyleSheet, View, ScrollView, PixelRatio } from "react-native";
import { StyleSheet, View, ScrollView } from "react-native";
import * as Yup from "yup";
import { Form, SubmitButton, FormField } from "../components/forms";
@ -17,6 +17,7 @@ import FormDatePicker from "../components/forms/FormDatePicker";
import FormLocationPicker from "../components/forms/FormLocationPicker";
import { EventLocationContext } from "../context/EventLocationContext";
import { useIsFocused } from "@react-navigation/native";
import PickEventDateLocation from "../components/PickEventDateLocation";
const validationSchema = Yup.object().shape({
images: Yup.array(),
@ -68,7 +69,11 @@ function RainSharingDataScreen(props) {
}}
validationSchema={validationSchema}
>
<View>
<View
style={{
paddingHorizontal: 16,
}}
>
<View style={styles.imgs_row}>
<TouchableNativeFeedback onPress={() => setRain(0)}>
<View style={styles.img_block}>
@ -130,41 +135,14 @@ function RainSharingDataScreen(props) {
<FormImagePicker backgroundColor={colors.primary} name="images" />
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
alignContent: "flex-start",
}}
>
{/*Data da coleta:*/}
<View
style={{
flex: 1,
}}
>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDate(value)}
onTimeChange={(value) => setTime(value)}
<PickEventDateLocation
setDate={setDate}
setTime={setTime}
navigation={props.navigation}
/>
</View>
{/*Local do evento:*/}
<View style={{ flex: 1 }}>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>
<FormLocationPicker />
</TouchableOpacity>
</View>
</View>
<View style={{ flex: 1 }}>
<Text style={styles.labelStyle}>Comentário:</Text>
<FormField
maxLength={255}
multiline
@ -172,7 +150,7 @@ function RainSharingDataScreen(props) {
numberOfLines={3}
placeholder="Escreva um comentário (Opcional)..."
/>
</View>
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form>
</ScrollView>
@ -182,7 +160,6 @@ function RainSharingDataScreen(props) {
const styles = StyleSheet.create({
container: {
padding: 10,
backgroundColor: colors.white,
},
img_block: {
@ -202,6 +179,7 @@ const styles = StyleSheet.create({
color: colors.danger,
},
labelStyle: {
paddingHorizontal: 16,
fontSize: dimensions.text.secondary,
fontWeight: "bold",
textAlign: "left",

40
src/app/screens/RiverFloodSharingDataScreen.js

@ -23,6 +23,7 @@ import moment from "moment";
import FormDatePicker from "../components/forms/FormDatePicker";
import FormLocationPicker from "../components/forms/FormLocationPicker";
import { EventLocationContext } from "../context/EventLocationContext";
import PickEventDateLocation from "../components/PickEventDateLocation";
const validationSchema = Yup.object().shape({
images: Yup.array(),
@ -76,7 +77,7 @@ function RiverFloodSharingDataScreen(props) {
}}
validationSchema={validationSchema}
>
<View>
<View style={{paddingHorizontal: 16}}>
<View style={styles.imgs_row}>
<TouchableNativeFeedback onPress={() => setRiverScale(0)}>
<View style={styles.img_block}>
@ -125,38 +126,11 @@ function RiverFloodSharingDataScreen(props) {
)}
<FormImagePicker backgroundColor={colors.primary} name="images" />
<PickEventDateLocation
setDate={setDate}
setTime={setTime}
navigation={props.navigation}/>
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
alignContent: "flex-start",
}}
>
{/*Data da coleta:*/}
<View
style={{ flex: 1 }}
>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDate(value)}
onTimeChange={(value) => setTime(value)}
/>
</View>
{/*Local do evento:*/}
<View style={{ flex: 1 }}>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>
<FormLocationPicker />
</TouchableOpacity>
</View>
</View>
<View style={{ flex: 1 }}>
<Text style={styles.labelStyle}>Comentário:</Text>
<FormField
@ -176,7 +150,6 @@ function RiverFloodSharingDataScreen(props) {
const styles = StyleSheet.create({
container: {
padding: 10,
backgroundColor: colors.white,
},
img_block: {
@ -195,6 +168,7 @@ const styles = StyleSheet.create({
color: colors.danger,
},
labelStyle: {
paddingHorizontal: 16,
fontSize: dimensions.text.secondary,
fontWeight: "bold",
textAlign: "left",

52
src/app/screens/SharingFloodZonesScreen.js

@ -20,6 +20,7 @@ import moment from "moment";
import FormDatePicker from "../components/forms/FormDatePicker";
import FormLocationPicker from "../components/forms/FormLocationPicker";
import { EventLocationContext } from "../context/EventLocationContext";
import PickEventDateLocation from "../components/PickEventDateLocation";
/*function submitForm(props) {
console.log(props);
@ -61,7 +62,14 @@ function SharingFloodZonesScreen(props) {
setError(true);
return;
}
insertFloodZone({ ...values, passable, location, date, time, address });
insertFloodZone({
...values,
passable,
location,
date,
time,
address,
});
showMessage({
message: "Informação enviada!",
duration: 1950,
@ -112,38 +120,11 @@ function SharingFloodZonesScreen(props) {
<FormImagePicker name="images" height={10} />
<View
style={{
flex: 1,
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>
{/*Local do evento:*/}
<View style={{ flex: 1 }}>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>
<FormLocationPicker />
</TouchableOpacity>
</View>
</View>
<View style={{ flex: 1 }}>
<PickEventDateLocation
setDate={setDate}
setTime={setTime}
navigation={props.navigation}/>
<Text style={styles.labelStyle}>Comentário:</Text>
<FormField
maxLength={255}
@ -152,7 +133,6 @@ function SharingFloodZonesScreen(props) {
numberOfLines={3}
placeholder="Escreva um comentário (Opcional)..."
/>
</View>
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form>
</KeyboardAwareScrollView>
@ -164,7 +144,7 @@ const dims = scaleDimsFromWidth(93, 106, 30.0);
const styles = StyleSheet.create({
container: {
padding: 10,
// padding: 17,
backgroundColor: colors.white,
},
@ -190,12 +170,14 @@ const styles = StyleSheet.create({
fontSize: dimensions.text.default,
},
error_txt: {
paddingHorizontal: 16,
fontSize: 18,
color: colors.danger,
},
labelStyle: {
fontSize: dimensions.text.secondary,
fontWeight: "bold",
paddingHorizontal: 16,
textAlign: "left",
color: colors.lightBlue,
},

1
src/package.json

@ -51,6 +51,7 @@
"react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1",
"react-native-searchable-dropdown": "^1.1.3",
"react-native-shadow-2": "^3.0.0",
"react-native-simple-dialogs": "^1.4.0",
"react-native-svg": "^12.1.0",
"react-native-svg-uri": "^1.2.3",

Loading…
Cancel
Save