Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-26 09:33:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

use react-draggable

Browse Source
This commit is contained in:
Olivier Gagnon 2021-10-05 00:59:40 -04:00
parent bb0bdb776b
commit 70796e7674
3 changed files with 66 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
package-lock.json generated
View File

@ -53,6 +53,7 @@
"numeral": "2.0.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.4",
"react-modal": "^3.12.1",
"sprintf-js": "^1.1.1",
"tapable": "^1.0.0",
@ -22097,6 +22098,19 @@
"react": "17.0.2"
}
},
"node_modules/react-draggable": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.4.tgz",
"integrity": "sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==",
"dependencies": {
"clsx": "^1.1.1",
"prop-types": "^15.6.0"
},
"peerDependencies": {
"react": ">= 16.3.0",
"react-dom": ">= 16.3.0"
}
},
"node_modules/react-is": {
"version": "16.8.3",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz",
@ -45494,6 +45508,15 @@
"scheduler": "^0.20.2"
}
},
"react-draggable": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.4.tgz",
"integrity": "sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==",
"requires": {
"clsx": "^1.1.1",
"prop-types": "^15.6.0"
}
},
"react-is": {
"version": "16.8.3",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz",

1
package.json
View File

@ -54,6 +54,7 @@
"numeral": "2.0.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.4",
"react-modal": "^3.12.1",
"sprintf-js": "^1.1.1",
"tapable": "^1.0.0",

95
src/ui/React/LogBoxManager.tsx
View File

@ -6,6 +6,7 @@ import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";
import Draggable from "react-draggable";
export const LogBoxEvents = new EventEmitter<[RunningScript]>();
@ -64,20 +65,6 @@ function LogWindow(props: IProps): React.ReactElement {
return () => clearInterval(id);
}, []);
useEffect(() => {
function closeHandler(event: KeyboardEvent): void {
if (event.keyCode === 27) {
props.onClose();
}
}
document.addEventListener("keydown", closeHandler);
return () => {
document.removeEventListener("keydown", closeHandler);
};
}, []);
function kill(): void {
killWorkerScript(props.script, props.script.server, true);
props.onClose();
@ -113,51 +100,53 @@ function LogWindow(props: IProps): React.ReactElement {
}
return (
<Paper
style={{
display: "flex",
flexFlow: "column",
backgroundColor: "gray",
width: "50%",
position: "fixed",
left: "50%",
top: "40%",
margin: "-10% 0 0 -25%",
height: "auto",
maxHeight: "50%",
zIndex: 10,
border: "2px solid $hacker-green",
}}
ref={container}
>
<Draggable handle="#drag">
<Paper
style={{
cursor: "grab",
display: "flex",
flexFlow: "column",
backgroundColor: "gray",
width: "50%",
position: "fixed",
left: "50%",
top: "40%",
margin: "-10% 0 0 -25%",
height: "auto",
maxHeight: "50%",
zIndex: 10,
border: "2px solid $hacker-green",
}}
ref={container}
>
<Box display="flex" alignItems="center" onMouseDown={drag}>
<Typography color="primary" variant="h6" noWrap component="div">
{props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(" ")}
</Typography>
<Paper
style={{
cursor: "grab",
}}
>
<Box id="drag" display="flex" alignItems="center">
<Typography color="primary" variant="h6" noWrap component="div">
{props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(" ")}
</Typography>
<Box display="flex" marginLeft="auto">
<Button onClick={kill}>Kill Script</Button>
<Button onClick={props.onClose}>Close</Button>
<Box display="flex" marginLeft="auto">
<Button onClick={kill}>Kill Script</Button>
<Button onClick={props.onClose}>Close</Button>
</Box>
</Box>
</Box>
</Paper>
<Paper>
<Box maxHeight="25vh" overflow="scroll" sx={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}>
{props.script.logs.map(
(line: string, i: number): JSX.Element => (
<Typography key={i}>
{line}
<br />
</Typography>
),
)}
</Box>
</Paper>
</Paper>
<Paper>
<Box maxHeight="25vh" overflow="scroll" sx={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}>
{props.script.logs.map(
(line: string, i: number): JSX.Element => (
<Typography key={i}>
{line}
<br />
</Typography>
),
)}
</Box>
</Paper>
</Paper>
</Draggable>
);
}