analuizaff
4 years ago
6 changed files with 296 additions and 183 deletions
-
15src/App.js
-
142src/app/components/DataMenu.js
-
175src/app/components/FloatButton.js
-
2src/app/components/MapMarkerList.js
-
51src/app/components/MenuItens.js
-
94src/app/context/MapDataContext.js
@ -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 ( |
|
||||
|
|
||||
<View style={styles.container} > |
|
||||
|
|
||||
<View style={{ |
|
||||
flex: 1, |
|
||||
height: screenHeight * 0.70,//solução temporária, procurar soluções pro menu se ajustar melhor ao layout
|
|
||||
paddingTop: (screenHeight > 600 ? 0 : screenHeight * 0.09) |
|
||||
}}> |
|
||||
<FlatList |
|
||||
data={layers} |
|
||||
keyExtractor={(datas) => datas.id.toString()} |
|
||||
renderItem={({ item }) => { |
|
||||
const isSelected = selectedValue[item.id]; |
|
||||
return ( |
|
||||
<View style={{ flexDirection: "row", flex: 1, marginTop: 15, }}> |
|
||||
<View style={{ flexDirection: "row", flex: 0.80 }}> |
|
||||
<Fontisto name="rain" color={colors.lightBlue} size={20} /> |
|
||||
<Text style={styles.item}> {item.name} </Text> |
|
||||
</View> |
|
||||
<View |
|
||||
style={{ flex: 0.20, alignSelf: "flex-end", flexDirection: "row" }}> |
|
||||
<CheckBox |
|
||||
value={isSelected} |
|
||||
onChange={() => this.toggleItem(item.id)} |
|
||||
tintColors={{ true: colors.lightBlue, false: 'black' }} |
|
||||
/> |
|
||||
</View> |
|
||||
</View> |
|
||||
); |
|
||||
}} |
|
||||
extraData={[selectedValue]} |
|
||||
/> |
|
||||
<View style={styles.submit_btn}> |
|
||||
<TouchableOpacity onPress={() => console.log("Aplicar camadas")}> |
|
||||
<View style={styles.button}> |
|
||||
<Text style={styles.text}>Confirmar</Text> |
|
||||
</View> |
|
||||
</TouchableOpacity> |
|
||||
</View> |
|
||||
</View> |
|
||||
</View> |
|
||||
) |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
}; |
|
||||
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", |
|
||||
} |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
@ -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 ( |
||||
|
<TouchableOpacity onPress={onPress} style={[styles.item]}> |
||||
|
<View style={{ flexDirection: "row", flex: 1, marginTop: 12 }}> |
||||
|
<View style={{ flexDirection: "row", flex: 0.20 }}> |
||||
|
<Ionicons name="md-rainy" size={24} color={colors.lightBlue} /> |
||||
|
</View> |
||||
|
<View style={{ flexDirection: "row", flex: 0.70 }}> |
||||
|
<Text style={[styles.text]}>{item.name}</Text> |
||||
|
</View> |
||||
|
<View |
||||
|
style={{ flex: 0.10, alignSelf: "flex-start", flexDirection: "row" }}> |
||||
|
<MaterialIcons name={icon} size={24} color={colors.lightBlue} /> |
||||
|
</View> |
||||
|
</View> |
||||
|
</TouchableOpacity> |
||||
|
); |
||||
|
}; |
||||
|
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", |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
|
||||
|
|
||||
@ -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 ( |
||||
|
<MapDataContext.Provider value={{ |
||||
|
rain, |
||||
|
flood, |
||||
|
pluviometer, |
||||
|
river, |
||||
|
officialPluviometer, |
||||
|
floodAreas, |
||||
|
layers, |
||||
|
setChanges, |
||||
|
|
||||
|
}}> |
||||
|
{children} |
||||
|
</MapDataContext.Provider> |
||||
|
) |
||||
|
} |
||||
|
export default MapDataProvider; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue