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