core/websrc/components/RToast.tsx

48 lines
1.1 KiB
TypeScript
Raw Normal View History

2020-12-14 18:52:43 +00:00
import React, {Component} from 'react';
import {Toast} from 'react-bootstrap';
import {socket} from "../";
type ToastProps = {
title: string,
content?: string,
bg?: string
}
type ToastState = {
lastUpdated: Date,
show: boolean
}
export class RToast extends Component<ToastProps, ToastState> {
state = {
lastUpdated: new Date(),
show: false
}
2020-12-14 18:52:43 +00:00
constructor(props: ToastProps) {
super(props)
}
componentDidMount() {
socket.on("connect", () => {
2020-12-14 18:52:43 +00:00
this.setState({show: true})
})
}
tick() {
2020-12-14 18:52:43 +00:00
this.setState({lastUpdated: new Date()})
}
render() {
return (
<Toast show={this.state.show} delay={5000} autohide>
<Toast.Header>
<strong className="mr-auto">{this.props.title}</strong>
<small>{this.state.lastUpdated.toLocaleTimeString('en-GB')}</small>
</Toast.Header>
2020-12-14 18:52:43 +00:00
{this.props.content ? <Toast.Body> {this.props.content}</Toast.Body> : null}
</Toast>
)
}
}