64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { closeNotification } from 'actions/notifications';
|
|
import type { Notification } from 'actions/notifications';
|
|
|
|
function NotificationRow(props: {
|
|
notification: Notification,
|
|
onClose: (n: Notification) => void
|
|
}) {
|
|
const { msg, level } = props.notification;
|
|
let klass = '';
|
|
|
|
switch (level) {
|
|
case 'danger':
|
|
klass = 'alert-danger';
|
|
break;
|
|
case 'success':
|
|
klass = 'alert-success';
|
|
break;
|
|
case 'warning':
|
|
klass = 'alert-warning';
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<div className={`alert popup ${klass} animated-show-hide`} role="alert" aria-live="assertive">
|
|
<span className="sr-only">{level}</span>
|
|
<div className="container" dangerouslySetInnerHTML={{ __html: msg }} />
|
|
<i
|
|
tabIndex="0"
|
|
aria-label="dismiss"
|
|
className="icon-close"
|
|
onClick={() => props.onClose(props.notification)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export class Notifications extends React.Component {
|
|
props: {
|
|
notifications: Notification[],
|
|
closeNotification: (n: Notification) => void
|
|
};
|
|
render() {
|
|
if (!this.props.notifications.length) {
|
|
return null;
|
|
}
|
|
return (
|
|
<div className="alerts-container">
|
|
{this.props.notifications.map((n, i) =>
|
|
<NotificationRow key={`${n.level}-${i}`} notification={n} onClose={this.props.closeNotification} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = state => ({
|
|
notifications: state.notifications
|
|
});
|
|
|
|
export default connect(mapStateToProps, { closeNotification })(Notifications);
|