import {
GestureResponderEvent,
StyleSheet,
TouchableOpacity,
View,
Platform,
ViewStyle,
} from 'react-native'
import { useMemo } from 'react'
import { Toast as NBToast } from 'native-base'
import {
charcoalBlack,
white,
margins,
text,
black,
padding,
ghostWhite,
green,
crimson,
containers,
cyanBlue,
orange,
} from '../../styles'
import CloseCircle from '../../assets/svg/closeCircle.svg'
import { Body, Caption } from '../typography'
export type ToastVariant = 'success' | 'error' | 'light' | 'dark' | 'warn'
export interface ToastProps {
title?: string
description?: string
onClose?: (e: GestureResponderEvent) => void
action?: {
title: string
onPress: (e: GestureResponderEvent) => void
}
variant?: ToastVariant
style?: ViewStyle
}
export const TOAST_COLOR_MAP = {
light: {
backgroundColor: white,
color: charcoalBlack,
secondaryBackgroundColor: ghostWhite,
borderColor: cyanBlue,
},
dark: {
backgroundColor: charcoalBlack,
color: white,
secondaryBackgroundColor: black,
borderColor: charcoalBlack,
},
success: {
backgroundColor: white,
color: charcoalBlack,
secondaryBackgroundColor: ghostWhite,
borderColor: green,
},
error: {
backgroundColor: white,
color: charcoalBlack,
secondaryBackgroundColor: ghostWhite,
borderColor: crimson,
},
warn: {
backgroundColor: white,
color: charcoalBlack,
secondaryBackgroundColor: ghostWhite,
borderColor: orange,
},
}
const isWeb = Platform.OS === 'web'
const styles = StyleSheet.create({
wrapper: {
maxWidth: '100%',
width: 300,
minWidth: isWeb ? undefined : '100%',
},
container: {
borderLeftWidth: 4,
},
closeButton: { position: 'absolute', right: 16, top: 16 },
nativeActionDivider: { height: 1 },
})
export const Toast = ({
title,
description,
action,
onClose,
variant = 'light',
style,
}: ToastProps) => {
const { backgroundColor, color, secondaryBackgroundColor, borderColor } =
TOAST_COLOR_MAP[variant]
const actionNode = useMemo(() => {
if (!action) {
return null
}
if (isWeb) {
return (
{action.title}
)
}
return (
<>
{action.title}
)
}, [action, color, secondaryBackgroundColor])
return (
{title && (
{title}
)}
{description && {description}}
{actionNode}
)
}
const toast = ({
title,
description,
onClose,
action,
variant = 'light',
duration,
}: ToastProps & { duration?: number | null }) => {
const toastId = NBToast.show({
placement: isWeb ? 'top-right' : 'bottom',
duration,
render: () => (
{
onClose?.(e)
NBToast.close(toastId)
}}
action={action}
variant={variant}
/>
),
})
}
Toast.show = toast