add onRequestClose prop to Modal (#79)

cashubtc · Jun 22, 2023 · 4e91ef8 · 4e91ef8
1 parent e397c6a
commit 4e91ef8
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 27 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -243,7 +243,7 @@ function _App(_initialProps: IInitialProps) {
 							<Navigator />
 							<StatusBar style="auto" />
 							{/* claim token if app comes to foreground and clipboard has valid cashu token */}
-							<MyModal type='question' visible={claimOpen}>
+							<MyModal type='question' visible={claimOpen} close={() => setClaimOpen(false)}>
 								<Text style={globals(color, highlight).modalHeader}>
 									Found a cashu token in your clipboard
 								</Text>

diff --git a/src/components/InitialModal.tsx b/src/components/InitialModal.tsx
@@ -15,7 +15,7 @@ interface IInitialModalProps {
 export default function InitialModal({ visible, onConfirm, onCancel }: IInitialModalProps) {
 	const { color, highlight } = useContext(ThemeContext)
 	return (
-		<MyModal type='bottom' animation='slide' visible={visible}>
+		<MyModal type='bottom' animation='slide' visible={visible} close={onCancel}>
 			<Text style={globals(color, highlight).modalHeader}>
 				Get started
 			</Text>

diff --git a/src/components/modal/OptsModal.tsx b/src/components/modal/OptsModal.tsx
@@ -25,7 +25,7 @@ export default function OptsModal({
 }: IOptsModal) {
 	const { color, highlight } = useContext(ThemeContext)
 	return (
-		<MyModal type='bottom' animation='slide' visible={visible}>
+		<MyModal type='bottom' animation='slide' visible={visible} close={onPressCancel}>
 			<View style={{ marginVertical: 10 }} />
 			<ActionButtons
 				topBtnTxt={button1Txt}

diff --git a/src/components/modal/Question.tsx b/src/components/modal/Question.tsx
@@ -19,7 +19,7 @@ interface IQuestionModalProps {
 export function QuestionModal({ header, txt, visible, confirmTxt, confirmFn, cancelTxt, cancelFn }: IQuestionModalProps) {
 	const { color, highlight } = useContext(ThemeContext)
 	return (
-		<MyModal type='question' animation='fade' visible={visible} >
+		<MyModal type='question' animation='fade' visible={visible} close={cancelFn} >
 			<Text style={[globals(color).modalHeader, !txt?.length ? { marginBottom: 0 } : {}]}>
 				{header}
 			</Text>

diff --git a/src/components/modal/TrustMint.tsx b/src/components/modal/TrustMint.tsx
@@ -18,7 +18,7 @@ interface ITrustModalProps {
 export default function TrustMintModal({ loading, tokenInfo, handleTrustModal, closeModal }: ITrustModalProps) {
 	const { color, highlight } = useContext(ThemeContext)
 	return (
-		<MyModal type='question' animation='fade' visible>
+		<MyModal type='question' animation='fade' visible close={closeModal}>
 			<Text style={globals(color, highlight).modalHeader}>
 				Do you want to trust this mint?
 			</Text>

diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
@@ -10,6 +10,7 @@ interface IMyModalProps {
 	visible: boolean
 	success?: boolean
 	isContactList?: boolean
+	close?: () => void
 	children: React.ReactNode
 }
 
@@ -19,6 +20,7 @@ export default function MyModal({
 	visible,
 	success,
 	isContactList,
+	close,
 	children
 }: IMyModalProps) {
 
@@ -52,9 +54,10 @@ export default function MyModal({
 		visible ?
 			<View style={styles(color, highlight).modalParent}>
 				<Modal
+					visible
+					transparent
 					animationType={animation}
-					transparent={true}
-					visible={visible}
+					onRequestClose={close}
 				>
 					<KeyboardAvoidingView
 						style={getCorrectStyle()}

diff --git a/src/components/screens/Addressbook/Book.tsx b/src/components/screens/Addressbook/Book.tsx
@@ -176,7 +176,12 @@ export default function AddressBook({ nav, isModal, closeModal, setInput }: IAdd
 				</View>
 			}
 			{/* Add new contact modal */}
-			<MyModal type='bottom' animation='slide' visible={openNew.open && !prompt.open}>
+			<MyModal
+				type='bottom'
+				animation='slide'
+				visible={openNew.open && !prompt.open}
+				close={() => setOpenNew({ open: false, isOwner: false })}
+			>
 				<Text style={globals(color).modalHeader}>
 					{openNew.isOwner ? 'Your LNURL' : 'New contact'}
 				</Text>

diff --git a/src/components/screens/Addressbook/Contact.tsx b/src/components/screens/Addressbook/Contact.tsx
@@ -50,6 +50,13 @@ export default function ContactPage({ navigation, route }: IContactPageProps) {
 			setOpenEdit(false)
 		}
 	}
+	const handleEditCancel = () => {
+		setOpenEdit(false)
+		setEditContact({
+			name: route.params.contact?.name,
+			ln: route.params.contact?.ln
+		})
+	}
 	useEffect(() => {
 		setEditContact({
 			name: route.params.contact?.name,
@@ -96,7 +103,12 @@ export default function ContactPage({ navigation, route }: IContactPageProps) {
 				</TouchableOpacity>
 			</View>
 			{/* Edit contact modal */}
-			<MyModal type='bottom' animation='slide' visible={openEdit && !prompt.open}>
+			<MyModal
+				type='bottom'
+				animation='slide'
+				visible={openEdit && !prompt.open}
+				close={handleEditCancel}
+			>
 				<Text style={globals(color).modalHeader}>
 					Edit contact
 				</Text>
@@ -122,13 +134,7 @@ export default function ContactPage({ navigation, route }: IContactPageProps) {
 				/>
 				<TouchableOpacity
 					style={styles.cancel}
-					onPress={() => {
-						setOpenEdit(false)
-						setEditContact({
-							name: route.params.contact?.name,
-							ln: route.params.contact?.ln
-						})
-					}}
+					onPress={handleEditCancel}
 				>
 					<Text style={globals(color, highlight).pressTxt}>
 						Cancel

diff --git a/src/components/screens/Addressbook/modal.tsx b/src/components/screens/Addressbook/modal.tsx
@@ -9,7 +9,7 @@ interface IAddressBookModalProps {
 
 export default function AddressbookModal({ closeModal, setInput }: IAddressBookModalProps) {
 	return (
-		<MyModal type='invoiceAmount' animation='slide' visible isContactList>
+		<MyModal type='invoiceAmount' animation='slide' visible isContactList close={closeModal}>
 			<AddressBook
 				isModal
 				closeModal={closeModal}

diff --git a/src/components/screens/History/Details.tsx b/src/components/screens/History/Details.tsx
@@ -230,7 +230,7 @@ export default function DetailsPage({ navigation, route }: THistoryEntryPageProp
 				</View>
 			</ScrollView>
 			<BottomNav navigation={navigation} route={route} />
-			<MyModal type='question' visible={qr.open}>
+			<MyModal type='question' visible={qr.open} close={() => setQr({ open: false, error: false })}>
 				{qr.error ?
 					<Txt txt='The amount of data is too big for a QR code.' styles={[{ textAlign: 'center' }]} />
 					:

diff --git a/src/components/screens/Lightning/modal.tsx b/src/components/screens/Lightning/modal.tsx
@@ -86,7 +86,13 @@ export function InvoiceModal({ visible, invoice, mintUrl, close }: IInvoiceModal
 		}
 	}, [expiry, expiryTime])
 	return (
-		<MyModal type='invoiceAmount' animation='fade' visible={visible} success={paid === 'paid' || mintUrl === _mintUrl}>
+		<MyModal
+			type='invoiceAmount'
+			animation='fade'
+			visible={visible}
+			success={paid === 'paid' || mintUrl === _mintUrl}
+			close={close}
+		>
 			{invoice.decoded && mintUrl !== _mintUrl && (!paid || paid === 'unpaid') ?
 				<View style={styles.container}>
 					<View style={styles.invoiceWrap}>
@@ -174,6 +180,10 @@ export function CoinSelectionModal({ mint, lnAmount, disableCS, proofs, setProof
 	const { color, highlight } = useContext(ThemeContext)
 	const [visible, setVisible] = useState(true)
 	const [mintKeysetId, setMintKeysetId] = useState('')
+	const cancelCoinSelection = () => {
+		setVisible(false)
+		disableCS()
+	}
 	// get the active keysetid of a mint once on initial render to compare with the proof keysets in the list
 	useEffect(() => {
 		if (!mint?.mintUrl) { return }
@@ -182,17 +192,14 @@ export function CoinSelectionModal({ mint, lnAmount, disableCS, proofs, setProof
 		})()
 	}, [mint?.mintUrl])
 	return (
-		<MyModal type='invoiceAmount' animation='slide' visible={visible}>
+		<MyModal type='invoiceAmount' animation='slide' visible={visible} close={cancelCoinSelection}>
 			<View style={styles.proofContainer}>
 				<View style={styles.header}>
 					<Text style={globals(color).navTxt}>
 						Coin selection
 					</Text>
 					<TouchableOpacity
-						onPress={() => {
-							setVisible(false)
-							disableCS()
-						}}
+						onPress={cancelCoinSelection}
 					>
 						<Text style={globals(color, highlight).pressTxt}>
 							Cancel

diff --git a/src/components/screens/Lightning/scannedQR.tsx b/src/components/screens/Lightning/scannedQR.tsx
@@ -127,7 +127,7 @@ export default function ScannedQRDetails({ lnDecoded, closeDetails, nav }: IScan
 		}
 	}, [timeLeft])
 	return (
-		<MyModal type='invoiceAmount' animation='slide' visible>
+		<MyModal type='invoiceAmount' animation='slide' visible close={closeDetails}>
 			<View style={styles.topContainer}>
 				<Text style={globals(color, highlight).modalHeader}>
 					Lightning payment request

diff --git a/src/components/screens/Mints/MintManagement.tsx b/src/components/screens/Mints/MintManagement.tsx
@@ -312,7 +312,7 @@ export default function MintManagement({ navigation, route }: TMintManagementPag
 			}
 			{/* Custom mint name */}
 			{customNameOpen &&
-				<MyModal type='bottom' animation='slide' visible={true}>
+				<MyModal type='bottom' animation='slide' visible close={() => setCustomNameOpen(false)}>
 					<Text style={globals(color).modalHeader}>
 						{edit ? 'Edit mint name' : 'Add a custom name'}
 					</Text>

diff --git a/src/components/screens/Mints/index.tsx b/src/components/screens/Mints/index.tsx
@@ -179,7 +179,12 @@ export default function Mints({ navigation, route }: TMintsPageProps) {
 				</View>
 			</View>
 			{/* Submit new mint URL modal */}
-			<MyModal type='bottom' animation='slide' visible={newMintModal && !prompt.open}>
+			<MyModal
+				type='bottom'
+				animation='slide'
+				visible={newMintModal && !prompt.open}
+				close={() => setNewMintModal(false)}
+			>
 				<Text style={globals(color).modalHeader}>
 					Add a new mint
 				</Text>