@janiscommerce/ui-native/dist/components/molecules/Toast/index.js

components library for Janis app

import React from 'react';
import { TouchableOpacity, View } from 'react-native';
import { StyleSheet } from 'react-native';
import { moderateScale, scaledForDevice } from '../../../scale';
import { defaultIcon } from './utils';
import { base, black } from '../../../theme/palette';
import BaseToast from '../../atoms/BaseToast';
import ToastAction from 'react-native-toast-message';
import Typography from '../../atoms/Typography';
import Icon from '../../atoms/Icon';
const Toast = ({ type, text1, text2, style, props }) => {
    const validType = type && typeof type === 'string';
    const validTitle = text1 && typeof text1 === 'string';
    const validMessage = text2 && typeof text2 === 'string';
    if (!validType || !validMessage) {
        return null;
    }
    const { showIcon = false, customIcon = null, showCloseIcon = false, actionTitle = null, onCloseCb = () => { }, actionCb = () => { }, iconStyle = {}, } = props || {};
    const validColor = type === 'warning' ? black.main : base.white;
    const defaultIconName = defaultIcon[type] || defaultIcon.notice;
    const selectedIconName = customIcon || defaultIconName;
    const horizontalAlign = validTitle ? 'flex-start' : 'center';
    const handleActionCb = () => actionCb();
    const handleCloseCb = () => {
        ToastAction.hide();
        onCloseCb();
    };
    const styles = StyleSheet.create({
        container: {
            display: 'flex',
            flexDirection: 'row',
            alignItems: horizontalAlign,
            width: '95%',
            borderRadius: scaledForDevice(4, moderateScale),
            paddingHorizontal: scaledForDevice(16, moderateScale),
            paddingVertical: scaledForDevice(16, moderateScale),
        },
        textWrapper: {
            flex: 1,
        },
        title: {
            fontFamily: 'Roboto-Bold',
            fontSize: scaledForDevice(18, moderateScale),
            lineHeight: scaledForDevice(22, moderateScale),
            marginBottom: scaledForDevice(10, moderateScale),
            color: validColor,
        },
        message: {
            fontFamily: 'Roboto-Regular',
            fontSize: scaledForDevice(14, moderateScale),
            lineHeight: scaledForDevice(20, moderateScale),
            color: validColor,
        },
        icon: {
            paddingRight: scaledForDevice(10, moderateScale),
        },
        feedbackWrapper: {
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
        },
        closeIconWrapper: {
            padding: scaledForDevice(10, moderateScale),
        },
        actionTitle: {
            marginRight: scaledForDevice(5, moderateScale),
            marginLeft: scaledForDevice(10, moderateScale),
            fontFamily: 'Roboto-Medium',
            fontSize: scaledForDevice(14, moderateScale),
            lineHeight: scaledForDevice(16, moderateScale),
            color: validColor,
        },
        actionWrapper: {
            padding: scaledForDevice(10, moderateScale),
        },
    });
    return (<BaseToast type={type} style={[styles.container, style]}>
			{showIcon && (<Icon name={selectedIconName} color={validColor} size={24} style={{ ...styles.icon, ...iconStyle }}/>)}

			<View style={styles.textWrapper}>
				{validTitle && <Typography style={styles.title}>{text1}</Typography>}
				{validMessage && <Typography style={styles.message}>{text2}</Typography>}
			</View>

			<View style={styles.feedbackWrapper}>
				{actionTitle && (<TouchableOpacity style={styles.actionWrapper} onPress={handleActionCb} activeOpacity={0.6}>
						<Typography style={styles.actionTitle}>{actionTitle}</Typography>
					</TouchableOpacity>)}
				{showCloseIcon && (<TouchableOpacity style={styles.closeIconWrapper} onPress={handleCloseCb} activeOpacity={0.6}>
						<Icon name="cross_light" color={validColor} size={24}/>
					</TouchableOpacity>)}
			</View>
		</BaseToast>);
};
export default Toast;