58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
import React from "react";
|
|
import SplitPane from "react-split-pane";
|
|
|
|
import theme from "./theme";
|
|
|
|
import GraphCommitDisplay from "./GraphCommitDisplay";
|
|
import GraphInfoTabs from "./GraphInfoTabs";
|
|
import DrawGraph from "./DrawGraph";
|
|
|
|
const resizerStyle = {
|
|
background: theme.palette.text.secondary,
|
|
width: "1px",
|
|
cursor: "col-resize",
|
|
margin: "1px",
|
|
padding: "1px",
|
|
height: "100%",
|
|
};
|
|
|
|
const topPaneStyle = {
|
|
height: "100vh",
|
|
overflow: "visible",
|
|
};
|
|
|
|
export default function App() {
|
|
const [infosize, setInfosize] = React.useState(450);
|
|
const [drawsize, setDrawsize] = React.useState(
|
|
window.screen.width - infosize
|
|
);
|
|
|
|
React.useEffect(() => {
|
|
setInfosize(window.screen.width - drawsize);
|
|
}, [drawsize]);
|
|
|
|
return (
|
|
<SplitPane
|
|
pane1Style={{ height: "12%" }}
|
|
pane2Style={{ height: "88%" }}
|
|
split="horizontal"
|
|
style={topPaneStyle}
|
|
>
|
|
<GraphCommitDisplay />
|
|
<SplitPane
|
|
split="vertical"
|
|
minSize={100}
|
|
style={{ position: "relative" }}
|
|
defaultSize={infosize}
|
|
pane1Style={{ height: "100%" }}
|
|
pane2Style={{ height: "100%", width: "100%" }}
|
|
resizerStyle={resizerStyle}
|
|
onChange={(size) => setDrawsize(window.screen.width - size)}
|
|
>
|
|
<GraphInfoTabs width={infosize} />
|
|
<DrawGraph size={drawsize} />
|
|
</SplitPane>
|
|
</SplitPane>
|
|
);
|
|
}
|