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