Browse Source

New buttons i nsharing flood zones screen

master
GabrielTrettel 3 years ago
parent
commit
c1c2e2619d
  1. 1
      src/app/assets/floodZonesAssets/not_passable.svg
  2. 1
      src/app/assets/floodZonesAssets/passable.svg
  3. 57
      src/app/components/SvgLabeledButton.js
  4. 12
      src/app/config/assets.js
  5. 56
      src/app/screens/SharingFloodZonesScreen.js

1
src/app/assets/floodZonesAssets/not_passable.svg
File diff suppressed because it is too large
View File

1
src/app/assets/floodZonesAssets/passable.svg
File diff suppressed because it is too large
View File

57
src/app/components/SvgLabeledButton.js

@ -1,8 +1,8 @@
import React, { useEffect, useState } from "react";
import { StyleSheet, View, Text, TouchableOpacity, TouchableHighlight } from "react-native";
import React from "react";
import { StyleSheet, View, Text, TouchableHighlight, TouchableNativeFeedback } from "react-native";
import colors from "../config/colors"; import colors from "../config/colors";
import { scaleDimsFromWidth } from "../config/dimensions"; import { scaleDimsFromWidth } from "../config/dimensions";
import {Shadow} from "react-native-shadow-2";
import { Shadow } from "react-native-shadow-2";
export default function SvgLabeledButton({ export default function SvgLabeledButton({
SvgImage, SvgImage,
@ -17,33 +17,31 @@ export default function SvgLabeledButton({
}) { }) {
const dims = scaleDimsFromWidth(width, height, 16); const dims = scaleDimsFromWidth(width, height, 16);
return ( return (
<Shadow <Shadow
viewStyle={[{width: 125, height: 125}, style]}
offset={[0, 4]}
distance={4}
radius={4}
startColor="rgba(0, 0, 0, 0.25)"
paintInside={true}
>
<TouchableHighlight onPress={onPress}>
<View style={styles.container}>
<View
style={[
styles.innerContainer,
{
backgroundColor: isToggle ? toggledBgColor : normalBgcolor,
borderColor: isToggle ? toggledBgColor : normalBgcolor,
},
]}
>
<SvgImage {...dims} />
viewStyle={[{ width: 130, height: 130 }, style]}
offset={[0, 4]}
distance={4}
radius={4}
startColor="rgba(0, 0, 0, 0.25)"
paintInside={true}
>
<TouchableNativeFeedback onPress={onPress}>
<View style={styles.container}>
<View
style={[
styles.innerContainer,
{
backgroundColor: isToggle ? toggledBgColor : normalBgcolor,
borderColor: isToggle ? toggledBgColor : normalBgcolor,
},
]}
>
<SvgImage {...dims} />
<Text style={styles.label}>{label}</Text>
<Text style={styles.label}>{label}</Text>
</View>
</View> </View>
</View>
</TouchableHighlight>
</TouchableNativeFeedback>
</Shadow> </Shadow>
); );
} }
@ -55,8 +53,8 @@ const styles = StyleSheet.create({
backgroundColor: colors.primary, backgroundColor: colors.primary,
borderWidth: 6, borderWidth: 6,
borderRadius: 6, borderRadius: 6,
width: 125,
height: 125,
width: 130,
height: 130,
}, },
innerContainer: { innerContainer: {
overflow: "hidden", overflow: "hidden",
@ -65,7 +63,6 @@ const styles = StyleSheet.create({
borderRadius: 6, borderRadius: 6,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}, },
label: { label: {
paddingTop: 5, paddingTop: 5,

12
src/app/config/assets.js

@ -43,16 +43,14 @@ import PinRioExtravasado from "../assets/river/PinRioExtravasado";
import PinRioCheio from "../assets/river/PinRioCheio"; import PinRioCheio from "../assets/river/PinRioCheio";
import PinPluviometroArt from "../assets/pluviometer/PinPluviometroArt"; import PinPluviometroArt from "../assets/pluviometer/PinPluviometroArt";
import FloodPassable from "../assets/floodZonesAssets/passable.svg";
import FloodNotPassable from "../assets/floodZonesAssets/not_passable.svg";
export default { export default {
floodZones: { floodZones: {
FloodZonesIcon: FloodZones, FloodZonesIcon: FloodZones,
passable: require("../assets/floodZonesAssets/passable_icon.png"),
passable_toggle: require("../assets/floodZonesAssets/Transitavel_c.png"),
passable_2: require("../assets/floodZonesAssets/passable_2.png"),
notPassable: require("../assets/floodZonesAssets/not_passable_icon.png"),
notPassable2: require("../assets/floodZonesAssets/notpassable_2_toggle.png"),
notPassable_toggle: require("../assets/floodZonesAssets/Intransitavel_c.png"),
passable: FloodPassable,
notPassable: FloodNotPassable,
}, },
riverLevel: { riverLevel: {

56
src/app/screens/SharingFloodZonesScreen.js

@ -7,25 +7,16 @@ import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
import colors from "../config/colors"; import colors from "../config/colors";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions"; import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
import {
TouchableNativeFeedback,
TouchableOpacity,
} from "react-native-gesture-handler";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertFloodZone } from "../database/databaseLoader"; import { insertFloodZone } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import assets from "../config/assets"; import assets from "../config/assets";
import moment from "moment"; import moment from "moment";
import FormDatePicker from "../components/forms/FormDatePicker";
import FormLocationPicker from "../components/forms/FormLocationPicker";
import { EventLocationContext } from "../context/EventLocationContext"; import { EventLocationContext } from "../context/EventLocationContext";
import PickEventDateLocation from "../components/PickEventDateLocation"; import PickEventDateLocation from "../components/PickEventDateLocation";
/*function submitForm(props) {
console.log(props);
insertFloodZone(props);
}*/
import SvgLabeledButton from "../components/SvgLabeledButton";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
images: Yup.array(), images: Yup.array(),
@ -81,35 +72,20 @@ function SharingFloodZonesScreen(props) {
validationSchema={validationSchema} validationSchema={validationSchema}
> >
<View style={styles.imgs_container}> <View style={styles.imgs_container}>
<TouchableNativeFeedback onPress={() => setPassable(1)}>
<View style={{paddingRight: 17}}>
{passable == 1 ? (
<Image
source={assets.floodZones.passable_toggle}
style={styles.image}
/>
) : (
<Image
style={styles.image}
source={assets.floodZones.passable_2}
/>
)}
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(0)}>
{passable == 0 ? (
<Image
source={assets.floodZones.notPassable_toggle}
style={styles.image}
/>
) : (
<Image
style={styles.image}
source={assets.floodZones.notPassable2}
/>
)}
</TouchableNativeFeedback>
<SvgLabeledButton
style={{marginRight: 17}}
label={"TRANSITÁVEL"}
isToggle={passable == 1}
SvgImage={assets.floodZones.passable}
onPress={() => setPassable(1)}
/>
<SvgLabeledButton
onPress={() => setPassable(0)}
label={"INTRANSITÁVEL"}
isToggle={passable == 0}
SvgImage={assets.floodZones.notPassable}
/>
</View> </View>
{error && passable == -1 && ( {error && passable == -1 && (

Loading…
Cancel
Save