forked from cemaden-educacao/WPD-MobileApp
analuizaff
3 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