Browse Source

adjusting 'Dados' menu

master
analuizaff 4 years ago
parent
commit
bd450c351d
  1. 30
      src/app/components/DataMenu.js
  2. 6
      src/app/components/FloatButton.js

30
src/app/components/DataMenu.js

@ -1,16 +1,20 @@
import React, { Component, useRef, useState } from "react"; import React, { Component, useRef, useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View, CheckBox } from "react-native"; import { StyleSheet, Text, TouchableOpacity, View, CheckBox } from "react-native";
import { FontAwesome5 } from '@expo/vector-icons';
import colors from "../config/colors"; import colors from "../config/colors";
import { FlatList } from "react-native-gesture-handler"; import { FlatList } from "react-native-gesture-handler";
import { Fontisto } from '@expo/vector-icons'; import { Fontisto } from '@expo/vector-icons';
import { dimensions } from "../config/dimensions"; import { dimensions } from "../config/dimensions";
import { Dimensions } from "react-native";
export default class DataMenu extends Component { export default class DataMenu extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
timeSlots: [
layers: [
{ {
id: 1, id: 1,
name: 'Chuva', name: 'Chuva',
@ -51,25 +55,30 @@ export default class DataMenu extends Component {
} }
render() { render() {
const { timeSlots, selectedValue } = this.state;
const screenHeight = Dimensions.get("window").height;
const { layers, selectedValue } = this.state;
return ( return (
<View style={styles.container} > <View style={styles.container} >
<View style={{ flex: 0.70, backgroundColor: colors.light }}>
<View style={{
flex: 0.70,
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 <FlatList
data={timeSlots}
data={layers}
keyExtractor={(datas) => datas.id.toString()} keyExtractor={(datas) => datas.id.toString()}
renderItem={({ item }) => { renderItem={({ item }) => {
const isSelected = selectedValue[item.id]; const isSelected = selectedValue[item.id];
return ( return (
<View style={{flexDirection:"row", flex: 1, marginTop: 15 }}>
<View style={{flexDirection:"row", flex: 0.85}}>
<View style={{ flexDirection: "row", flex: 1, marginTop: 15, }}>
<View style={{ flexDirection: "row", flex: 0.80 }}>
<Fontisto name="rain" color={colors.lightBlue} size={20} /> <Fontisto name="rain" color={colors.lightBlue} size={20} />
<Text style={styles.item}> {item.name} </Text> <Text style={styles.item}> {item.name} </Text>
</View> </View>
<View <View
style={{alignSelf:"flex-end", flexDirection:"row"}}>
style={{ flex: 0.20, alignSelf: "flex-end", flexDirection: "row" }}>
<CheckBox <CheckBox
value={isSelected} value={isSelected}
onChange={() => this.toggleItem(item.id)} onChange={() => this.toggleItem(item.id)}
@ -81,7 +90,6 @@ export default class DataMenu extends Component {
}} }}
extraData={[selectedValue]} extraData={[selectedValue]}
/> />
<View style={styles.submit_btn}> <View style={styles.submit_btn}>
<TouchableOpacity onPress={() => console.log("Aplicar camadas")}> <TouchableOpacity onPress={() => console.log("Aplicar camadas")}>
<View style={styles.button}> <View style={styles.button}>
@ -101,9 +109,9 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
flexDirection: "row", flexDirection: "row",
alignSelf: "flex-end", alignSelf: "flex-end",
backgroundColor: colors.white,
}, },
submit_btn: { submit_btn: {
// position: "absolute",
bottom: 0, bottom: 0,
width: "100%", width: "100%",
padding: 20, padding: 20,
@ -115,7 +123,6 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
width: "100%", width: "100%",
height: 42, height: 42,
// marginVertical: 10,
textAlign: "center", textAlign: "center",
}, },
text: { text: {
@ -128,9 +135,6 @@ const styles = StyleSheet.create({
color: colors.lightBlue, color: colors.lightBlue,
fontSize: dimensions.text.tertiary, fontSize: dimensions.text.tertiary,
fontWeight: "bold", fontWeight: "bold",
} }
}); });

6
src/app/components/FloatButton.js

@ -21,6 +21,7 @@ import { Dimensions } from "react-native";
const screenWidth = Dimensions.get("window").width; const screenWidth = Dimensions.get("window").width;
const screenHeight = Dimensions.get("window").height; const screenHeight = Dimensions.get("window").height;
console.log(screenHeight);
function FloatButton(props) { function FloatButton(props) {
const animation = useRef(new Animated.Value(0)).current; const animation = useRef(new Animated.Value(0)).current;
@ -52,9 +53,9 @@ function FloatButton(props) {
transform: [ transform: [
{ scale: animation }, { scale: animation },
{ {
translateX: animation.interpolate({
translateY: animation.interpolate({
inputRange: [0, 1], inputRange: [0, 1],
outputRange: [0, 20],
outputRange: [0, 30],
}), }),
}, },
], ],
@ -106,7 +107,6 @@ const styles = StyleSheet.create({
}, },
submenu: { submenu: {
width: screenWidth, width: screenWidth,
height: screenHeight * 0.9,
flex: 1, flex: 1,
}, },
}); });

Loading…
Cancel
Save