// @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 = (
);
}
if (title) {
title = (
{icon}
{title}
);
}
return (
{title}
{props.children}
);
}
export function PanelHeader(props: { children: * }) {
return (
{props.children}
);
}
export function PanelBody(props: { children: * }) {
return (
{props.children}
);
}
export function PanelFooter(props: { children: * }) {
return (
{props.children}
);
}
export class PanelBodyHeader extends Component<
{
type: 'default' | 'error',
onClose: Function,
children: *,
},
{
isClosed: boolean,
},
> {
state: {
isClosed: boolean,
} = {
isClosed: false,
};
render() {
const { type = 'default', children } = this.props;
let close;
if (type === 'error') {
close = ;
}
const className = classNames(styles[`${type}BodyHeader`], {
[styles.isClosed]: this.state.isClosed,
});
const extraProps = omit(this.props, ['type', 'onClose']);
return (
{close}
{children}
);
}
onClose = (event: MouseEvent) => {
event.preventDefault();
this.setState({ isClosed: true });
this.props.onClose();
};
}
export function PanelIcon({ icon }: { icon: string }) {
return (
);
}