src/components/dialogBoxes/SaveAlertBoxOverlay.js
import React from 'react';
import {Modal, StyleSheet, Text, View} from 'react-native';
import BackSquareButton from '../buttons/BackSquareButton';
import DeleteSquareButton from '../buttons/DeleteSquareButton';
import Helper from '../helper/Helper';
import SaveIconWhiteSvgr from '../../assets/iconsSvgr/SaveIconWhiteSvgr';
import SaveSquareButton from '../buttons/SaveSquareButton';
import {ColorPalette, UIColors} from '../../utils/ColorConstants';
import {globalStyles} from '../../styles/styles';
import {iOSxxxLargeTypo} from '../../styles/Typography';
/**
* Component displaying an overlay on a view with an alert box.
* Contains a three buttons: cancel, delete changes, save changes.
* @param {Object} props - Properties
* @param {string} props.message - Message to be displayed in the alert 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.onPressCancelButtonAction - Action to be executed when the cancel button is pressed
* @param {function} props.onPressSaveButtonAction - Action to be executed when the save button is pressed
* @param {function} props.onPressDeleteButtonAction - Action to be executed when the delete button is pressed
* @returns {Object} Overlay with an alert box and 3 buttons
*/
export default function SaveAlertBoxOverlay(props) {
// Retrieve props
const message = props.message;
const modalVisible = props.modalVisible;
const onModalRequestCloseAction = props.onModalRequestCloseAction;
const onPressCancelButtonAction = props.onPressCancelButtonAction;
const onPressSaveButtonAction = props.onPressSaveButtonAction;
const onPressDeleteButtonAction = props.onPressDeleteButtonAction;
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={7} />
</View>
{/* {props.children} */}
<View style={styles.contentContainer}>
<SaveIconWhiteSvgr style={styles.iconHeader} />
<Text
style={[
iOSxxxLargeTypo.title1,
styles.textMessage,
]}>
{message}
</Text>
</View>
</View>
<View style={styles.buttonsContainer}>
<BackSquareButton onPress={onPressCancelButtonAction} />
<DeleteSquareButton
onPress={onPressDeleteButtonAction}
/>
<SaveSquareButton onPress={onPressSaveButtonAction} />
</View>
</View>
</View>
</Modal>
);
}
/** Local styles
* @type {Object}
*/
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.MISTY_ROSE,
},
helperContainer: {
width: '35%',
height: '80%',
margin: 30,
},
contentContainer: {
flex: 1,
height: '90%',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-around',
marginRight: '10%',
},
iconHeader: {
height: '40%',
aspectRatio: 1,
marginTop: '5%',
},
textMessage: {
marginBottom: '15%',
},
buttonsContainer: {
width: '100%',
height: '35%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
alignContent: 'center',
padding: 10,
},
centeredView: {
flex: 1,
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: ColorPalette.ALMOST_WHITE,
},
});