accounts-frontend/packages/app/components/ui/Panel.tsx

126 lines
2.4 KiB
TypeScript
Raw Normal View History

2019-12-07 16:58:52 +05:30
import React from 'react';
2019-12-08 01:13:08 +05:30
import clsx from 'clsx';
import { omit } from 'app/functions';
2016-08-08 00:48:11 +05:30
import styles from './panel.scss';
import icons from './icons.scss';
2017-08-23 00:09:08 +05:30
export function Panel(props: {
2019-12-07 16:58:52 +05:30
title?: string;
icon?: string;
children: React.ReactNode;
2017-08-23 00:09:08 +05:30
}) {
2019-12-07 16:58:52 +05:30
const { title: titleText, icon: iconType } = props;
let icon: React.ReactElement | undefined;
let title: React.ReactElement | undefined;
2019-12-07 16:58:52 +05:30
if (iconType) {
icon = (
<button className={styles.headerControl}>
2019-12-07 16:58:52 +05:30
<span className={icons[iconType]} />
</button>
);
}
2019-12-07 16:58:52 +05:30
if (titleText) {
title = (
<PanelHeader>
{icon}
2019-12-07 16:58:52 +05:30
{titleText}
</PanelHeader>
);
}
return (
<div className={styles.panel}>
{title}
{props.children}
</div>
);
}
2019-12-07 16:58:52 +05:30
export function PanelHeader(props: { children: React.ReactNode }) {
return (
<div className={styles.header} {...props} data-testid="auth-header">
{props.children}
</div>
);
}
2019-12-07 16:58:52 +05:30
export function PanelBody(props: { children: React.ReactNode }) {
return (
<div className={styles.body} {...props} data-testid="auth-body">
{props.children}
</div>
);
}
2019-12-07 16:58:52 +05:30
export function PanelFooter(props: { children: React.ReactNode }) {
return (
<div className={styles.footer} {...props} data-testid="auth-controls">
{props.children}
</div>
);
}
2019-12-07 16:58:52 +05:30
export class PanelBodyHeader extends React.Component<
{
2019-12-07 16:58:52 +05:30
type?: 'default' | 'error';
onClose?: () => void;
children: React.ReactNode;
},
{
2019-12-07 16:58:52 +05:30
isClosed: boolean;
}
> {
state: {
2019-12-07 16:58:52 +05:30
isClosed: boolean;
} = {
isClosed: false,
};
render() {
const { type = 'default', children } = this.props;
let close;
if (type === 'error') {
close = <span className={styles.close} onClick={this.onClose} />;
}
2019-12-08 01:13:08 +05:30
const className = clsx(styles[`${type}BodyHeader`], {
[styles.isClosed]: this.state.isClosed,
});
const extraProps = omit(this.props, ['type', 'onClose']);
2017-08-23 00:09:08 +05:30
return (
<div className={className} {...extraProps}>
{close}
{children}
</div>
2017-08-23 00:09:08 +05:30
);
}
onClose = (event: React.MouseEvent<HTMLElement>) => {
event.preventDefault();
2019-12-07 16:58:52 +05:30
const { onClose } = this.props;
this.setState({ isClosed: true });
2019-12-07 16:58:52 +05:30
if (onClose) {
onClose();
}
};
}
export function PanelIcon({ icon }: { icon: string }) {
return (
<div className={styles.panelIcon}>
<span className={icons[icon]} />
</div>
);
2017-08-23 00:09:08 +05:30
}