src/components/dialogBoxes/ConfirmationBoxOverlay.js
import React from 'react';
import {Modal, StyleSheet, Text, View} from 'react-native';
import Helper from '../helper/Helper';
import OkRoundButton from '../buttons/OkRoundButton';
import {RoundButtonSize} from '../../utils/DimensionsConstants';
import {ColorPalette, UIColors} from '../../utils/ColorConstants';
import {globalStyles} from '../../styles/styles';
import {iOSxxxLargeTypo} from '../../styles/Typography';
/**
* Component displaying an overlay on a view with a confirmation box.
* Contains a single ok button.
* @param {Object} props - Properties
* @param {string} props.message - Message displayed in the confirmation box.
* @param {boolean} props.modalVisible - Defines if the overlay is shown. Shown if true
* @param {function} props.onModalRequestCloseAction - Action to be executed when the device "back" button is pressed
* @param {function} props.onPressOkButtonAction - Action to be executed when the ok button is pressed
* @returns {Object} Overlay view displaying a confirmation box with a ok button.
*/
export default function ConfirmationBoxOverlay(props) {
// Retrieve props
const message = props.message;
const modalVisible = props.modalVisible;
const onModalRequestCloseAction = props.onModalRequestCloseAction;
const onPressOkButtonAction = props.onPressOkButtonAction;
return (
<Modal
animationType="fade"
transparent={true}
visible={modalVisible}
onRequestClose={onModalRequestCloseAction}>
<View style={styles.overlay}>
<View style={[styles.dialogBox, globalStyles.shadow]}>
<View style={styles.headerContainer}>
<View style={styles.helperContainer}>
<Helper id={8} />
</View>
<View style={styles.contentContainer}>
<Text
style={[
iOSxxxLargeTypo.title1,
styles.textMessage,
]}>
{message}
</Text>
</View>
</View>
<View style={styles.buttonsContainer}>
<OkRoundButton
buttonSize={RoundButtonSize.NORMAL}
style={styles.button}
onPress={onPressOkButtonAction}
/>
</View>
</View>
</View>
</Modal>
);
}
/** Local styles */
const styles = StyleSheet.create({
overlay: {
flex: 1,
width: '100%',
height: '100%',
paddingHorizontal: 180, // Set size of the dialog box
paddingVertical: 120,
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
backgroundColor: UIColors.OVERLAY,
},
dialogBox: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
width: '100%',
height: '100%',
backgroundColor: ColorPalette.ALMOST_WHITE,
borderRadius: 20,
},
headerContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
width: '100%',
height: '65%',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
backgroundColor: ColorPalette.BLANCHED_ALMOND,
},
helperContainer: {
width: '35%',
height: '80%',
margin: 30,
},
contentContainer: {
flex: 1,
height: '90%',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-around',
marginRight: '10%',
},
iconHeader: {
height: '60%',
aspectRatio: 1,
marginTop: '5%',
},
textMessage: {
marginBottom: '15%',
},
buttonsContainer: {
width: '100%',
height: '35%',
alignItems: 'center',
justifyContent: 'center',
alignContent: 'center',
padding: 15,
},
});