MyCrypto/common/containers/TabSection/NotificationRow.tsx

33 lines
906 B
TypeScript

import { Notification } from 'actions/notifications';
import classnames from 'classnames';
import React, { Component } from 'react';
import './Notifications.scss';
interface Props {
notification: Notification;
onClose(n: Notification): void;
}
export default class NotificationRow extends Component<Props, {}> {
public render() {
const { msg, level } = this.props.notification;
const notifClass = classnames({
Notification: true,
alert: true,
[`alert-${level}`]: !!level
});
return (
<div className={notifClass} role="alert" aria-live="assertive">
<span className="sr-only">{level}</span>
<div className="Notification-message">{msg}</div>
<button className="Notification-close" aria-label="dismiss" onClick={this.onClose} />
</div>
);
}
public onClose = () => {
this.props.onClose(this.props.notification);
};
}