|
@ -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, |
|
@ -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,6 +47,7 @@ export default function ConfirmationModal({ |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
<View style={styles.container}> |
|
|
<View style={styles.container}> |
|
|
|
|
|
{title && ( |
|
|
<View style={{ flex: 1, marginBottom: title !== "" ? 40 : 0 }}> |
|
|
<View style={{ flex: 1, marginBottom: title !== "" ? 40 : 0 }}> |
|
|
<Text |
|
|
<Text |
|
|
style={[styles.text, { fontSize: dimensions.text.secondary }]} |
|
|
style={[styles.text, { fontSize: dimensions.text.secondary }]} |
|
@ -52,7 +55,15 @@ export default function ConfirmationModal({ |
|
|
{title} |
|
|
{title} |
|
|
</Text> |
|
|
</Text> |
|
|
</View> |
|
|
</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> |
|
|
<Text style={styles.text}>{description}</Text> |
|
|
|
|
|
</View> |
|
|
<View |
|
|
<View |
|
|
style={{ |
|
|
style={{ |
|
|
flexDirection: "row", |
|
|
flexDirection: "row", |
|
@ -60,18 +71,22 @@ export default function ConfirmationModal({ |
|
|
marginTop: 24, |
|
|
marginTop: 24, |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
{onConfirm && confirmationLabel && <Btn |
|
|
|
|
|
|
|
|
{onConfirm && confirmationLabel && ( |
|
|
|
|
|
<Btn |
|
|
label={confirmationLabel} |
|
|
label={confirmationLabel} |
|
|
onPress={onConfirm} |
|
|
onPress={onConfirm} |
|
|
bgColor={colors.secondary} |
|
|
|
|
|
|
|
|
bgColor={colors.primary} |
|
|
txtColor={colors.white} |
|
|
txtColor={colors.white} |
|
|
/>} |
|
|
|
|
|
{onDecline && declineLabel && <Btn |
|
|
|
|
|
|
|
|
/> |
|
|
|
|
|
)} |
|
|
|
|
|
{onDecline && declineLabel && ( |
|
|
|
|
|
<Btn |
|
|
label={declineLabel} |
|
|
label={declineLabel} |
|
|
onPress={onDecline} |
|
|
onPress={onDecline} |
|
|
bgColor={colors.lightGray} |
|
|
|
|
|
txtColor={colors.black} |
|
|
|
|
|
/>} |
|
|
|
|
|
|
|
|
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, |
|
|