You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

54 lines
1.3 KiB

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;