Browse Source

standardazing modal messages

master
analuizaff 3 years ago
parent
commit
4884513eed
  1. 65
      src/app/components/ConfirmationModal.js
  2. 4
      src/app/components/LoadingMarkersModal.js
  3. 5
      src/app/components/SvgLabeledButton.js
  4. 59
      src/app/components/forms/OnSubmitAwaitModal.js
  5. 6
      src/app/components/forms/OnSubmitMessageModal.js
  6. 2
      src/app/screens/AccountScreen.js
  7. 5
      src/app/screens/SharingDataScreen.js

65
src/app/components/ConfirmationModal.js

@ -2,10 +2,11 @@ import React from "react";
import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native"; import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import colors from "../config/colors"; import colors from "../config/colors";
import { dimensions } from "../config/dimensions"; import { dimensions } from "../config/dimensions";
import { Ionicons } from "@expo/vector-icons";
function Btn({ label, onPress, bgColor, txtColor }) { function Btn({ label, onPress, bgColor, txtColor }) {
return ( return (
<TouchableOpacity onPress={onPress}>
<TouchableOpacity style={{marginTop: 15}} onPress={onPress}>
<View <View
style={{ style={{
paddingHorizontal: 40, paddingHorizontal: 40,
@ -14,7 +15,7 @@ function Btn({ label, onPress, bgColor, txtColor }) {
borderRadius: 6, borderRadius: 6,
}} }}
> >
<Text style={{color: txtColor, fontWeight: "bold"}}>{label}</Text>
<Text style={{ color: txtColor, fontWeight: "bold" }}>{label}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
@ -26,8 +27,9 @@ export default function ConfirmationModal({
onDecline, onDecline,
confirmationLabel, confirmationLabel,
declineLabel, declineLabel,
title = "",
title = null,
description = "", description = "",
icon = null,
}) { }) {
return ( return (
<Modal <Modal
@ -45,33 +47,46 @@ export default function ConfirmationModal({
}} }}
> >
<View style={styles.container}> <View style={styles.container}>
<View style={{ flex: 1, marginBottom: title !== "" ? 40 : 0 }}>
<Text
style={[styles.text, { fontSize: dimensions.text.secondary }]}
>
{title}
</Text>
{title && (
<View style={{ flex: 1, marginBottom: title !== "" ? 40 : 0 }}>
<Text
style={[styles.text, { fontSize: dimensions.text.secondary }]}
>
{title}
</Text>
</View>
)}
<View style={{ flexDirection: "row", alignItems: "center" }}>
{icon && (
<View style={{ marginRight: 5 }}>
<Ionicons name={icon} size={30} color={colors.primary} />
</View>
)}
<Text style={styles.text}>{description}</Text>
</View> </View>
<Text style={styles.text}>{description}</Text>
<View <View
style={{ style={{
flexDirection: "row", flexDirection: "row",
justifyContent: "space-evenly", justifyContent: "space-evenly",
marginTop: 24,
marginTop: 24,
}} }}
> >
{onConfirm && confirmationLabel && <Btn
label={confirmationLabel}
onPress={onConfirm}
bgColor={colors.secondary}
txtColor={colors.white}
/>}
{onDecline && declineLabel && <Btn
label={declineLabel}
onPress={onDecline}
bgColor={colors.lightGray}
txtColor={colors.black}
/>}
{onConfirm && confirmationLabel && (
<Btn
label={confirmationLabel}
onPress={onConfirm}
bgColor={colors.primary}
txtColor={colors.white}
/>
)}
{onDecline && declineLabel && (
<Btn
label={declineLabel}
onPress={onDecline}
bgColor={colors.secondary}
txtColor={colors.white}
/>
)}
</View> </View>
</View> </View>
</View> </View>
@ -82,7 +97,7 @@ export default function ConfirmationModal({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
width: "80%",
width: "85%",
justifyContent: "center", justifyContent: "center",
alignSelf: "center", alignSelf: "center",
backgroundColor: colors.lightestGray, backgroundColor: colors.lightestGray,
@ -90,7 +105,7 @@ const styles = StyleSheet.create({
borderWidth: 2, borderWidth: 2,
borderRadius: 12, borderRadius: 12,
paddingVertical: 16, paddingVertical: 16,
paddingHorizontal: 12
paddingHorizontal: 12,
}, },
text: { text: {
fontSize: dimensions.text.default, fontSize: dimensions.text.default,

4
src/app/components/LoadingMarkersModal.js

@ -40,7 +40,7 @@ export default function LoadingMarkersModal({ show }) {
style={{ alignSelf: "center", marginBottom: 12 }} style={{ alignSelf: "center", marginBottom: 12 }}
/> />
<Text style={styles.text}> <Text style={styles.text}>
Aguarde um momento enquanto os dados são carregados
Aguarde um momento enquanto os dados são carregados.
</Text> </Text>
</View> </View>
); );
@ -65,7 +65,7 @@ const styles = StyleSheet.create({
text: { text: {
fontSize: dimensions.text.secondary, fontSize: dimensions.text.secondary,
textAlign: "center", textAlign: "center",
color: colors.primary,
color: colors.black,
fontWeight: "bold", fontWeight: "bold",
}, },
}); });

5
src/app/components/SvgLabeledButton.js

@ -23,6 +23,9 @@ export default function SvgLabeledButton({
active = true, active = true,
inactiveOnPress = () => {}, inactiveOnPress = () => {},
}) { }) {
if(!active){
normalBgcolor = colors.grayBG;
}
const dims = scaleDimsFromWidth(width, height, 16); const dims = scaleDimsFromWidth(width, height, 16);
return ( return (
<Shadow <Shadow
@ -52,7 +55,7 @@ export default function SvgLabeledButton({
}, },
]} ]}
> >
<SvgImage {...dims} />
<SvgImage {...dims} />
<Text style={styles.label}>{label}</Text> <Text style={styles.label}>{label}</Text>
</View> </View>

59
src/app/components/forms/OnSubmitAwaitModal.js

@ -6,41 +6,38 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
import { dimensions, screen_height } from "../../config/dimensions"; import { dimensions, screen_height } from "../../config/dimensions";
const OnSubmitAwaitModal = ({ show }) => { const OnSubmitAwaitModal = ({ show }) => {
if(show){
return (
<Modal
transparent={true}
isVisible={show}
style={{
justifyContent: "flex-start",
alignSelf: "flex-end",
}}
>
<View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}>
<MaterialCommunityIcons
name="sync"
size={48}
color={colors.primary}
style={{ alignSelf: "center", marginBottom: 12 }}
/>
<Text style={styles.text}>
Aguarde um momento. Estamos enviando o formulário.
</Text>
</View>
</Modal>
);
}else{
return(
<></>
);
}
if (show) {
return (
<Modal
transparent={true}
isVisible={show}
style={{
justifyContent: "flex-start",
alignSelf: "flex-end",
}}
>
<View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}>
<MaterialCommunityIcons
name="sync"
size={50}
color={colors.primary}
style={{ alignSelf: "center", marginBottom: 12 }}
/>
<Text style={styles.text}>
Aguarde um momento enquanto registramos o dado.
</Text>
</View>
</Modal>
);
} else {
return <></>;
}
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
position: "absolute", position: "absolute",
width: "80%",
width: "85%",
height: 170, height: 170,
// justifyContent: "center", // justifyContent: "center",
alignSelf: "center", alignSelf: "center",
@ -53,7 +50,7 @@ const styles = StyleSheet.create({
text: { text: {
fontSize: dimensions.text.secondary, fontSize: dimensions.text.secondary,
textAlign: "center", textAlign: "center",
color: colors.primary,
color: colors.black,
fontWeight: "bold", fontWeight: "bold",
}, },
}); });

6
src/app/components/forms/OnSubmitMessageModal.js

@ -28,7 +28,7 @@ const onModalClose = () =>{
<View> <View>
<AntDesign <AntDesign
name="warning" name="warning"
size={48}
size={50}
color={colors.primary} color={colors.primary}
style={{ alignSelf: "center", marginBottom: 12 }} style={{ alignSelf: "center", marginBottom: 12 }}
/> />
@ -41,7 +41,7 @@ const onModalClose = () =>{
<View> <View>
<MaterialCommunityIcons <MaterialCommunityIcons
name="check-all" name="check-all"
size={48}
size={50}
color={colors.primary} color={colors.primary}
style={{ alignSelf: "center", marginBottom: 12 }} style={{ alignSelf: "center", marginBottom: 12 }}
/> />
@ -64,7 +64,7 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
position: "absolute", position: "absolute",
width: "80%",
width: "85%",
height: 170, height: 170,
// justifyContent: "center", // justifyContent: "center",
alignSelf: "center", alignSelf: "center",

2
src/app/screens/AccountScreen.js

@ -198,7 +198,7 @@ function AccountScreen(props) {
</View> </View>
<ConfirmationModal <ConfirmationModal
show={showLog} show={showLog}
title="SAIR"
icon={"log-out-outline"}
description="Você tem certeza que deseja sair?" description="Você tem certeza que deseja sair?"
confirmationLabel="SIM" confirmationLabel="SIM"
declineLabel="NÃO" declineLabel="NÃO"

5
src/app/screens/SharingDataScreen.js

@ -31,14 +31,15 @@ function SharingDataScreen({ navigation }) {
<View style={styles.container}> <View style={styles.container}>
<ConfirmationModal <ConfirmationModal
show={showLogPluv} show={showLogPluv}
description="Para enviar um dado pluviométrico cadastre um pluviômetro"
icon={"md-warning-outline"}
description="Para enviar um dado pluviométrico, cadastre um pluviômetro"
confirmationLabel="Cadastrar" confirmationLabel="Cadastrar"
onConfirm={() => onConfirmPluv()} //{setShowLogPluv(false), navigation.navigate("Perfil")}} onConfirm={() => onConfirmPluv()} //{setShowLogPluv(false), navigation.navigate("Perfil")}}
onDecline={() => setShowLogPluv(false)} onDecline={() => setShowLogPluv(false)}
/> />
<ConfirmationModal <ConfirmationModal
show={showLog} show={showLog}
description="Para enviar uma informação faça o login ou cadastre-se"
description="Para enviar uma informação, faça o login ou cadastre-se"
confirmationLabel="LOGIN" confirmationLabel="LOGIN"
onConfirm={() => authContext.setUser(false)} onConfirm={() => authContext.setUser(false)}
onDecline={() => setShowLog(false)} onDecline={() => setShowLog(false)}

Loading…
Cancel
Save