core/websrc/components/RToast.tsx

49 lines
1.1 KiB
TypeScript

import React, { Component } from 'react';
import { FunctionComponent } from 'react';
import { Card, Col, Row, 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> {
constructor(props: ToastProps) {
super(props)
}
state = {
lastUpdated: new Date(),
show: false
}
componentDidMount() {
socket.on("connect", () => {
this.setState({ show: true })
})
}
tick() {
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>
{ this.props.content ? <Toast.Body> {this.props.content}</Toast.Body> : null}
</Toast>
)
}
}