49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Typography } from "@material-ui/core";
|
|
import { Box, Button } from "@material-ui/core";
|
|
import { LazyLog, ScrollFollow } from "react-lazylog";
|
|
|
|
const MachineLog = () => {
|
|
const [logs, setLogs] = useState(["Welcome..."]);
|
|
const addLog = text => {
|
|
setLogs(prev => [...prev, text]);
|
|
};
|
|
|
|
const randomLog = () => {
|
|
addLog(
|
|
"Text messaging, or texting, is the act of composing and sending electronic messages"
|
|
);
|
|
addLog(
|
|
"The term originally referred to messages sent using the Short Message Service (SMS). "
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Box margin={1}>
|
|
<Typography variant="h6" gutterBottom component="div">
|
|
Logs
|
|
</Typography>
|
|
<div style={{ height: 200 }}>
|
|
<ScrollFollow
|
|
startFollowing={true}
|
|
render={({ follow, onScroll }) => (
|
|
<LazyLog
|
|
extraLines={1}
|
|
enableSearch
|
|
text={logs.join("\n")}
|
|
caseInsensitive
|
|
follow={follow}
|
|
onScroll={onScroll}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
<Button variant="contained" color="primary" onClick={randomLog}>
|
|
Add
|
|
</Button>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default MachineLog;
|