Browse Source

creating 'dados' menu

master
analuizaff 4 years ago
parent
commit
aa59f49611
  1. 137
      src/app/components/DataMenu.js
  2. 111
      src/app/components/FloatButton.js
  3. 13
      src/package-lock.json
  4. 2
      src/package.json

137
src/app/components/DataMenu.js

@ -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",
}
});

111
src/app/components/FloatButton.js

@ -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;

13
src/package-lock.json

@ -16597,6 +16597,14 @@
} }
} }
}, },
"react-native-action-button": {
"version": "2.8.5",
"resolved": "https://registry.npmjs.org/react-native-action-button/-/react-native-action-button-2.8.5.tgz",
"integrity": "sha512-BvGZpzuGeuFR2Y6j93+vKiSqDhsF87VHvNXFs/qEYKfzT4b1ASAT/GQbgS6gNt4jRJCUnJWYrIwlBzRjesZQmQ==",
"requires": {
"prop-types": "^15.5.10"
}
},
"react-native-chart-kit": { "react-native-chart-kit": {
"version": "6.11.0", "version": "6.11.0",
"resolved": "https://registry.npmjs.org/react-native-chart-kit/-/react-native-chart-kit-6.11.0.tgz", "resolved": "https://registry.npmjs.org/react-native-chart-kit/-/react-native-chart-kit-6.11.0.tgz",
@ -16656,6 +16664,11 @@
"resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.27.1.tgz", "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.27.1.tgz",
"integrity": "sha512-HygBkZBecTnIVRYrSiLRAvu4OmXOYso/A7c6Cy73HkOh9CgGV8Ap5eBea24tvmFGptjj5Hg8AJ94/YbmWK1Okw==" "integrity": "sha512-HygBkZBecTnIVRYrSiLRAvu4OmXOYso/A7c6Cy73HkOh9CgGV8Ap5eBea24tvmFGptjj5Hg8AJ94/YbmWK1Okw=="
}, },
"react-native-multiple-choice": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/react-native-multiple-choice/-/react-native-multiple-choice-0.0.8.tgz",
"integrity": "sha1-732ZrBBElBzfi5QQnMWjMHqhnoc="
},
"react-native-places-input": { "react-native-places-input": {
"version": "1.1.7", "version": "1.1.7",
"resolved": "https://registry.npmjs.org/react-native-places-input/-/react-native-places-input-1.1.7.tgz", "resolved": "https://registry.npmjs.org/react-native-places-input/-/react-native-places-input-1.1.7.tgz",

2
src/package.json

@ -36,12 +36,14 @@
"react-dom": "16.13.1", "react-dom": "16.13.1",
"react-google-places-autocomplete": "^3.2.1", "react-google-places-autocomplete": "^3.2.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz", "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-action-button": "^2.8.5",
"react-native-chart-kit": "^6.11.0", "react-native-chart-kit": "^6.11.0",
"react-native-flash-message": "^0.1.18", "react-native-flash-message": "^0.1.18",
"react-native-gesture-handler": "~1.7.0", "react-native-gesture-handler": "~1.7.0",
"react-native-google-places-autocomplete": "^2.1.3", "react-native-google-places-autocomplete": "^2.1.3",
"react-native-keyboard-aware-scroll-view": "^0.9.3", "react-native-keyboard-aware-scroll-view": "^0.9.3",
"react-native-maps": "0.27.1", "react-native-maps": "0.27.1",
"react-native-multiple-choice": "0.0.8",
"react-native-places-input": "^1.1.7", "react-native-places-input": "^1.1.7",
"react-native-reanimated": "~1.13.0", "react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4", "react-native-safe-area-context": "3.1.4",

Loading…
Cancel
Save