jiti-meet/react/features/notifications/components/NotificationsContainer.web.js

67 lines
1.8 KiB
JavaScript
Raw Normal View History

2018-06-14 09:14:32 +00:00
// @flow
import { FlagGroup } from '@atlaskit/flag';
2018-06-14 09:14:32 +00:00
import React from 'react';
import { connect } from 'react-redux';
2018-06-14 09:14:32 +00:00
import AbstractNotificationsContainer, {
_abstractMapStateToProps as _mapStateToProps,
type Props
} from './AbstractNotificationsContainer';
import Notification from './Notification';
/**
* Implements a React {@link Component} which displays notifications and handles
* automatic dismissmal after a notification is shown for a defined timeout
* period.
*
* @extends {Component}
*/
2018-06-14 09:14:32 +00:00
class NotificationsContainer extends AbstractNotificationsContainer<Props> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return (
<FlagGroup onDismissed = { this._onDismissed }>
{ this._renderFlags() }
</FlagGroup>
);
}
2018-06-14 09:14:32 +00:00
_onDismissed: number => void;
/**
* Renders notifications to display as ReactElements. An empty array will
* be returned if notifications are disabled.
*
* @private
* @returns {ReactElement[]}
*/
_renderFlags() {
2018-06-14 09:14:32 +00:00
const { _notifications } = this.props;
return _notifications.map(notification => {
const { props, uid } = notification;
// The id attribute is necessary as {@code FlagGroup} looks for
// either id or key to set a key on notifications, but accessing
// props.key will cause React to print an error.
return (
<Notification
{ ...props }
id = { uid }
key = { uid }
uid = { uid } />
);
});
}
}
export default connect(_mapStateToProps)(NotificationsContainer);