import * as React from 'react' ; import { HeaderPanel , LayoutContainer , LeftPanel , MainPanel , Panel , RightPanel , } from '../ui' ; import { IMainPanelProps } from '../ui/MainPanel' ; interface IProps { header ? : React . ReactNode ; main ? : React . ReactNode ; mainClassName ? : string ; mainProps ? : Omit < IMainPanelProps , 'children' > ; rightPanel ? : React . ReactNode ; rightPanelOpen ? : boolean ; leftPanel ? : React . ReactNode ; leftPanelOpen ? : boolean ; } export class PageLayout extends React . PureComponent < IProps > { render ( ) { return ( < LayoutContainer > { this . props . header && ( < HeaderPanel > { this . props . header } < /HeaderPanel>)} { this . props . leftPanel && ( < LeftPanel open = { this . props . leftPanelOpen } > < Panel side = "left" background = "grey" > { this . props . leftPanel } < /Panel> < /LeftPanel>)} { this . props . main && ( < MainPanel className = { this . props . mainClassName } { ... this . props . mainProps } > { this . props . main } < /MainPanel>)} { this . props . rightPanel && ( < RightPanel open = { this . props . rightPanelOpen } > < Panel side = "right" > { this . props . rightPanel } < /Panel> < /RightPanel>)} < /LayoutContainer>); } }