Home Reference Source

src/components/dialogBoxes/InfoBoxOverlay.js

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

import CloseRoundButton from '../buttons/CloseRoundButton';

import {ColorPalette, UIColors} from '../../utils/ColorConstants';
import {RoundButtonSize} from '../../utils/DimensionsConstants';

/**
 * Component displaying an overlay on a view with an information box and a single close button
 * @param {Object} props - Properties
 * @param {function} props.onModalRequestCloseAction -
 *      Action to be executed when the device "back" button is pressed
 * @param {function} props.onPressButtonAction - Action to be executed when close button is pressed
 * @param {boolean} props.modalVisible - Defines if the overlay is shown. Shown if true
 * @param {Object} props.children - Content of the information box
 * @returns {Object} Overlay view with an information box and a close button
 */
export default function InfoBoxOverlay(props) {
    // Retrieve props
    const onModalRequestCloseAction = props.onModalRequestCloseAction;
    const onPressButtonAction = props.onPressButtonAction;
    const modalVisible = props.modalVisible;
    const children = props.children;

    return (
        <Modal
            animationType="fade"
            transparent={true}
            visible={modalVisible}
            onRequestClose={onModalRequestCloseAction}>
            <View
                style={[
                    styles.centeredView,
                    {backgroundColor: UIColors.OVERLAY},
                ]}>
                <View style={styles.modalView}>
                    {children}
                    <View style={styles.buttonContainer}>
                        <CloseRoundButton
                            buttonSize={RoundButtonSize.SMALL}
                            onPress={onPressButtonAction}
                        />
                    </View>
                </View>
            </View>
        </Modal>
    );
}

/** Local styles */
const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        alignContent: 'center',
    },
    modalView: {
        width: '80%',
        height: '80%',
        backgroundColor: ColorPalette.ALMOST_WHITE,
        borderRadius: 20,
        padding: 30,
        justifyContent: 'center',
        alignItems: 'center',
        alignContent: 'center',
        shadowColor: ColorPalette.shadowColor,
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
    },
    buttonContainer: {
        position: 'absolute',
        alignSelf: 'flex-end',
        top: -30,
        right: -30,
    },
});