58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import React, { Component } from 'react';
|
|
import classnames from 'classnames';
|
|
|
|
import { notificationsTypes } from 'features/notifications';
|
|
import TransactionSucceeded from 'components/ExtendedNotifications/TransactionSucceeded';
|
|
import './Notifications.scss';
|
|
|
|
interface Props {
|
|
notification: notificationsTypes.Notification;
|
|
onClose(n: notificationsTypes.Notification): void;
|
|
}
|
|
|
|
export default class NotificationRow extends Component<Props, {}> {
|
|
public render() {
|
|
const { msg, level, rendersComponent, componentConfig } = this.props.notification;
|
|
const notifClass = classnames({
|
|
Notification: true,
|
|
alert: true,
|
|
[`alert-${level}`]: !!level
|
|
});
|
|
|
|
let internal: any;
|
|
|
|
if (!rendersComponent) {
|
|
internal = msg;
|
|
} else if (rendersComponent && componentConfig) {
|
|
const customComponents: any = {
|
|
TransactionSucceeded
|
|
};
|
|
const { component, ...rest } = componentConfig;
|
|
|
|
if (customComponents[component]) {
|
|
const CustomComponent = customComponents[component];
|
|
|
|
internal = <CustomComponent {...rest} />;
|
|
} else {
|
|
const BasicComponent = component;
|
|
|
|
internal = <BasicComponent {...rest}>{msg}</BasicComponent>;
|
|
}
|
|
} else {
|
|
throw new Error('If a notification renders a component is must contain config');
|
|
}
|
|
|
|
return (
|
|
<div className={notifClass} role="alert" aria-live="assertive">
|
|
<span className="sr-only">{level}</span>
|
|
<div className="Notification-message">{internal}</div>
|
|
<button className="Notification-close" aria-label="dismiss" onClick={this.onClose} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
public onClose = () => {
|
|
this.props.onClose(this.props.notification);
|
|
};
|
|
}
|