Home Reference Source

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