import React from 'react'; import clsx from 'clsx'; import { omit } from 'app/functions'; import styles from './panel.scss'; import icons from './icons.scss'; export function Panel(props: { title?: string; icon?: string; children: React.ReactNode; }) { const { title: titleText, icon: iconType } = props; let icon: React.ReactElement | undefined; let title: React.ReactElement | undefined; if (iconType) { icon = ( ); } if (titleText) { title = ( {icon} {titleText} ); } return (
{title} {props.children}
); } export function PanelHeader(props: { children: React.ReactNode }) { return (
{props.children}
); } export function PanelBody(props: { children: React.ReactNode }) { return (
{props.children}
); } export function PanelFooter(props: { children: React.ReactNode }) { return (
{props.children}
); } export class PanelBodyHeader extends React.Component< { type?: 'default' | 'error'; onClose?: () => void; children: React.ReactNode; }, { isClosed: boolean; } > { state: { isClosed: boolean; } = { isClosed: false, }; render() { const { type = 'default', children } = this.props; let close; if (type === 'error') { close = ; } const className = clsx(styles[`${type}BodyHeader`], { [styles.isClosed]: this.state.isClosed, }); const extraProps = omit(this.props, ['type', 'onClose']); return (
{close} {children}
); } onClose = (event: React.MouseEvent) => { event.preventDefault(); const { onClose } = this.props; this.setState({ isClosed: true }); if (onClose) { onClose(); } }; } export function PanelIcon({ icon }: { icon: string }) { return (
); }