2019-04-14 11:08:10 +02:00
|
|
|
/**
|
|
|
|
* Basic paragraph (p Element) that automatically re-renders itself every X seconds
|
|
|
|
*
|
|
|
|
* NOT recommended for usage - only if you really have to
|
|
|
|
*/
|
|
|
|
import * as React from "react";
|
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
intervalTime?: number;
|
2021-05-01 09:17:31 +02:00
|
|
|
style?: any;
|
2021-03-31 06:45:21 +02:00
|
|
|
getContent: () => JSX.Element;
|
|
|
|
getTooltip?: () => JSX.Element;
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
interface IState {
|
|
|
|
i: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
export class AutoupdatingParagraph extends React.Component<IProps, IState> {
|
|
|
|
/**
|
|
|
|
* Timer ID for auto-updating implementation (returned value from setInterval())
|
|
|
|
*/
|
2021-04-30 05:52:56 +02:00
|
|
|
interval = 0;
|
2019-04-14 11:08:10 +02:00
|
|
|
|
|
|
|
constructor(props: IProps) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
i: 0,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-05-01 09:17:31 +02:00
|
|
|
componentDidMount(): void {
|
2019-04-14 11:08:10 +02:00
|
|
|
const time = this.props.intervalTime ? this.props.intervalTime : 1000;
|
|
|
|
this.interval = setInterval(() => this.tick(), time);
|
|
|
|
}
|
|
|
|
|
2021-05-01 09:17:31 +02:00
|
|
|
componentWillUnmount(): void {
|
2019-04-14 11:08:10 +02:00
|
|
|
clearInterval(this.interval);
|
|
|
|
}
|
|
|
|
|
2021-05-01 09:17:31 +02:00
|
|
|
tick(): void {
|
2019-04-14 11:08:10 +02:00
|
|
|
this.setState(prevState => ({
|
2021-04-30 05:52:56 +02:00
|
|
|
i: prevState.i + 1,
|
2019-04-14 11:08:10 +02:00
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
2021-05-01 09:17:31 +02:00
|
|
|
hasTooltip(): boolean {
|
|
|
|
if (this.props.getTooltip != null) {
|
|
|
|
return !!this.props.getTooltip()
|
2019-05-02 00:20:14 +02:00
|
|
|
}
|
2021-05-01 09:17:31 +02:00
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
tooltip(): JSX.Element {
|
|
|
|
if(!this.props.getTooltip) return <></>;
|
|
|
|
return this.props.getTooltip();
|
|
|
|
}
|
2019-04-14 11:08:10 +02:00
|
|
|
|
2021-05-01 09:17:31 +02:00
|
|
|
render(): React.ReactNode {
|
2019-04-14 11:08:10 +02:00
|
|
|
return (
|
2021-03-31 06:45:21 +02:00
|
|
|
<p className="tooltip" style={this.props.style}>
|
|
|
|
{this.props.getContent()}
|
2019-04-14 11:08:10 +02:00
|
|
|
{
|
2021-05-01 09:17:31 +02:00
|
|
|
this.hasTooltip() &&
|
|
|
|
<span className={"tooltiptext"}>{this.tooltip()}</span>
|
2019-04-14 11:08:10 +02:00
|
|
|
}
|
|
|
|
</p>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|