167 lines
6.2 KiB
TypeScript
167 lines
6.2 KiB
TypeScript
/**
|
|
* @author Martin Karkowski
|
|
* @email m.karkowski@zema.de
|
|
* @create date 2019-02-20 09:19:06
|
|
* @modify date 2020-07-22 22:06:39
|
|
* @desc [description]
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { Badge, Col, Container, Nav, Row } from 'react-bootstrap';
|
|
import { FaTimesCircle } from 'react-icons/fa';
|
|
import DefaultNavbar from '../defaultNavbar';
|
|
import Selection, { SelecitonProps } from './selection';
|
|
|
|
const mainStyle = {
|
|
minHeight: '90vh',
|
|
}
|
|
|
|
const sidebarStyle = {
|
|
padding: '10px',
|
|
background: "primary"
|
|
}
|
|
|
|
const contentStyle = {
|
|
padding: '10px',
|
|
}
|
|
|
|
export interface ITab {
|
|
label: string,
|
|
id: string,
|
|
delteable: boolean
|
|
}
|
|
|
|
export interface LayoutProps<T> extends SelecitonProps<T> {
|
|
onResize?: () => void;
|
|
onMount?: (_ref: React.RefObject<any>) => void;
|
|
onUnmount?: () => void;
|
|
onNewTab?: () => ITab;
|
|
onTabSelect?: (tabId: string) => void;
|
|
tabs?: {
|
|
active: string,
|
|
items: ITab[]
|
|
}
|
|
}
|
|
|
|
export interface LayoutState<T> {
|
|
update: null
|
|
}
|
|
|
|
class Layout<T> extends React.Component<LayoutProps<T>, LayoutState<T>> {
|
|
|
|
protected _ref: React.RefObject<any>;
|
|
protected _handleResize: () => void;
|
|
|
|
componentDidMount() {
|
|
const _this = this;
|
|
|
|
function handleResize() {
|
|
if (typeof _this.props.onResize === 'function') {
|
|
_this.props.onResize();
|
|
}
|
|
}
|
|
|
|
if (typeof this.props.onMount === 'function') {
|
|
this.props.onMount(this._ref);
|
|
}
|
|
|
|
this._handleResize = handleResize;
|
|
window.addEventListener('resize', this._handleResize);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
window.removeEventListener('resize', this._handleResize);
|
|
|
|
// Call the unmount
|
|
if (typeof this.props.onUnmount === 'function') {
|
|
this.props.onUnmount();
|
|
}
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this._ref = React.createRef();
|
|
}
|
|
|
|
public requestRerender() {
|
|
this.setState({
|
|
update: null
|
|
})
|
|
}
|
|
|
|
public render() {
|
|
return (<>
|
|
<DefaultNavbar></DefaultNavbar>
|
|
<Container fluid style={mainStyle}>
|
|
<Row style={mainStyle}>
|
|
<Col className="col-md-2 d-none d-md-block bg-light sidebar-sticky" style={sidebarStyle}>
|
|
<Selection selection={this.props.selection} ></Selection>
|
|
</Col>
|
|
<Col role="main" style={contentStyle}>
|
|
{this.props.tabs ?
|
|
<Nav variant="tabs" defaultActiveKey={this.props.tabs.active}>
|
|
{this.props.tabs.items.map((tab, idx) => {
|
|
if (tab.delteable) {
|
|
return (
|
|
<Nav.Item key={tab.id}>
|
|
<Nav.Link onSelect={_ => {
|
|
if (typeof this.props.onTabSelect === 'function') {
|
|
this.props.onTabSelect(tab.id);
|
|
}
|
|
}} eventKey={tab.id}>{tab.label}
|
|
<Badge variant="danger" pill onClick={
|
|
e => {
|
|
// Remove the Items.
|
|
this.props.tabs.items.splice(idx, 1);
|
|
this.requestRerender();
|
|
}
|
|
} >X</Badge>
|
|
<FaTimesCircle onClick={
|
|
e => {
|
|
// Remove the Items.
|
|
this.props.tabs.items.splice(idx, 1);
|
|
this.requestRerender();
|
|
}
|
|
} ></FaTimesCircle>
|
|
</Nav.Link>
|
|
</Nav.Item>
|
|
);
|
|
} else {
|
|
return (
|
|
<Nav.Item key={tab.id}>
|
|
<Nav.Link onSelect={_ => {
|
|
if (typeof this.props.onTabSelect === 'function') {
|
|
this.props.onTabSelect(tab.id);
|
|
}
|
|
}} eventKey={tab.id}>{tab.label}</Nav.Link>
|
|
</Nav.Item>
|
|
);
|
|
}
|
|
})}
|
|
<Nav.Item>
|
|
<Nav.Link eventKey='_NEW_ITEM' onSelect={e => {
|
|
if (typeof this.props.onNewTab === 'function') {
|
|
const tab = this.props.onNewTab();
|
|
this.props.tabs.items.push(tab);
|
|
this.props.tabs.active = tab.id;
|
|
this.requestRerender();
|
|
}
|
|
console.log(e)
|
|
}}>
|
|
+
|
|
</Nav.Link>
|
|
</Nav.Item>
|
|
</Nav>
|
|
: ''
|
|
}
|
|
|
|
{/* style={{height: '100%'}} */}
|
|
<div ref={this._ref}></div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</>);
|
|
}
|
|
}
|
|
|
|
export default Layout; |