xref: /MusicFree/src/components/base/toast.tsx (revision 2aa881935ca35b8fb1abc4206e0dc35149231456)
1import React from 'react';
2import rpx from '@/utils/rpx';
3import {StyleSheet, Text, View} from 'react-native';
4import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
5import {fontSizeConst} from '@/constants/uiConst';
6
7interface IToastBaseProps {
8    text: string;
9    iconName: string;
10    iconColor: string;
11}
12function ToastBase(props: IToastBaseProps) {
13    const {text, iconName, iconColor} = props;
14    return (
15        <View style={styles.toastBasic}>
16            <Icon style={styles.icon} name={iconName} color={iconColor} />
17            <Text style={styles.text} numberOfLines={2}>
18                {text}
19            </Text>
20        </View>
21    );
22}
23
24const toastConfig = {
25    success: ({text1}: any) => (
26        <ToastBase text={text1} iconName="check-circle" iconColor="#457236" />
27    ),
28    warn: ({text1}: any) => (
29        <ToastBase text={text1} iconName="alert-circle" iconColor="#de7622" />
30    ),
31};
32
33export default toastConfig;
34
35const styles = StyleSheet.create({
36    toastBasic: {
37        width: rpx(600),
38        height: rpx(84),
39        borderRadius: rpx(48),
40        backgroundColor: '#fbeee2',
41        flexDirection: 'row',
42        alignItems: 'center',
43    },
44    text: {
45        fontSize: fontSizeConst.content,
46        includeFontPadding: false,
47        marginLeft: fontSizeConst.tag,
48        width: rpx(488),
49        color: '#333333',
50    },
51    icon: {
52        fontSize: fontSizeConst.appbar,
53        includeFontPadding: false,
54        marginLeft: fontSizeConst.content,
55    },
56});
57