Home Reference Source

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,
    },
});