import LoopCache from '../../../api/LoopCache';
import styled from 'styled-components';
+const LoopLogsHeaderDivStyled = styled.div`
+ background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
+ padding: 10px 10px;
+ color: ${props => props.theme.loopViewerHeaderFontColor};
+`
+const TableStyled = styled(Table)`
+
+ overflow: auto;
+`
const TableRow = ({ logRow }) => (
<tr>
<td>{logRow.logInstant}</td>
)
-const LoopLogsHeaderDivStyled = styled.div`
- background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
- padding: 10px 10px;
- color: ${props => props.theme.loopViewerHeaderFontColor};
- overflow: auto;
-`
-
export default class LoopLogs extends React.Component {
state = {
constructor(props) {
super(props);
this.renderLogs = this.renderLogs.bind(this);
- this.state.loopCache=props.loopCache;
+ this.state.loopCache = props.loopCache;
}
shouldComponentUpdate(nextProps, nextState) {
renderLogs() {
if (this.state.loopCache.getLoopLogsArray() != null) {
- return (
- this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />)
- )
- }
+ return (
+ this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />)
+ )
+ }
}
render() {
return (
<LoopLogsHeaderDivStyled>
<label>Loop Logs</label>
- <Table striped hover bordeless variant responsive>
+ <TableStyled striped hover variant responsive>
<thead>
<tr>
<th><span align="left">Date</span></th>
<tbody>
{this.renderLogs()}
</tbody>
- </Table>
+ </TableStyled>
</LoopLogsHeaderDivStyled>
);