react-native-toast-kit
Version:
A customizable toast/snackbar notification library for React Native
103 lines (98 loc) • 4.48 kB
JavaScript
import React from 'react';
import { View, Text, StyleSheet, Dimensions, Pressable } from 'react-native';
import { getToastColors } from './utils';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { DEFAULT_BACKGROUND_COLOR, DEFAULT_BORDER_COLOR, DEFAULT_SUBTITLE_COLOR, DEFAULT_TEXT_COLOR } from './constants';
var width = Dimensions.get('window').width;
var ToastCard = function (_a) {
var _b, _c, _d, _e;
var message = _a.message, subMessage = _a.subMessage, type = _a.type, icon = _a.icon, iconPosition = _a.iconPosition, iconSpacing = _a.iconSpacing, msgColor = _a.msgColor, msgStyle = _a.msgStyle, subMsgColor = _a.subMsgColor, subMsgStyle = _a.subMsgStyle, borderColor = _a.borderColor, bgColor = _a.bgColor, borderWidth = _a.borderWidth, borderRadius = _a.borderRadius, actionText = _a.actionText, actionTextColor = _a.actionTextColor, actionTextStyle = _a.actionTextStyle, onActionPress = _a.onActionPress, variant = _a.variant, autoDismiss = _a.autoDismiss, onClose = _a.onClose;
var _f = type !== undefined
? getToastColors(type)
: {
toastBorderColor: DEFAULT_BORDER_COLOR,
toastBackgroundColor: DEFAULT_BACKGROUND_COLOR,
textColor: DEFAULT_TEXT_COLOR,
subtitleColor: DEFAULT_SUBTITLE_COLOR,
}, toastBorderColor = _f.toastBorderColor, toastBackgroundColor = _f.toastBackgroundColor, textColor = _f.textColor, subtitleColor = _f.subtitleColor;
var iconAllignment = 'flex-end';
if (iconPosition === 'start')
iconAllignment = 'flex-start';
else if (iconPosition === 'center')
iconAllignment = 'center';
var iconMap = {
success: <Icon name="check-circle" size={24} color={textColor}/>,
error: <Icon name="close-circle" size={24} color={textColor}/>,
info: <Icon name="information" size={24} color={textColor}/>,
warning: <Icon name="alert-circle" size={24} color={textColor}/>,
};
return (<View style={styles.container}>
<View style={[
styles.toastBox,
{
alignItems: iconAllignment,
borderColor: (_b = borderColor !== null && borderColor !== void 0 ? borderColor : toastBorderColor) !== null && _b !== void 0 ? _b : DEFAULT_BORDER_COLOR,
backgroundColor: (_c = bgColor !== null && bgColor !== void 0 ? bgColor : toastBackgroundColor) !== null && _c !== void 0 ? _c : DEFAULT_BACKGROUND_COLOR,
borderWidth: borderWidth,
borderRadius: borderRadius,
},
]}>
{(icon || (type != undefined && iconMap[type])) && <View style={[styles.iconWrapper, { marginRight: iconSpacing }]}>
{icon || (type != undefined && iconMap[type])}
</View>}
<View style={styles.content}>
<Text style={[styles.title, { color: (_d = textColor !== null && textColor !== void 0 ? textColor : msgColor) !== null && _d !== void 0 ? _d : DEFAULT_TEXT_COLOR }, msgStyle]}>{message}</Text>
<Text style={[styles.subtitle, { color: (_e = subtitleColor !== null && subtitleColor !== void 0 ? subtitleColor : subMsgColor) !== null && _e !== void 0 ? _e : DEFAULT_SUBTITLE_COLOR }, subMsgStyle]}>{subMessage}</Text>
</View>
{!autoDismiss && <Pressable onPress={onClose} hitSlop={10} style={styles.closeIconWrapper}>
<Icon name="close-thick" size={14} color={textColor || msgColor}/>
</Pressable>}
</View>
</View>);
};
var styles = StyleSheet.create({
container: {
paddingTop: 50,
alignItems: 'center',
width: '100%',
position: 'relative',
},
toastBox: {
flexDirection: 'row',
borderRadius: 12,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 6,
elevation: 5,
width: width * 0.9,
paddingVertical: 14,
paddingHorizontal: 12,
borderWidth: 1,
},
iconWrapper: {
justifyContent: 'center',
alignItems: 'center',
marginRight: 12,
marginTop: 2,
},
content: {
flex: 1,
},
title: {
fontWeight: 'bold',
fontSize: 16,
marginBottom: 4,
},
subtitle: {
fontSize: 14,
},
closeIconWrapper: {
position: 'absolute',
top: 10,
right: 10,
padding: 4,
zIndex: 10,
},
});
export default ToastCard;