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. 19
      src/app/components/SvgLabeledButton.js
  4. 12
      src/app/config/assets.js
  5. 50
      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

19
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 { scaleDimsFromWidth } from "../config/dimensions";
import {Shadow} from "react-native-shadow-2";
import { Shadow } from "react-native-shadow-2";
export default function SvgLabeledButton({
SvgImage,
@ -17,17 +17,15 @@ export default function SvgLabeledButton({
}) {
const dims = scaleDimsFromWidth(width, height, 16);
return (
<Shadow
viewStyle={[{width: 125, height: 125}, style]}
viewStyle={[{ width: 130, height: 130 }, style]}
offset={[0, 4]}
distance={4}
radius={4}
startColor="rgba(0, 0, 0, 0.25)"
paintInside={true}
>
<TouchableHighlight onPress={onPress}>
<TouchableNativeFeedback onPress={onPress}>
<View style={styles.container}>
<View
style={[
@ -43,7 +41,7 @@ export default function SvgLabeledButton({
<Text style={styles.label}>{label}</Text>
</View>
</View>
</TouchableHighlight>
</TouchableNativeFeedback>
</Shadow>
);
}
@ -55,8 +53,8 @@ const styles = StyleSheet.create({
backgroundColor: colors.primary,
borderWidth: 6,
borderRadius: 6,
width: 125,
height: 125,
width: 130,
height: 130,
},
innerContainer: {
overflow: "hidden",
@ -65,7 +63,6 @@ const styles = StyleSheet.create({
borderRadius: 6,
alignItems: "center",
justifyContent: "center",
},
label: {
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 PinPluviometroArt from "../assets/pluviometer/PinPluviometroArt";
import FloodPassable from "../assets/floodZonesAssets/passable.svg";
import FloodNotPassable from "../assets/floodZonesAssets/not_passable.svg";
export default {
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: {

50
src/app/screens/SharingFloodZonesScreen.js

@ -7,25 +7,16 @@ import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation";
import colors from "../config/colors";
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 { showMessage } from "react-native-flash-message";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import Screen from "../components/Screen";
import assets from "../config/assets";
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);
insertFloodZone(props);
}*/
import SvgLabeledButton from "../components/SvgLabeledButton";
const validationSchema = Yup.object().shape({
images: Yup.array(),
@ -81,35 +72,20 @@ function SharingFloodZonesScreen(props) {
validationSchema={validationSchema}
>
<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}
<SvgLabeledButton
style={{marginRight: 17}}
label={"TRANSITÁVEL"}
isToggle={passable == 1}
SvgImage={assets.floodZones.passable}
onPress={() => setPassable(1)}
/>
)}
</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}
<SvgLabeledButton
onPress={() => setPassable(0)}
label={"INTRANSITÁVEL"}
isToggle={passable == 0}
SvgImage={assets.floodZones.notPassable}
/>
)}
</TouchableNativeFeedback>
</View>
{error && passable == -1 && (

Loading…
Cancel
Save