accounts-frontend/src/components/ui/Panel.js

// @flow
import type { Node } from 'react';
import React, { Component } from 'react';

import classNames from 'classnames';

import { omit } from 'functions';

import styles from './panel.scss';
import icons from './icons.scss';

export function Panel(props: {
    title?: string,
    icon?: string,
    children: Node,
}) {
    let { title, icon } = props;

    if (icon) {
        icon = (
            <button className={styles.headerControl}>
                <span className={icons[icon]} />
            </button>
        );
    }

    if (title) {
        title = (
            <PanelHeader>
                {icon}
                {title}
            </PanelHeader>
        );
    }

    return (
        <div className={styles.panel}>
            {title}

            {props.children}
        </div>
    );
}

export function PanelHeader(props: {
    children: *
}) {
    return (
        <div className={styles.header} {...props}>
            {props.children}
        </div>
    );
}

export function PanelBody(props: {
    children: *
}) {
    return (
        <div className={styles.body} {...props}>
            {props.children}
        </div>
    );
}

export function PanelFooter(props: {
    children: *
}) {
    return (
        <div className={styles.footer} {...props}>
            {props.children}
        </div>
    );
}

export class PanelBodyHeader extends Component<{
    type: 'default' | 'error',
    onClose: Function,
    children: *
}, {
    isClosed: bool
}> {
    state: {
        isClosed: bool
    } = {
        isClosed: false
    };

    render() {
        const {type = 'default', children} = this.props;

        let close;
        if (type === 'error') {
            close = (
                <span className={styles.close} onClick={this.onClose} />
            );
        }

        const className = classNames(styles[`${type}BodyHeader`], {
            [styles.isClosed]: this.state.isClosed
        });

        const extraProps = omit(this.props, [
            'type',
            'onClose'
        ]);

        return (
            <div className={className} {...extraProps}>
                {close}
                {children}
            </div>
        );
    }

    onClose = (event: MouseEvent) => {
        event.preventDefault();

        this.setState({isClosed: true});

        this.props.onClose();
    };
}

export function PanelIcon({icon}: {icon: string}) {
    return (
        <div className={styles.panelIcon}>
            <span className={icons[icon]} />
        </div>
    );
}