glass-app-manager/target/.yalc/@informatica/droplets-core/src/components/shell/Shell.js

Informatica's Glass Framework CLI for bootstrapping

//@flow
import * as React from "react";
import classNames from "classnames";

import Header from "./Header.js";
import Nav from "./Nav.js";
import Main from "./Main.js";
import Page from "./Page.js";

type Props = {
    children: [React.Element<typeof Header>, React.Element<typeof Nav>, React.Element<typeof Main>],
    className?: string,
};

type State = {|
    collapsed: boolean,
|};

export default class Shell extends React.Component<Props, State> {
    state = {
        collapsed: false,
    };

    toggleCollapse = (e: SyntheticEvent<HTMLButtonElement>) => {
        e.preventDefault();
        this.setState(state => ({
            collapsed: !state.collapsed,
        }));
    };

    static Header = Header;
    static Nav = Nav;
    static Main = Main;
    static Page = Page;

    render() {
        const { children, className, ...rest } = this.props;
        return (
            <div className={classNames("shell", { "shell--collapsed": this.state.collapsed }, className)} {...rest}>
                {React.Children.map(children, child => {
                    if (child.type === Header) {
                        return React.cloneElement(child, {
                            toggleCollapse: this.toggleCollapse,
                        });
                    } else if (child.type === Nav) {
                        return React.cloneElement(child, {
                            collapsed: this.state.collapsed,
                        });
                    } else {
                        return child;
                    }
                })}
            </div>
        );
    }
}