38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
import { connect } from 'react-redux';
|
|
|
|
import { AppState } from 'features/reducers';
|
|
import { notificationsTypes, notificationsActions } from 'features/notifications';
|
|
import NotificationRow from './NotificationRow';
|
|
import './Notifications.scss';
|
|
|
|
interface Props {
|
|
notifications: notificationsTypes.Notification[];
|
|
closeNotification: notificationsActions.TCloseNotification;
|
|
}
|
|
|
|
export class Notifications extends React.Component<Props, {}> {
|
|
public render() {
|
|
return (
|
|
<TransitionGroup className="Notifications" aria-live="polite">
|
|
{this.props.notifications.map(n => {
|
|
return (
|
|
<CSSTransition classNames="NotificationAnimation" timeout={500} key={n.id}>
|
|
<NotificationRow notification={n} onClose={this.props.closeNotification} />
|
|
</CSSTransition>
|
|
);
|
|
})}
|
|
</TransitionGroup>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state: AppState) => ({
|
|
notifications: state.notifications
|
|
});
|
|
|
|
export default connect(mapStateToProps, {
|
|
closeNotification: notificationsActions.closeNotification
|
|
})(Notifications);
|