Home Reference Source

src/components/dialogBoxes/JournalAlertBoxOverlay.js

import React from 'react';
import {Modal, StyleSheet, Text, View} from 'react-native';

import BackSquareButton from '../buttons/BackSquareButton';
import LockIconSvgr from '../../assets/iconsSvgr/LockIconSvgr';
import LoginSquareButton from '../buttons/LoginSquareButton';

import {ColorPalette, UIColors} from '../../utils/ColorConstants';
import {globalStyles} from '../../styles/styles';
import {iOSxxxLargeTypo} from '../../styles/Typography';

/**
 * Component displaying an overlay view with alert box for login to journal.
 * Contains a button to go back to the previous view and another to login.
 * @param {Object} props - Properties
 * @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
 * @param {function} props.onPressCancelButtonAction - Action to be executed when the cancel button is pressed
 * @param {boolean} props.modalVisible - Defines if the overlay is shown. Shown if true
 * @returns {Object} Overlay alert box for login to journal
 */
export default function JournalAlertBoxOverlay(props) {
    const onModalRequestCloseAction = props.onModalRequestCloseAction;
    const onPressOkButtonAction = props.onPressOkButtonAction;
    const onPressCancelButtonAction = props.onPressCancelButtonAction;
    const modalVisible = props.modalVisible;

    return (
        <Modal
            animationType="fade"
            transparent={true}
            visible={modalVisible}
            onRequestClose={onModalRequestCloseAction}>
            <View style={styles.overlay}>
                <View style={[styles.dialogBox, globalStyles.shadow]}>
                    <View style={styles.headerContainer}>
                        <LockIconSvgr style={styles.icon} />

                        <View style={styles.message}>
                            <Text
                                style={[
                                    iOSxxxLargeTypo.title2,
                                    styles.textMessage,
                                ]}>
                                Kun for helsepersonell!
                            </Text>
                        </View>
                    </View>

                    <View style={styles.buttonsContainer}>
                        <BackSquareButton onPress={onPressCancelButtonAction} />
                        <LoginSquareButton onPress={onPressOkButtonAction} />
                    </View>
                </View>
            </View>
        </Modal>
    );
}

/** Local styles
 * @type {Object}
 */
const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        width: '100%',
        height: '100%',
        paddingHorizontal: 250, // Set size of the dialog box
        paddingVertical: 180,
        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: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '60%',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        backgroundColor: ColorPalette.PACIFIC_BLUE,
    },
    icon: {
        width: '40%',
        height: '45%',
        marginTop: 30,
    },
    message: {
        justifyContent: 'center',
    },
    textMessage: {
        padding: 25,
        color: ColorPalette.WHITE,
    },
    buttonsContainer: {
        width: '100%',
        height: '40%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
        alignContent: 'center',
        paddingBottom: 5,
    },
});