From aa59f496115708ce6e4e71c5e35671c3069bec2c Mon Sep 17 00:00:00 2001 From: analuizaff Date: Tue, 6 Apr 2021 19:41:04 -0300 Subject: [PATCH] creating 'dados' menu --- src/app/components/DataMenu.js | 137 ++++++++++++++++++++++++++++++ src/app/components/FloatButton.js | 111 ++++++++++++++++++++++++ src/package-lock.json | 13 +++ src/package.json | 2 + 4 files changed, 263 insertions(+) create mode 100644 src/app/components/DataMenu.js create mode 100644 src/app/components/FloatButton.js diff --git a/src/app/components/DataMenu.js b/src/app/components/DataMenu.js new file mode 100644 index 0000000..61d034b --- /dev/null +++ b/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 ( + + + + + datas.id.toString()} + renderItem={({ item }) => { + const isSelected = selectedValue[item.id]; + return ( + + + + {item.name} + + + this.toggleItem(item.id)} + tintColors={{ true: colors.lightBlue, false: 'black' }} + /> + + + ); + }} + extraData={[selectedValue]} + /> + + + console.log("Aplicar camadas")}> + + Confirmar + + + + + + ) + }; + + +}; +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", + + + + } + +}); + diff --git a/src/app/components/FloatButton.js b/src/app/components/FloatButton.js new file mode 100644 index 0000000..98e49f4 --- /dev/null +++ b/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 ( + + + + + + + + + + + + + + + ); +} + +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; diff --git a/src/package-lock.json b/src/package-lock.json index 15cb56b..90d26f3 100644 --- a/src/package-lock.json +++ b/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": { "version": "6.11.0", "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", "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": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/react-native-places-input/-/react-native-places-input-1.1.7.tgz", diff --git a/src/package.json b/src/package.json index b6e378b..e647f54 100644 --- a/src/package.json +++ b/src/package.json @@ -36,12 +36,14 @@ "react-dom": "16.13.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-action-button": "^2.8.5", "react-native-chart-kit": "^6.11.0", "react-native-flash-message": "^0.1.18", "react-native-gesture-handler": "~1.7.0", "react-native-google-places-autocomplete": "^2.1.3", "react-native-keyboard-aware-scroll-view": "^0.9.3", "react-native-maps": "0.27.1", + "react-native-multiple-choice": "0.0.8", "react-native-places-input": "^1.1.7", "react-native-reanimated": "~1.13.0", "react-native-safe-area-context": "3.1.4",