@janiscommerce/ui-native
Version:
components library for Janis app
60 lines (59 loc) • 2.28 kB
JavaScript
import React from 'react';
import { Modal as ModalComponent, StyleSheet, View } from 'react-native';
import { base } from '../../../../../theme/palette';
import { moderateScale, scaledForDevice } from '../../../../../scale';
import Button from '../../../Button';
const Modal = ({ show, setShow, isMulti, modalAcceptText, children }) => {
const validBottom = scaledForDevice(20, moderateScale);
const validMinWidth = scaledForDevice(270, moderateScale);
const validPaddingTop = scaledForDevice(24, moderateScale);
const validPaddingBottom = scaledForDevice(12, moderateScale);
const validPaddingHorizontal = scaledForDevice(20, moderateScale);
const validLeft = scaledForDevice(8, moderateScale);
const validTop = scaledForDevice(4, moderateScale);
const styles = StyleSheet.create({
background: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: '100%',
backgroundColor: '#0009',
},
containerModal: {
justifyContent: 'space-between',
},
contentWrapper: {
bottom: validBottom,
minWidth: validMinWidth,
paddingTop: validPaddingTop,
paddingBottom: validPaddingBottom,
paddingLeft: validPaddingHorizontal,
paddingRight: validPaddingHorizontal,
backgroundColor: base.white,
elevation: 5,
},
buttonWrapper: {
flexDirection: 'row',
justifyContent: 'flex-end',
flexWrap: 'wrap',
left: validLeft,
top: validTop,
},
buttonText: {
fontWeight: '700',
textTransform: 'uppercase',
},
});
return (<ModalComponent animationType="fade" transparent visible={show}>
<View style={styles.background}>
<View style={styles.contentWrapper}>
<View style={styles.containerModal}>{children}</View>
{isMulti && (<View style={styles.buttonWrapper}>
<Button value={modalAcceptText} variant={'text'} type={'secondary'} textStyle={styles.buttonText} onPress={() => setShow(false)}/>
</View>)}
</View>
</View>
</ModalComponent>);
};
export default Modal;