diff --git a/src/App.js b/src/App.js
index 4a12611..db01386 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,6 +14,7 @@ import CurrentLocationProvider from "./app/context/CurrentLocationContext";
import AuthNavigator from "./app/navigation/AuthNavigator";
import { AuthContext } from "./app/auth/context";
import authStorage from "./app/auth/storage";
+import MapDataProvider from "./app/context/MapDataContext";
export default function App() {
const [user, setUser] = useState();
@@ -32,7 +33,7 @@ export default function App() {
global.userDataBase = openDatabase();
initDatabase(global.userDataBase);
- return (
+ return (
-
- {user ? : }
-
-
+
+
+ {user ? : }
+
+
+
);
-}
+}
\ No newline at end of file
diff --git a/src/app/components/DataMenu.js b/src/app/components/DataMenu.js
deleted file mode 100644
index 3b5e61c..0000000
--- a/src/app/components/DataMenu.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { Component, useRef, useState } from "react";
-import { StyleSheet, Text, TouchableOpacity, View, CheckBox } from "react-native";
-import { FontAwesome5 } from '@expo/vector-icons';
-
-import colors from "../config/colors";
-import { FlatList } from "react-native-gesture-handler";
-import { Fontisto } from '@expo/vector-icons';
-import { dimensions } from "../config/dimensions";
-
-import { Dimensions } from "react-native";
-
-
-export default class DataMenu extends Component {
- constructor(props) {
- super(props);
- this.state = {
- layers: [
- {
- id: 1,
- name: 'Chuva',
- },
- {
- id: 2,
- name: 'Ponto de alagamento',
- },
- {
- id: 3,
- name: 'Pluviômetro artesanal',
- },
- {
- id: 4,
- name: 'Pluviômetro oficial',
- },
- {
- id: 5,
- name: 'Água no rio',
- },
- {
- id: 6,
- name: 'Área de inundação',
- },
- ],
- selectedValue: {},
- }
- }
- toggleItem = (itemId) => {
- const { selectedValue } = this.state;
- const isSelected = selectedValue[itemId];
- selectedValue[itemId] = !isSelected;
-
-
- this.setState({
- selectedValue: { ...selectedValue },
- })
- }
-
- render() {
- const screenHeight = Dimensions.get("window").height;
- const screenWidth = Dimensions.get("window").width;
- const { layers, selectedValue } = this.state;
- return (
-
-
-
- 600 ? 0 : screenHeight * 0.09)
- }}>
- datas.id.toString()}
- renderItem={({ item }) => {
- const isSelected = selectedValue[item.id];
- return (
-
-
-
- {item.name}
-
-
- this.toggleItem(item.id)}
- tintColors={{ true: colors.lightBlue, false: 'black' }}
- />
-
-
- );
- }}
- extraData={[selectedValue]}
- />
-
- console.log("Aplicar camadas")}>
-
- Confirmar
-
-
-
-
-
- )
- };
-
-
-};
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- flexDirection: "row",
- alignSelf: "flex-end",
- backgroundColor: colors.white,
- },
- submit_btn: {
- bottom: 0,
- width: "100%",
- padding: 20,
- },
- button: {
- backgroundColor: "#1976D2",
- borderRadius: 20,
- justifyContent: "center",
- alignItems: "center",
- width: "100%",
- height: 42,
- textAlign: "center",
- },
- text: {
- color: colors.white,
- fontSize: 16,
- textTransform: "uppercase",
- fontWeight: "bold",
- },
- item: {
- color: colors.lightBlue,
- fontSize: dimensions.text.tertiary,
- fontWeight: "bold",
- }
-
-});
-
diff --git a/src/app/components/FloatButton.js b/src/app/components/FloatButton.js
index c0a0552..c6596cf 100644
--- a/src/app/components/FloatButton.js
+++ b/src/app/components/FloatButton.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useContext, useRef, useState } from "react";
import {
StyleSheet,
Text,
@@ -6,18 +6,15 @@ import {
View,
Animated,
TouchableWithoutFeedback,
+ Dimensions,
} from "react-native";
+import { FlatList } from "react-native-gesture-handler";
import colors from "../config/colors";
-import ActionButton from "react-native-action-button";
-import { AntDesign, Entypo } from "@expo/vector-icons";
-import { Colors } from "react-native/Libraries/NewAppScreen";
-import { FlatList } from "react-native-gesture-handler";
-import { Fontisto } from "@expo/vector-icons";
-import DataMenu from "./DataMenu";
import { MaterialCommunityIcons } from "@expo/vector-icons";
-
-import { Dimensions } from "react-native";
+import { dimensions } from "../config/dimensions";
+import { MapDataContext } from "../context/MapDataContext";
+import MenuItens from "./MenuItens";
const screenWidth = Dimensions.get("window").width;
const screenHeight = Dimensions.get("window").height;
@@ -25,7 +22,9 @@ const screenHeight = Dimensions.get("window").height;
function FloatButton(props) {
const animation = useRef(new Animated.Value(0)).current;
+
const [open, setOpen] = useState(false);
+ const context = useContext(MapDataContext);
const toggleMenu = () => {
const value = open ? 0 : 1;
@@ -35,45 +34,115 @@ function FloatButton(props) {
friction: 6,
useNativeDriver: true,
}).start();
- console.log(open);
setOpen(!open);
};
- const rotation = {
- transform: [
- {
- rotate: animation.interpolate({
- inputRange: [0, 1],
- outputRange: ["0deg", "0deg"],
- }),
- },
- ],
- };
- const menuStyle = {
- transform: [
- { scale: animation },
- {
- translateY: animation.interpolate({
- inputRange: [0, 1],
- outputRange: [0, 30],
- }),
- },
- ],
+ /*--------------------------------------------------------MENU----------------------------------------------------- */
+ const [changed, setChanged] = useState(true);
+ const [layers, setLayers] = useState({
+ values:
+ [
+ {
+ id: 1,
+ name: 'Chuva',
+ isSelected: context.layers.values[0].isSelected,
+ },
+ {
+ id: 2,
+ name: 'Ponto de alagamento',
+ isSelected: context.layers.values[1].isSelected,
+ },
+ {
+ id: 3,
+ name: 'Pluviômetro artesanal',
+ isSelected: context.layers.values[2].isSelected,
+ },
+ {
+ id: 4,
+ name: 'Pluviômetro oficial',
+ isSelected: context.layers.values[3].isSelected
+ },
+ {
+ id: 5,
+ name: 'Água no rio',
+ isSelected: context.layers.values[4].isSelected,
+ },
+ {
+ id: 6,
+ name: 'Área de inundação',
+ isSelected: context.layers.values[5].isSelected,
+ },
+ ]
+ });
+
+ const selectedItens = (item) => {
+
+ item.isSelected = !item.isSelected;
+ setChanged(!changed);
+ }
+
+ const renderItem = ({ item }) => {
+ const icon = item.isSelected ? "check-box" : "check-box-outline-blank";
+
+ return (
+ selectedItens(item)}
+ icon={icon}
+ />
+ );
};
+
+ const applyLayers = () => {
+ context.setChanges(layers.values);
+ setOpen(false);
+ }
+
+ const DataMenu = () => {
+ return (
+
+
+
+ 600 ? 0 : screenHeight * 0.09)
+ }}>
+ datas.id.toString()}
+ renderItem={renderItem}
+ extraData={changed}
+ />
+
+ applyLayers()}>
+
+ Confirmar
+
+
+
+
+
+
+ );
+ }
+ /*------------------------------------------------------------------------------------------------------------------------ */
+
return (
-
-
+
+ {DataMenu()}
+
-
+
diff --git a/src/app/components/MenuItens.js b/src/app/components/MenuItens.js
new file mode 100644
index 0000000..f2d4520
--- /dev/null
+++ b/src/app/components/MenuItens.js
@@ -0,0 +1,51 @@
+import React, { Component, useContext, useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View, Dimensions } from "react-native";
+import { FontAwesome5 } from '@expo/vector-icons';
+import { MaterialIcons } from '@expo/vector-icons';
+
+import colors from "../config/colors";
+import { dimensions } from "../config/dimensions";
+import { Ionicons } from '@expo/vector-icons';
+
+function MenuItens({ item, onPress, icon }) {
+ return (
+
+
+
+
+
+
+ {item.name}
+
+
+
+
+
+
+ );
+};
+export default MenuItens;
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ flexDirection: "row",
+ alignSelf: "flex-end",
+ backgroundColor: colors.white,
+ },
+ text: {
+ color: colors.lightBlue,
+ fontSize: 14,
+ fontWeight: "bold",
+ },
+ item: {
+ color: colors.lightBlue,
+ fontSize: dimensions.text.tertiary,
+ fontWeight: "bold",
+ }
+
+});
+
+
+
diff --git a/src/app/context/MapDataContext.js b/src/app/context/MapDataContext.js
new file mode 100644
index 0000000..e8b0d87
--- /dev/null
+++ b/src/app/context/MapDataContext.js
@@ -0,0 +1,94 @@
+import React, { useState, createContext } from "react"
+
+
+export const MapDataContext = createContext();
+// 1/3(Ana): Preciso melhorar esse código
+
+const MapDataProvider = ({ children }) => {
+
+ const [layers, setLayers] = useState({
+ values:
+ [
+ {
+ id: 1,
+ name: 'Chuva',
+ isSelected: true,
+ },
+ {
+ id: 2,
+ name: 'Ponto de alagamento',
+ isSelected: true,
+ },
+ {
+ id: 3,
+ name: 'Pluviômetro artesanal',
+ isSelected: true,
+ },
+ {
+ id: 4,
+ name: 'Pluviômetro oficial',
+ isSelected: false
+ },
+ {
+ id: 5,
+ name: 'Água no rio',
+ isSelected: true,
+ },
+ {
+ id: 6,
+ name: 'Área de inundação',
+ isSelected: false,
+ },
+ ]
+ });
+
+
+ //chuva
+ const [rain, setRain] = useState(true);
+
+ //Ponto de alagamento
+ const [flood, setFlood] = useState(true);
+
+ //Pluviometro artesanal
+ const [pluviometer, setPluviometer] = useState(true);
+
+ //Água no rio
+ const [river, setRiver] = useState(true);
+
+ //Pluviometro oficial
+ const [officialPluviometer, setOfficialPluviometer] = useState(false);
+
+
+ //Área de inundação
+ const [floodAreas, setFloodAreas] = useState(false);
+
+ //1/3: harcoding
+ const setChanges = (data) => {
+ layers.values = data;
+ setRain(layers.values[0].isSelected);
+ setFlood(layers.values[1].isSelected);
+ setPluviometer(layers.values[2].isSelected);
+ //setOfficialPluviometer(layers.values[3].isSelected);
+ setRiver(layers.values[4].isSelected);
+ //setFloodAreas(layers.values[5].isSelected);
+
+ }
+
+
+ return (
+
+ {children}
+
+ )
+}
+export default MapDataProvider;
\ No newline at end of file