54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { useToastStyles } from '@Components/ToastWrapper.styled'
|
|
import { useProgressBar } from '@Root/Hooks/useProgessBar'
|
|
import React, { FC, useContext } from 'react'
|
|
import { Animated, StyleSheet, View } from 'react-native'
|
|
import Toast, { ErrorToast, InfoToast, SuccessToast, ToastConfig } from 'react-native-toast-message'
|
|
import { ThemeContext } from 'styled-components'
|
|
|
|
export const ToastWrapper: FC = () => {
|
|
const theme = useContext(ThemeContext)
|
|
const styles = useToastStyles(theme)
|
|
|
|
const { updateProgressBar, progressBarWidth } = useProgressBar()
|
|
|
|
const toastStyles: ToastConfig = {
|
|
info: props => {
|
|
const percentComplete = props.props?.percentComplete || 0
|
|
updateProgressBar(percentComplete)
|
|
|
|
return (
|
|
<View>
|
|
<InfoToast {...props} style={styles(props.props).info} />
|
|
{props.props?.percentComplete !== undefined ? (
|
|
<View style={[styles(props.props).animatedViewContainer]}>
|
|
<Animated.View
|
|
style={[
|
|
StyleSheet.absoluteFill,
|
|
{
|
|
...styles(props.props).animatedView,
|
|
width: progressBarWidth,
|
|
},
|
|
]}
|
|
/>
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
)
|
|
},
|
|
success: props => {
|
|
const percentComplete = props.props?.percentComplete || 0
|
|
updateProgressBar(percentComplete)
|
|
|
|
return <SuccessToast {...props} style={styles(props.props).success} />
|
|
},
|
|
error: props => {
|
|
const percentComplete = props.props?.percentComplete || 0
|
|
updateProgressBar(percentComplete)
|
|
|
|
return <ErrorToast {...props} style={styles(props.props).error} />
|
|
},
|
|
}
|
|
|
|
return <Toast config={toastStyles} />
|
|
}
|