Browse Source

MapModal to new layout

master
GabrielTrettel 3 years ago
parent
commit
08ed4a5159
  1. 64
      src/app/components/MapModal.js

64
src/app/components/MapModal.js

@ -6,7 +6,6 @@ import colors from "../config/colors";
import { showMessage } from "react-native-flash-message";
import { dimensions, screen_height } from "../config/dimensions";
import { Svg, Image as ImageSvg } from "react-native-svg";
import { ScrollView } from "react-native-gesture-handler";
import PluviometerGraphics from "./PluviometerGraphics";
const chartHeight = screen_height * 0.3;
@ -24,9 +23,16 @@ function notImplemented() {
});
}
function topBar(setShowModal) {
function topBar(props, setShowModal) {
return (
<View style={styles.topBar}>
<View style={{ alignContent: "center", flex: 1, marginHorizontal: 10 }}>
<Text style={[styles.bodyTitle, { color: "white" }]}>
{props.title}
</Text>
</View>
<View style={{ flexDirection: "row", alignSelf: "flex-end" }}>
<TouchableOpacity
style={styles.topBarIcon}
onPress={() => notImplemented()}
@ -34,7 +40,7 @@ function topBar(setShowModal) {
<MaterialCommunityIcons
name="pencil"
size={20}
color={colors.dark}
color={colors.white}
alignItems="center"
/>
</TouchableOpacity>
@ -46,7 +52,7 @@ function topBar(setShowModal) {
<MaterialCommunityIcons
name="trash-can"
size={20}
color={colors.dark}
color={colors.white}
alignItems="center"
/>
</TouchableOpacity>
@ -58,11 +64,12 @@ function topBar(setShowModal) {
<MaterialCommunityIcons
name="close"
size={20}
color={colors.dark}
color={colors.white}
alignItems="center"
/>
</TouchableOpacity>
</View>
</View>
);
}
@ -73,7 +80,7 @@ function iconTextRow(props) {
<MaterialCommunityIcons
name={props.name}
size={18}
color={colors.dark}
color={colors.primary}
/>
</View>
@ -89,11 +96,12 @@ function iconImageRow(props) {
<MaterialCommunityIcons
name={props.name}
size={18}
color={colors.dark}
color={colors.primary}
/>
</View>
<View alignSelf="flex-start">
{props.pictures > 0 ? (
<Svg width={100} height={100}>
<ImageSvg
width="100%"
@ -102,6 +110,9 @@ function iconImageRow(props) {
href={{ uri: props.pic[0] }}
/>
</Svg>
) : (
<Text style={styles.text}>Não foto</Text>
)}
</View>
</View>
);
@ -190,22 +201,35 @@ function componentBody(props) {
<Image style={styles.bodyIcon} resizeMode="stretch" source={props.logo} />
<View style={styles.bodyInfo}>
<Text style={styles.bodyTitle}>{props.title}</Text>
{iconTextRow({ name: "map-marker", description: address })}
{iconTextRow({ name: "calendar", description: date })}
{iconTextRow({ name: "account", description: "Usuário ativo" })}
{pictures.length > 0 && iconImageRow({ name: "camera", pic: pictures })}
{iconImageRow({ name: "camera", pic: pictures })}
</View>
</View>
);
}
function userMessage(marker) {
if (marker.description == "") return <></>;
return (
<View>
<Text
style={[styles.text, { color: colors.primary, fontWeight: "bold" }]}
>
Comentário:
</Text>
<Text style={styles.text}>{marker.description}</Text>
</View>
);
}
function isPluviometer(name) {
return name === "pluviometer" || name === "officialPluviometer";
}
function MapModal({showModal, setShowModal, markers}) {
function MapModal({ showModal, setShowModal, markers }) {
var currentMarker = undefined;
if (markers && showModal != null && markers.has(showModal)) {
currentMarker = markers.get(showModal);
@ -220,13 +244,16 @@ function MapModal({showModal, setShowModal, markers}) {
showModal={showModal}
setShowModal={setShowModal}
>
{topBar(setShowModal)}
{topBar(currentMarker, setShowModal)}
<View style={{ padding: 16 }}>
{componentBody(currentMarker)}
{isPluviometer(currentMarker.name) ? moreInfo(currentMarker) : null}
{!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null}
{/* {!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null} */}
{userMessage(currentMarker)}
</View>
</SelfClosingModal>
);}
else {
);
} else {
return null;
}
}
@ -240,7 +267,6 @@ const styles = StyleSheet.create({
bodyTitle: {
fontWeight: "700",
fontSize: dimensions.text.secondary,
marginBottom: 5,
},
bodyInfo: {
flexDirection: "column",
@ -248,7 +274,7 @@ const styles = StyleSheet.create({
},
bodyIcon: {
alignSelf: "flex-start",
marginHorizontal: 20,
marginRight: 20,
height: 53,
width: 53,
},
@ -264,8 +290,10 @@ const styles = StyleSheet.create({
marginHorizontal: 10,
},
topBar: {
backgroundColor: colors.primary,
flexDirection: "row",
alignSelf: "flex-end",
width: "100%",
alignItems: "center",
},
topBarIcon: {
margin: 10,

Loading…
Cancel
Save