62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
/*
|
|
* Note: the dataSet properties are used to leverage custom CSS in public/index.html
|
|
*/
|
|
|
|
import React, {useState, useEffect} from 'react'
|
|
// @ts-ignore no declarations available -prf
|
|
import {Text, View} from 'react-native-web'
|
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
|
|
interface ActiveToast {
|
|
text: string
|
|
}
|
|
type GlobalSetActiveToast = (_activeToast: ActiveToast | undefined) => void
|
|
|
|
// globals
|
|
// =
|
|
let globalSetActiveToast: GlobalSetActiveToast | undefined
|
|
let toastTimeout: NodeJS.Timeout | undefined
|
|
|
|
// components
|
|
// =
|
|
type ToastContainerProps = {}
|
|
const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
|
|
const [activeToast, setActiveToast] = useState<ActiveToast | undefined>()
|
|
useEffect(() => {
|
|
globalSetActiveToast = (t: ActiveToast | undefined) => {
|
|
setActiveToast(t)
|
|
}
|
|
})
|
|
return (
|
|
<>
|
|
{activeToast && (
|
|
<View dataSet={{'toast-container': 1}}>
|
|
<FontAwesomeIcon icon="check" size={24} />
|
|
<Text>{activeToast.text}</Text>
|
|
</View>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
// exports
|
|
// =
|
|
export default {
|
|
show(text: string, _opts: any) {
|
|
console.log('TODO: toast', text)
|
|
if (toastTimeout) {
|
|
clearTimeout(toastTimeout)
|
|
}
|
|
globalSetActiveToast?.({text})
|
|
toastTimeout = setTimeout(() => {
|
|
globalSetActiveToast?.(undefined)
|
|
}, 2e3)
|
|
},
|
|
positions: {
|
|
TOP: 0,
|
|
},
|
|
durations: {
|
|
LONG: 0,
|
|
},
|
|
ToastContainer,
|
|
}
|