nope/resources/ui/layout/layout.tsx

/**
 * @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 { 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?: () => Promise<ITab | false>;
    onTabSelect?: (tabId: string) => void;
    tabs?: {
        allowNewTabs?: boolean;
        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} allowUserSelect={this.props.allowUserSelect} onItemSelected={this.props.onItemSelected}></Selection>
                    </Col>
                    <Col role="main" style={contentStyle}>
                        {this.props.tabs ?
                            <Nav variant="tabs" activeKey={this.props.tabs.active}>
                                {this.props.tabs.items.map((tab, idx) => {
                                    if (tab.delteable && this.props.tabs.allowNewTabs) {
                                        return (
                                            <Nav.Item key={tab.id}>
                                                <Nav.Link onSelect={_ => {
                                                    if (typeof this.props.onTabSelect === 'function') {
                                                        this.props.onTabSelect(tab.id);
                                                    }
                                                    // Assign the Tab ID
                                                    this.props.tabs.active = tab.id;
                                                    this.requestRerender();
                                                }} eventKey={tab.id}>{tab.label}
                                                    <FaTimesCircle onClick={
                                                        e => {
                                                            // Remove the Items.
                                                            this.props.tabs.items.splice(idx, 1);

                                                            if (tab.id == this.props.tabs.active) {
                                                                // Assign the ID of the Element.
                                                                const _idx = this.props.tabs.items.length > idx ? idx : this.props.tabs.items.length - 1;

                                                                // Assign the First ID.
                                                                this.props.tabs.active = this.props.tabs.items.length > _idx ? this.props.tabs.items[_idx].id : null;
                                                            }

                                                            // Redraw the Element.
                                                            this.requestRerender();

                                                            e.preventDefault();
                                                            e.stopPropagation();
                                                        }
                                                    } ></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);
                                                    }

                                                    // Assign the Tab ID
                                                    this.props.tabs.active = tab.id;
                                                    this.requestRerender();

                                                }} eventKey={tab.id}>{tab.label}</Nav.Link>
                                            </Nav.Item>
                                        );
                                    }
                                })}

                                {this.props.tabs.allowNewTabs ?
                                    <Nav.Item>
                                        <Nav.Link eventKey='_NEW_ITEM' onSelect={async () => {
                                            if (typeof this.props.onNewTab === 'function') {
                                                const tab = await this.props.onNewTab();

                                                if (tab && typeof tab === 'object') {
                                                    this.props.tabs.items.push(tab);
                                                    this.props.tabs.active = tab.id;
                                                    this.requestRerender();
                                                }
                                            }
                                        }}>
                                            +
                                </Nav.Link>
                                    </Nav.Item> : ''
                                }

                            </Nav>
                            : ''
                        }

                        {/* style={{height: '100%'}} */}
                        <div ref={this._ref}></div>
                    </Col>
                </Row>
            </Container>
        </>);
    }
}

export default Layout;