43 lines
1.2 KiB
TypeScript
43 lines
1.2 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';
|
|
import { AppState } from 'reducers';
|
|
|
|
interface Props {
|
|
notifications: Notification[];
|
|
closeNotification: TCloseNotification;
|
|
}
|
|
|
|
const Transition: React.SFC<{}> = ({ children }) => (
|
|
<CSSTransition
|
|
children={children}
|
|
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: AppState) => ({
|
|
notifications: state.notifications
|
|
});
|
|
|
|
export default connect(mapStateToProps, { closeNotification })(Notifications);
|