smallstonesk
4 years ago
13 changed files with 165 additions and 101 deletions
@ -1,22 +0,0 @@ |
|||
.container { |
|||
|
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.body { |
|||
|
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.full { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,44 @@ |
|||
.container { |
|||
|
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.header { |
|||
width: 100%; |
|||
height: 48px; |
|||
border-bottom: 1px solid #D9D9D9; |
|||
} |
|||
|
|||
.body { |
|||
|
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.sideBar { |
|||
width: 235px; |
|||
border-right: 1px solid #D9D9D9; |
|||
} |
|||
|
|||
.full { |
|||
|
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.toolBar { |
|||
height: 43px; |
|||
} |
|||
} |
|||
|
|||
.settingBar { |
|||
width: 350px; |
|||
height: 100%; |
|||
border-left: 1px solid #D9D9D9; |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,54 @@ |
|||
import React from 'react'; |
|||
|
|||
import styles from './index.module.less'; |
|||
|
|||
import {Graph} from '@antv/x6'; |
|||
|
|||
interface ISubComponentProps { |
|||
flowChart: Graph; |
|||
} |
|||
|
|||
interface IProps { |
|||
flowChart: Graph | undefined; |
|||
Header: React.FC<ISubComponentProps>; |
|||
SideBar: React.FC<ISubComponentProps>; |
|||
ToolBar: React.FC<ISubComponentProps>; |
|||
SettingBar: React.FC<ISubComponentProps>; |
|||
} |
|||
|
|||
const Layout: React.FC<IProps> = (props) => { |
|||
|
|||
const {flowChart, Header, SideBar, ToolBar, SettingBar} = props; |
|||
|
|||
let header, sideBar, toolBar, settingBar; |
|||
if(flowChart) { |
|||
header = <Header flowChart={flowChart}/>; |
|||
sideBar = <SideBar flowChart={flowChart}/>; |
|||
toolBar = <ToolBar flowChart={flowChart}/>; |
|||
settingBar = <SettingBar flowChart={flowChart}/>; |
|||
} |
|||
|
|||
return ( |
|||
<div className={styles.container}> |
|||
<div className={styles.header}> |
|||
{header} |
|||
</div> |
|||
<div className={styles.body}> |
|||
<div className={styles.sideBar}> |
|||
{sideBar} |
|||
</div> |
|||
<div className={styles.full}> |
|||
<div className={styles.toolBar}> |
|||
{toolBar} |
|||
</div> |
|||
{props.children} |
|||
</div> |
|||
<div className={styles.settingBar}> |
|||
{settingBar} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
export default Layout; |
Loading…
Reference in new issue