Browse Source

Fixing modal datamenu ScrollView height bug.

master
GabrielTrettel 3 years ago
parent
commit
1aef0e1fe2
  1. 71
      src/app/components/MapDataMenu.js
  2. 8
      src/app/components/SelfClosingModal.js
  3. 2
      src/app/config/colors.js

71
src/app/components/MapDataMenu.js

@ -146,24 +146,34 @@ function Border() {
return (
<View
style={{
width: 0.95 * screen_width,
width: 0.91 * screen_width,
alignSelf: "center",
height: 2,
borderRadius: 2,
paddingHorizontal: 16,
backgroundColor: colors.lightestGray,
// backgroundColor: colors.separatorGray,
}}
/>
);
}
function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option) {
function ListDataOptions(
dataOptionsToShow,
dataOriginToShow,
setDataOptionsToShow,
option
) {
const item = dataOptionsToShow[dataOriginToShow][option.code];
const dataOptionObject = {...dataOptionsToShow, [dataOriginToShow]: {...dataOptionsToShow[dataOriginToShow], [option.code]: !item}};
const dataOptionObject = {
...dataOptionsToShow,
[dataOriginToShow]: {
...dataOptionsToShow[dataOriginToShow],
[option.code]: !item,
},
};
return (
<View>
<View key={option.code}>
<View
style={{
flex: 1,
@ -197,9 +207,10 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
)}
</View>
<TouchableOpacity
onPress={() => {setDataOptionsToShow(dataOptionObject)}}
onPress={() => {
setDataOptionsToShow(dataOptionObject);
}}
>
<View
style={{
@ -208,12 +219,10 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
height: 36,
justifyContent: "center",
borderRadius: 6,
backgroundColor: item ? colors.activated : colors.notActivated,
backgroundColor: item ? colors.activated : colors.notActivated,
}}
>
<Text style={styles.text}>
{item ? "ADICIONAR" : "REMOVER"}
</Text>
<Text style={styles.text}>{item ? "ADICIONAR" : "REMOVER"}</Text>
</View>
</TouchableOpacity>
</View>
@ -222,13 +231,32 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
);
}
function DataOriginOptions({ dataOriginToShow, dataOptionsToShow, setDataOptionsToShow }) {
function DataOriginOptions({
dataOriginToShow,
dataOptionsToShow,
setDataOptionsToShow,
}) {
return (
<View paddingTop={8} height={"100%"}>
<ScrollView >
<View
style={{
paddingTop: 8,
flexDirection: "column",
}}
>
<ScrollView
height={270}
automaticallyAdjustContentInsets={true}
>
<View>
{dataOptions[dataOriginToShow].map((option) =>
ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option)
ListDataOptions(
dataOptionsToShow,
dataOriginToShow,
setDataOptionsToShow,
option
)
)}
</View>
</ScrollView>
</View>
);
@ -249,13 +277,10 @@ function DataMenuBody({ setShowModal }) {
riverFlood: true,
},
});
console.log(dataOptionsToShow)
return (
<View
style={{
height: "60%",
backgroundColor: colors.white,
}}
backgroundColor={colors.grayBG}
>
<DataMenuHeader setShowModal={setShowModal} />
<DataOriginSelector
@ -274,12 +299,14 @@ function DataMenuBody({ setShowModal }) {
export default function MapDataMenu(props) {
const [showModal, setShowModal] = useState(null);
return (
<View>
<View
>
<Button
title={"VISUALIZAR DADOS NO MAPA"}
onPress={() => setShowModal(true)}
/>
<SelfClosingModal
style={{position:"absolute"}}
animationType="slide"
transparent={true}
showModal={showModal}

8
src/app/components/SelfClosingModal.js

@ -5,12 +5,13 @@ import {
StyleSheet,
TouchableWithoutFeedback,
} from "react-native";
import { screen_height, screen_width } from "../config/dimensions";
import { screen_width } from "../config/dimensions";
import colors from "../config/colors";
export default function SelfClosingModal(props) {
return (
<View style={styles.centeredView}>
<View style={[styles.centeredView, props.style]}>
<Modal
animationType={props.animationType}
transparent={props.transparent}
@ -36,12 +37,13 @@ const styles = StyleSheet.create({
justifyContent: "flex-end",
alignItems: "center",
marginTop: 22,
marginBottom: 49,
},
modalView: {
flexShrink: 1,
margin: 20,
width: screen_width,
backgroundColor: "white",
backgroundColor: colors.grayBG,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
marginBottom: 0,

2
src/app/config/colors.js

@ -11,10 +11,12 @@ export default {
activated: "rgba(26, 138, 17, 0.63)",
lightGray: "#C4C4C4",
gray: "#999999",
separatorGray: "#D9D9D9",
subText: "#8B8C8C",
lightestGray: "#F0F0F0",
lightBlue: "#1976D2",
gold: "#ffd700",
toggle: "#e5eff4",
grayBG: "#EEECEC",
};
Loading…
Cancel
Save