omnipay-savings-sdk
Version:
Omnipay Savings SDK
96 lines (95 loc) • 5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Modal = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_native_1 = require("react-native");
const utils_1 = require("../../utils");
const Modal = ({ visible, onClose, children, title = '', avoidKeyboard = true, onBackButtonClick, hideScrollView = false, containerStyle, contentStyle, footer, }) => {
const renderHeader = () => {
if (!title && !onClose && !onBackButtonClick) {
return null;
}
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
styles.header,
!title && styles.headerNoTitle,
] }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.left }, { children: [onBackButtonClick && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ onPress: onBackButtonClick, style: styles.iconButton }, { children: (0, jsx_runtime_1.jsx)(react_native_1.Text, Object.assign({ style: styles.iconText }, { children: '‹' })) }))), title ? (0, jsx_runtime_1.jsx)(react_native_1.Text, Object.assign({ style: styles.title }, { children: title })) : null] })), onClose && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ activeOpacity: 0.85, onPress: onClose, style: [
utils_1.globalStyles.shadowElevation,
utils_1.globalStyles.shadowProp,
styles.iconButton,
] }, { children: (0, jsx_runtime_1.jsx)(react_native_1.Text, Object.assign({ style: styles.iconText }, { children: '×' })) })))] })));
};
const ContentWrapper = hideScrollView ? react_native_1.View : react_native_1.ScrollView;
return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, Object.assign({ transparent: true, visible: visible,
// animationType="fade"
onRequestClose: onClose, statusBarTranslucent: false }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.overlay }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { activeOpacity: 1, onPress: onClose, style: styles.backdrop }), (0, jsx_runtime_1.jsx)(react_native_1.KeyboardAvoidingView, Object.assign({ behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height', style: styles.keyboardAvoidingView, enabled: avoidKeyboard }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [styles.container, containerStyle] }, { children: [renderHeader(), (0, jsx_runtime_1.jsx)(ContentWrapper, Object.assign({ style: [styles.content, contentStyle], keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false }, { children: children })), footer && ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.footer }, { children: footer })))] })) }))] })) })));
};
exports.Modal = Modal;
const styles = react_native_1.StyleSheet.create({
overlay: {
flex: 1,
justifyContent: 'flex-end',
backgroundColor: 'rgba(0,0,0,0.5)',
},
backdrop: Object.assign({}, react_native_1.StyleSheet.absoluteFillObject),
keyboardAvoidingView: {
justifyContent: 'flex-end',
},
container: {
backgroundColor: 'white',
borderTopLeftRadius: (0, utils_1.ms)(16),
borderTopRightRadius: (0, utils_1.ms)(16),
overflow: 'hidden',
maxHeight: '90%',
},
content: {
paddingVertical: (0, utils_1.ms)(16),
minHeight: (0, utils_1.ms)(120),
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
borderBottomColor: '#ccc',
paddingBottom: (0, utils_1.fontSz)(12),
marginBottom: (0, utils_1.fontSz)(12),
paddingHorizontal: (0, utils_1.ms)(16),
paddingVertical: (0, utils_1.ms)(16),
},
headerNoTitle: {
paddingVertical: 0,
marginBottom: 0,
borderBottomWidth: 0,
paddingHorizontal: 0,
},
left: {
flexDirection: 'row',
alignItems: 'center',
},
iconButton: {
backgroundColor: utils_1.Colors.white,
height: (0, utils_1.ms)(30),
width: (0, utils_1.ms)(30),
justifyContent: 'center',
alignItems: 'center',
borderRadius: (0, utils_1.ms)(1000),
},
iconText: {
fontSize: (0, utils_1.fontSz)(24),
color: '#333',
},
title: {
fontSize: (0, utils_1.fontSz)(16),
fontWeight: '500',
color: '#0a2540',
marginLeft: 4,
},
footer: {
backgroundColor: utils_1.Colors.white,
paddingHorizontal: (0, utils_1.ms)(20),
paddingVertical: (0, utils_1.ms)(12),
paddingBottom: (0, utils_1.ms)(22),
borderTopWidth: react_native_1.StyleSheet.hairlineWidth,
borderTopColor: '#ccc',
},
});