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