MyCrypto/common/containers/TabSection/Notifications.tsx

42 lines
1.1 KiB
TypeScript

import { closeNotification, Notification, TCloseNotification } from 'actions/notifications';
import React from 'react';
import { connect } from 'react-redux';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import NotificationRow from './NotificationRow';
import './Notifications.scss';
interface Props {
notifications: Notification[];
closeNotification: TCloseNotification;
}
const Transition = props => (
<CSSTransition
{...props}
classNames="NotificationAnimation"
timeout={{ enter: 500, exit: 500 }}
/>
);
export class Notifications extends React.Component<Props, {}> {
public render() {
return (
<TransitionGroup className="Notifications">
{this.props.notifications.map(n => {
return (
<Transition key={n.id}>
<NotificationRow notification={n} onClose={this.props.closeNotification} />
</Transition>
);
})}
</TransitionGroup>
);
}
}
const mapStateToProps = state => ({
notifications: state.notifications
});
export default connect(mapStateToProps, { closeNotification })(Notifications);