Browse Source

adjusting 'Dados' menu

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

34
src/app/components/DataMenu.js

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

6
src/app/components/FloatButton.js

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

Loading…
Cancel
Save