You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.6 KiB
142 lines
3.6 KiB
import React, { useState } from "react";
|
|
|
|
import { View, StyleSheet, Text, Button, TouchableOpacity } from "react-native";
|
|
import SelfClosingModal from "./SelfClosingModal";
|
|
import colors from "../config/colors";
|
|
import { FontAwesome5 } from '@expo/vector-icons';
|
|
import { MaterialIcons } from "@expo/vector-icons";
|
|
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
|
import { Shadow } from "react-native-shadow-2";
|
|
|
|
function DataMenuHeader({ setShowModal }) {
|
|
return (
|
|
<View
|
|
style={{
|
|
backgroundColor: colors.primary,
|
|
height: 42,
|
|
justifyContent: "center",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: 16,
|
|
}}
|
|
>
|
|
<Text style={styles.text}>DADOS</Text>
|
|
|
|
<TouchableOpacity
|
|
style={styles.topBarIcon}
|
|
onPress={() => setShowModal(null)}
|
|
>
|
|
<MaterialCommunityIcons name="close" size={24} color={colors.white} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function DataOriginSelector() {
|
|
const [dataOriginToShow, setDataOriginToShow] = useState("oficial")
|
|
const bgToUse = (selected) => dataOriginToShow == selected ? colors.secondary : colors.gray;
|
|
|
|
return (
|
|
<Shadow
|
|
viewStyle={{ width: "100%", height: 40 }}
|
|
offset={[0, 4]}
|
|
distance={4}
|
|
radius={0}
|
|
startColor="rgba(0, 0, 0, 0.25)"
|
|
paintInside={true}
|
|
>
|
|
<View
|
|
style={{
|
|
height: 40,
|
|
justifyContent: "center",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
backgroundColor: colors.secondary,
|
|
}}
|
|
>
|
|
<TouchableOpacity
|
|
style={[styles.choicesBtn, {backgroundColor: bgToUse("oficial")}]}
|
|
onPress={() => setDataOriginToShow("oficial")}
|
|
>
|
|
<MaterialIcons
|
|
name="account-balance"
|
|
size={24}
|
|
color={colors.white}
|
|
alignItems="center"
|
|
/>
|
|
<Text style={[styles.text, {marginLeft: 12}]}>OFICIAL</Text>
|
|
</TouchableOpacity>
|
|
|
|
|
|
<TouchableOpacity
|
|
style={[styles.choicesBtn, {backgroundColor: bgToUse("citzen")}]}
|
|
onPress={() => setDataOriginToShow("citzen")}
|
|
>
|
|
<FontAwesome5
|
|
name="user-alt"
|
|
size={22}
|
|
color={colors.white}
|
|
alignItems="center"
|
|
/>
|
|
<Text style={[styles.text, {marginLeft: 12}]}>CIDADÃO</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</Shadow>
|
|
);
|
|
}
|
|
|
|
function DataMenuBody({ setShowModal }) {
|
|
return (
|
|
<View
|
|
style={{
|
|
height: "60%",
|
|
backgroundColor: colors.white,
|
|
}}
|
|
>
|
|
<DataMenuHeader setShowModal={setShowModal} />
|
|
<DataOriginSelector />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default function MapDataMenu(props) {
|
|
const [showModal, setShowModal] = useState(null);
|
|
return (
|
|
<View>
|
|
<Button
|
|
title={"VISUALIZAR DADOS NO MAPA"}
|
|
onPress={() => setShowModal(true)}
|
|
/>
|
|
<SelfClosingModal
|
|
animationType="slide"
|
|
transparent={true}
|
|
showModal={showModal}
|
|
setShowModal={setShowModal}
|
|
>
|
|
<DataMenuBody setShowModal={setShowModal} />
|
|
</SelfClosingModal>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
choicesBtn: {
|
|
width: "50%",
|
|
backgroundColor: colors.secondary,
|
|
height: "100%",
|
|
justifyContent: "center",
|
|
paddingHorizontal: 12,
|
|
alignItems: "center",
|
|
justifyContent: "flex-start",
|
|
flexDirection: "row"
|
|
},
|
|
text: {
|
|
color: colors.white,
|
|
alignSelf: "center",
|
|
fontWeight: "500",
|
|
fontSize: 16,
|
|
},
|
|
topBarIcon: {
|
|
alignSelf: "center",
|
|
},
|
|
});
|