aretherecookies-mobile/js/modals/FullScreenModal.js

// @flow
import React from 'react';
import { View, SafeAreaView } from 'react-native';
import { Toolbar } from 'react-native-material-ui';
import { compose, renderComponent, mapProps, pure } from 'recompose';
import TopSaveButton from '../components/TopSaveButton';
import { palette } from '../ui-theme';

type Props = {
	onClose: () => void,
	title: String,
	children: React.children,
	onSave?: Function,
};

const FullScreenModal = ({ onSave, onClose, title, children }: Props) => (
	<View
		style={{
			backgroundColor: 'white',
			position: 'absolute',
			top: 0,
			bottom: 0,
			left: 0,
			right: 0,
		}}>
		<View style={{ backgroundColor: palette.primaryColor }}>
			<SafeAreaView>
				<Toolbar
					leftElement="close"
					onLeftElementPress={onClose}
					centerElement={title}
					rightElement={onSave && <TopSaveButton onSave={onSave} />}
					style={{
						container: {
							elevation: 3,
						},
					}}
				/>
			</SafeAreaView>
		</View>
		{children}
	</View>
);

export default FullScreenModal;

export const wrapModalComponent = ({ component, onCloseProp, onUpdateProp }) =>
	compose(
		renderComponent,
		pure,
		mapProps((props: Props) => {
			return {
				foodItem: props.foodItem,
				onClose: props[onCloseProp],
				onUpdate: props[onUpdateProp],
			};
		})
	)(component);