Browse Source

Implementing Figma bottom sheet of map marker.

master
GabrielTrettel 4 years ago
parent
commit
a00b5f1bf0
  1. 6
      src/app/components/MapMarker.js
  2. 245
      src/app/components/MapModal.js
  3. 1
      src/app/components/SelfClosingModal.js

6
src/app/components/MapMarker.js

@ -21,7 +21,11 @@ export default function MapMarker(props) {
/> />
</View> </View>
<MapModal isVisible={isModalVisible} setIsVisible={setIsModalVisible} />
<MapModal
isVisible={isModalVisible}
setIsVisible={setIsModalVisible}
{...props}
/>
<Callout <Callout
tooltip tooltip

245
src/app/components/MapModal.js

@ -1,50 +1,239 @@
import React, { Component } from "react";
import {
Modal,
Text,
TouchableOpacity,
View,
StyleSheet,
TouchableWithoutFeedback,
} from "react-native";
import { screen_height, screen_width } from "../config/dimensions";
import React, { useState } from "react";
import { Text, TouchableOpacity, View, StyleSheet, Image } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import SelfClosingModal from "../components/SelfClosingModal"; import SelfClosingModal from "../components/SelfClosingModal";
import colors from "../config/colors";
import { showMessage } from "react-native-flash-message";
import { dimensions } from "../config/dimensions";
import { Svg, Image as ImageSvg } from "react-native-svg";
/* NOTE: `Edit` and `Delete` icons behavior not implemented yet.
*
* Waiting for API handler to implement this functionality and avoid overwork
*/
function notImplemented() {
showMessage({
message: "Comportamento ainda não implementado",
duration: 1950,
icon: "warning",
type: "warning",
});
}
function topBar(props) {
return (
<View style={styles.topBar}>
<TouchableOpacity
style={styles.topBarIcon}
onPress={() => notImplemented()}
>
<MaterialCommunityIcons
name="pencil"
size={20}
color={colors.dark}
alignItems="center"
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.topBarIcon}
onPress={() => notImplemented()}
>
<MaterialCommunityIcons
name="trash-can"
size={20}
color={colors.dark}
alignItems="center"
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.topBarIcon}
onPress={() => props.setIsVisible(!props.isVisible)}
>
<MaterialCommunityIcons
name="close"
size={20}
color={colors.dark}
alignItems="center"
/>
</TouchableOpacity>
</View>
);
}
function iconTextRow(props) {
return (
<View flexDirection="row" alignSelf="flex-start" marginVertical={3}>
<View alignSelf="flex-start" marginRight={10}>
<MaterialCommunityIcons
name={props.name}
size={18}
color={colors.dark}
/>
</View>
<Text style={styles.text}>{props.description}</Text>
</View>
);
}
function iconImageRow(props) {
return (
<View flexDirection="row" alignSelf="flex-start" marginVertical={3}>
<View alignSelf="flex-start" marginRight={10}>
<MaterialCommunityIcons
name={props.name}
size={18}
color={colors.dark}
/>
</View>
<View alignSelf="flex-start">
<Svg width={100} height={100}>
<ImageSvg
width="100%"
height="100%"
preserveAspectRatio="xMinYMin stretch"
href={{ uri: props.pic[0] }}
/>
</Svg>
</View>
</View>
);
}
function reviews(props) {
const [likes, setLikes] = useState(0);
const [dislikes, setDislikes] = useState(0);
const updateLikes = () => {
setLikes(likes + 1);
notImplemented();
};
const updatedislikes = () => {
setDislikes(dislikes + 1);
notImplemented();
};
function modalContent(isVisible, setIsVisible) {
return ( return (
<View style={styles.reviewsContainer}>
<TouchableOpacity onPress={() => updatedislikes()}>
<View style={styles.review}>
<View marginRight={5}>
<MaterialCommunityIcons
name={"thumb-down"}
size={18}
color={colors.dark}
/>
</View>
<Text style={styles.text}>{dislikes}</Text>
</View>
</TouchableOpacity>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
setIsVisible(!isVisible);
updateLikes();
}} }}
> >
<Text>Hide Modal</Text>
<View style={styles.review}>
<View marginRight={5}>
<MaterialCommunityIcons
name={"thumb-up"}
size={18}
color={colors.dark}
/>
</View>
<Text style={styles.text}>{likes}</Text>
</View>
</TouchableOpacity> </TouchableOpacity>
</View>
); );
} }
function MapModal({
isVisible,
setIsVisible,
title,
description,
icon,
pictures,
}) {
console.log(screen_width);
function componentBody(props) {
// NOTE: This code is refered to our local SQLite solution. Revise this when implement rest API.
const pictures = JSON.parse(props.pictures);
const date = date ? date : "implementando...";
return (
<View style={styles.bodyRow}>
<Image
style={styles.bodyIcon}
resizeMode="stretch"
source={props.image}
/>
<View style={styles.bodyInfo}>
<Text style={styles.bodyTitle}>{props.title}</Text>
{iconTextRow({ name: "map-marker", description: "Rua Nassau, 158" })}
{iconTextRow({ name: "calendar", description: date })}
{iconTextRow({ name: "account", description: "Usuário ativo" })}
{pictures.length > 0 && iconImageRow({ name: "camera", pic: pictures })}
</View>
</View>
);
}
function MapModal(props) {
return ( return (
<View style={styles.centeredView}>
<SelfClosingModal <SelfClosingModal
animationType="slide" animationType="slide"
transparent={true} transparent={true}
visible={isVisible}
setVisible={setIsVisible}
visible={props.isVisible}
setVisible={props.setIsVisible}
> >
{modalContent(isVisible, setIsVisible)}
{topBar(props)}
{componentBody(props)}
{reviews(props)}
</SelfClosingModal> </SelfClosingModal>
</View>
); );
} }
const styles = StyleSheet.create({});
const styles = StyleSheet.create({
bodyRow: {
flexDirection: "row",
alignSelf: "flex-start",
alignContent: "space-between",
},
bodyTitle: {
fontWeight: "700",
fontSize: dimensions.text.secondary,
marginBottom: 5,
},
bodyInfo: {
flexDirection: "column",
alignContent: "flex-start",
},
bodyIcon: {
alignSelf: "flex-start",
marginHorizontal: 20,
height: 53,
width: 53,
},
reviewsContainer: {
flexDirection: "row",
alignSelf: "flex-end",
margin: 10,
},
review: {
flexDirection: "row",
alignSelf: "flex-end",
alignContent: "space-around",
marginHorizontal: 10,
},
topBar: {
flexDirection: "row",
alignSelf: "flex-end",
},
topBarIcon: {
margin: 10,
},
text: {
fontWeight: "500",
fontSize: dimensions.text.default,
},
});
export default MapModal; export default MapModal;

1
src/app/components/SelfClosingModal.js

@ -43,7 +43,6 @@ const styles = StyleSheet.create({
backgroundColor: "white", backgroundColor: "white",
borderTopLeftRadius: 10, borderTopLeftRadius: 10,
borderTopRightRadius: 10, borderTopRightRadius: 10,
padding: 35,
marginBottom: 0, marginBottom: 0,
alignItems: "center", alignItems: "center",
shadowColor: "#000", shadowColor: "#000",

Loading…
Cancel
Save