scripts/extensions/sams/src/containers/PageLayout.tsx
// External Modules
import * as React from 'react';
// UI
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>
);
}
}