forked from cemaden-educacao/WPD-MobileApp
analuizaff
4 years ago
4 changed files with 263 additions and 0 deletions
-
137src/app/components/DataMenu.js
-
111src/app/components/FloatButton.js
-
13src/package-lock.json
-
2src/package.json
@ -0,0 +1,137 @@ |
|||||
|
import React, { Component, useRef, useState } from "react"; |
||||
|
import { StyleSheet, Text, TouchableOpacity, View, CheckBox } from "react-native"; |
||||
|
|
||||
|
import colors from "../config/colors"; |
||||
|
import { FlatList } from "react-native-gesture-handler"; |
||||
|
import { Fontisto } from '@expo/vector-icons'; |
||||
|
import { dimensions } from "../config/dimensions"; |
||||
|
|
||||
|
export default class DataMenu extends Component { |
||||
|
constructor(props) { |
||||
|
super(props); |
||||
|
this.state = { |
||||
|
timeSlots: [ |
||||
|
{ |
||||
|
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 { timeSlots, selectedValue } = this.state; |
||||
|
return ( |
||||
|
|
||||
|
<View style={styles.container} > |
||||
|
|
||||
|
<View style={{ flex: 0.70, backgroundColor: colors.light }}> |
||||
|
<FlatList |
||||
|
data={timeSlots} |
||||
|
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.85}}> |
||||
|
<Fontisto name="rain" color={colors.lightBlue} size={20}/> |
||||
|
<Text style={styles.item}> {item.name}</Text> |
||||
|
</View> |
||||
|
<View |
||||
|
style={{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", |
||||
|
}, |
||||
|
submit_btn: { |
||||
|
// position: "absolute",
|
||||
|
bottom: 0, |
||||
|
width: "100%", |
||||
|
padding: 20, |
||||
|
}, |
||||
|
button: { |
||||
|
backgroundColor: "#1976D2", |
||||
|
borderRadius: 20, |
||||
|
justifyContent: "center", |
||||
|
alignItems: "center", |
||||
|
width: "100%", |
||||
|
height: 42, |
||||
|
// marginVertical: 10,
|
||||
|
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,111 @@ |
|||||
|
import React, { useRef, useState } from "react"; |
||||
|
import { StyleSheet, Text, TouchableOpacity, View, Animated, TouchableWithoutFeedback } from "react-native"; |
||||
|
|
||||
|
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"; |
||||
|
|
||||
|
|
||||
|
const screenWidth = Dimensions.get("window").width; |
||||
|
const screenHeight = Dimensions.get('window').height; |
||||
|
|
||||
|
|
||||
|
|
||||
|
function FloatButton(props) { |
||||
|
const animation = useRef(new Animated.Value(0)).current; |
||||
|
const [open, setOpen] = useState(false); |
||||
|
|
||||
|
const toggleMenu = () => { |
||||
|
const value = open ? 0 : 1; |
||||
|
console.log(value); |
||||
|
|
||||
|
Animated.spring(animation, { |
||||
|
toValue: value, |
||||
|
friction: 6, |
||||
|
useNativeDriver: true |
||||
|
}).start(); |
||||
|
|
||||
|
setOpen(!open); |
||||
|
}; |
||||
|
const rotation = { |
||||
|
transform: [ |
||||
|
{ |
||||
|
rotate: animation.interpolate({ |
||||
|
inputRange: [0, 1], |
||||
|
outputRange: ["0deg", "0deg"], |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
const cameraStyle = { |
||||
|
transform: [ |
||||
|
{ scale: animation }, |
||||
|
{ |
||||
|
translateX: animation.interpolate({ |
||||
|
inputRange: [0, 1], |
||||
|
outputRange: [0, 20] |
||||
|
}) |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
return ( |
||||
|
<View style={[styles.container]}> |
||||
|
<TouchableWithoutFeedback> |
||||
|
<Animated.View style={[styles.submenu, cameraStyle]}> |
||||
|
<DataMenu /> |
||||
|
</Animated.View> |
||||
|
</TouchableWithoutFeedback> |
||||
|
<View style={{ margin:35, alignSelf:"flex-end"}}> |
||||
|
<TouchableWithoutFeedback> |
||||
|
<Animated.View style={[styles.button, styles.menu, rotation]}> |
||||
|
<MaterialCommunityIcons name="layers-plus" size={36} color={colors.white} /> |
||||
|
</Animated.View> |
||||
|
</TouchableWithoutFeedback> |
||||
|
</View> |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const styles = StyleSheet.create({ |
||||
|
container: { |
||||
|
alignItems: "center", |
||||
|
position: "absolute", |
||||
|
//flex: 1,
|
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
button: { |
||||
|
position: "absolute", |
||||
|
width: 50, |
||||
|
height: 50, |
||||
|
borderRadius: 6, |
||||
|
alignItems: "center", |
||||
|
shadowColor: colors.primary, |
||||
|
shadowOpacity: 0.3, |
||||
|
shadowOffset: { |
||||
|
height: 10, |
||||
|
}, |
||||
|
padding: 3, |
||||
|
}, |
||||
|
menu: { |
||||
|
backgroundColor: colors.primary, |
||||
|
}, |
||||
|
submenu: { |
||||
|
// position:"relative",
|
||||
|
width: screenWidth, |
||||
|
height: screenHeight * 0.9, |
||||
|
flex: 1, |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
export default FloatButton; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue