forked from cemaden-educacao/WPD-MobileApp
GabrielTrettel
4 years ago
3 changed files with 230 additions and 38 deletions
-
6src/app/components/MapMarker.js
-
245src/app/components/MapModal.js
-
1src/app/components/SelfClosingModal.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; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue