98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
import { observer } from 'mobx-react-lite';
|
|
import { SxProps } from '@mui/material';
|
|
import Box from '@mui/material/Box';
|
|
import OutlineView from './OutlineView';
|
|
|
|
import Title from '@/components/Title';
|
|
import LoadingMask from '@/components/LoadingMask';
|
|
import { globalStorage } from '@/storage';
|
|
import BranchIcon from '@/icons/BranchIcon';
|
|
|
|
export default observer(({ style = {} }: { style?: SxProps }) => {
|
|
const {
|
|
api: { planReady },
|
|
} = globalStorage;
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
position: 'relative',
|
|
background: '#FFF',
|
|
border: '3px solid #E1E1E1',
|
|
display: 'flex',
|
|
overflow: 'hidden',
|
|
flexDirection: 'column',
|
|
...style,
|
|
}}
|
|
>
|
|
<Title title="Plan Outline" />
|
|
<Box
|
|
sx={{
|
|
position: 'relative',
|
|
height: 0,
|
|
flexGrow: 1,
|
|
overflowY: 'auto',
|
|
overflowX: 'hidden',
|
|
padding: '6px 12px',
|
|
}}
|
|
>
|
|
{planReady ? <OutlineView /> : <></>}
|
|
{globalStorage.api.planGenerating ? (
|
|
<LoadingMask
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
}}
|
|
/>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</Box>
|
|
{planReady ? (
|
|
<Box
|
|
sx={{
|
|
cursor: 'pointer',
|
|
userSelect: 'none',
|
|
position: 'absolute',
|
|
right: 0,
|
|
bottom: 0,
|
|
width: '36px',
|
|
height: '32px',
|
|
bgcolor: 'primary.main',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderRadius: '10px 0 0 0',
|
|
zIndex: 100,
|
|
'&:hover': {
|
|
filter: 'brightness(0.9)',
|
|
},
|
|
}}
|
|
onClick={() => (globalStorage.planModificationWindow = true)}
|
|
>
|
|
<BranchIcon />
|
|
<Box
|
|
component="span"
|
|
sx={{
|
|
fontSize: '12px',
|
|
position: 'absolute',
|
|
right: '4px',
|
|
bottom: '2px',
|
|
color: 'white',
|
|
fontWeight: 800,
|
|
textAlign: 'right',
|
|
}}
|
|
>
|
|
{globalStorage.planManager.leaves.length}
|
|
</Box>
|
|
</Box>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</Box>
|
|
);
|
|
});
|