rustico/core
2
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

HCard extends component now. added state

Browse Source
This commit is contained in:
Giulio De Pasquale 2020-12-13 11:27:50 +00:00
parent c11cbe9d3f
commit 035d7831ae
2 changed files with 48 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
websrc/components/App.tsx
View File

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Container, Navbar, Row } from "react-bootstrap"; import { Container, Navbar, Row } from "react-bootstrap";
import Plot from "react-plotly.js"; import Plot from "react-plotly.js";
import { HCard } from "./HCard"; import HCard from "./HCard";
class App extends Component { class App extends Component {
constructor(props) { constructor(props) {

66
websrc/components/HCard.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { Component } from 'react';
import { FunctionComponent } from 'react'; import { FunctionComponent } from 'react';
import { Card, Col, Row } from 'react-bootstrap'; import { Card, Col, Row } from 'react-bootstrap';
@ -7,22 +7,50 @@ type CardProps = {
content: string content: string
} }
export const HCard: FunctionComponent<CardProps> = ({ title, content }) => type CardState = {
<Card bg="light" style={{ minWidth: "15rem" }}> lastUpdate: Date
<Row className="no-gutters"> }
<Col md={7} className="border-right my-auto">
<h3 className="text-center">{title}</h3>
</Col>
<Col md={5}> class HCard extends Component<CardProps, CardState> {
<Card.Body> constructor(props: CardProps) {
<Card.Text className="text-center"> super(props)
{content} }
</Card.Text>
</Card.Body> tick() {
</Col> this.setState({
</Row> lastUpdate: new Date()
<Card.Text className="border-top text-center"> })
<small className="text-muted my-auto mx-2">Last updated 3 mins ago</small> }
</Card.Text>
</Card> componentWillMount() {
this.tick()
}
componentDidMount() {
setInterval(() => this.tick(), 1000)
}
render() {
return (
<Card bg="light" style={{ minWidth: "15rem" }}>
<Row className="no-gutters">
<Col md={7} className="border-right my-auto">
<h3 className="text-center">{this.props.title}</h3>
</Col>
<Col md={5}>
<Card.Body>
<Card.Text className="text-center">
{this.props.content}
</Card.Text>
</Card.Body>
</Col>
</Row>
<Card.Text className="border-top text-center">
<small className="text-muted my-auto mx-2">Last updated {this.state.lastUpdate.toLocaleTimeString('en-GB')}</small>
</Card.Text>
</Card>);
}
}
export default HCard;