Browse Source

adding a 'wait' message to MapModal

master
analuizaff 3 years ago
parent
commit
84d88a3936
  1. 73
      src/app/components/MapModal.js

73
src/app/components/MapModal.js

@ -26,12 +26,25 @@ function notImplemented() {
}); });
} }
function topBar(props, setShowModal) {
function loadingData() {
return (
<View>
<Text>Carregando dados...</Text>
</View>
);
}
function onCloseModal(setShowModal, setCurrentMarker) {
setShowModal(null);
setCurrentMarker(undefined);
}
function topBar(props, setShowModal, setCurrentMarker) {
return ( return (
<View style={styles.topBar}> <View style={styles.topBar}>
<View style={{ alignContent: "center", flex: 1, marginHorizontal: 10 }}> <View style={{ alignContent: "center", flex: 1, marginHorizontal: 10 }}>
<Text style={[styles.bodyTitle, { color: "white" }]}> <Text style={[styles.bodyTitle, { color: "white" }]}>
{props.title}
{props ? props.title : "Aguarde..."}
</Text> </Text>
</View> </View>
@ -62,7 +75,7 @@ function topBar(props, setShowModal) {
<TouchableOpacity <TouchableOpacity
style={styles.topBarIcon} style={styles.topBarIcon}
onPress={() => setShowModal(null)}
onPress={() => onCloseModal(setShowModal, setCurrentMarker)}
> >
<MaterialCommunityIcons <MaterialCommunityIcons
name="close" name="close"
@ -249,8 +262,7 @@ function MapModal({ showModal, setShowModal, markers }) {
} }
const result = await getFieldsAnswers.fieldsAnswers(timeFilter, id); const result = await getFieldsAnswers.fieldsAnswers(timeFilter, id);
if (result.data) {
console.log(timeFilter);
if (result.data && showModal && currentMarker == undefined) {
setCurrentMarker( setCurrentMarker(
AssembleModalObject( AssembleModalObject(
JSON.stringify(result.data.responseData.array_to_json), JSON.stringify(result.data.responseData.array_to_json),
@ -265,22 +277,48 @@ function MapModal({ showModal, setShowModal, markers }) {
getAnswers(showModal, markers.get(showModal).name); getAnswers(showModal, markers.get(showModal).name);
} }
if (currentMarker != undefined && showModal != null) {
if (showModal != null) {
return ( return (
<SelfClosingModal <SelfClosingModal
style={{ position: "absolute" }} style={{ position: "absolute" }}
animationType="slide" animationType="slide"
transparent={true} transparent={true}
showModal={showModal} showModal={showModal}
setShowModal={setShowModal}
setShowModal={() => onCloseModal(setShowModal, setCurrentMarker)}
> >
{topBar(currentMarker, setShowModal)}
<View style={{ padding: 16 }}>
{componentBody(currentMarker)}
{isPluviometer(currentMarker.name) ? moreInfo(currentMarker) : null}
{/* {!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null} */}
{userMessage(currentMarker)}
</View>
{topBar(currentMarker, setShowModal, setCurrentMarker)}
{currentMarker != undefined && (
<View>
<View style={{ padding: 16 }}>
{componentBody(currentMarker)}
{isPluviometer(currentMarker.name)
? moreInfo(currentMarker)
: null}
{/* {!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null} */}
{userMessage(currentMarker)}
</View>
</View>
)}
{currentMarker == undefined && (
<View style={styles.bodyInfo}>
<View style={{ padding: dimensions.spacing.big_padding }}>
<MaterialCommunityIcons
name="sync"
size={48}
color={colors.primary}
style={{
alignSelf: "center",
alignItems: "center",
marginBottom: 12,
}}
/>
<Text style={styles.textWait}>
Aguarde um momento enquanto os dados são carregados
</Text>
</View>
</View>
)}
</SelfClosingModal> </SelfClosingModal>
); );
} else { } else {
@ -338,6 +376,13 @@ const styles = StyleSheet.create({
fontWeight: "500", fontWeight: "500",
fontSize: dimensions.text.default, fontSize: dimensions.text.default,
}, },
textWait: {
fontSize: dimensions.text.secondary,
textAlign: "center",
color: colors.primary,
fontWeight: "bold",
paddingBottom: dimensions.spacing.big_padding,
},
}); });
export default MapModal; export default MapModal;
Loading…
Cancel
Save