You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

NotificationsContainer.js 2.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. // @flow
  2. import { FlagGroup } from '@atlaskit/flag';
  3. import React from 'react';
  4. import { connect } from '../../../base/redux';
  5. import AbstractNotificationsContainer, {
  6. _abstractMapStateToProps,
  7. type Props as AbstractProps
  8. } from '../AbstractNotificationsContainer';
  9. import Notification from './Notification';
  10. type Props = AbstractProps & {
  11. /**
  12. * Whther we are a SIP gateway or not.
  13. */
  14. _iAmSipGateway: boolean
  15. };
  16. /**
  17. * Implements a React {@link Component} which displays notifications and handles
  18. * automatic dismissmal after a notification is shown for a defined timeout
  19. * period.
  20. *
  21. * @extends {Component}
  22. */
  23. class NotificationsContainer extends AbstractNotificationsContainer<Props> {
  24. /**
  25. * Implements React's {@link Component#render()}.
  26. *
  27. * @inheritdoc
  28. * @returns {ReactElement}
  29. */
  30. render() {
  31. if (this.props._iAmSipGateway) {
  32. return null;
  33. }
  34. return (
  35. <FlagGroup
  36. id = 'notifications-container'
  37. onDismissed = { this._onDismissed }>
  38. { this._renderFlags() }
  39. </FlagGroup>
  40. );
  41. }
  42. _onDismissed: number => void;
  43. /**
  44. * Renders notifications to display as ReactElements. An empty array will
  45. * be returned if notifications are disabled.
  46. *
  47. * @private
  48. * @returns {ReactElement[]}
  49. */
  50. _renderFlags() {
  51. const { _notifications } = this.props;
  52. return _notifications.map(notification => {
  53. const { props, uid } = notification;
  54. // The id attribute is necessary as {@code FlagGroup} looks for
  55. // either id or key to set a key on notifications, but accessing
  56. // props.key will cause React to print an error.
  57. return (
  58. <Notification
  59. { ...props }
  60. id = { uid }
  61. key = { uid }
  62. onDismissed = { this._onDismissed }
  63. uid = { uid } />
  64. );
  65. });
  66. }
  67. }
  68. /**
  69. * Maps (parts of) the Redux state to the associated props for this component.
  70. *
  71. * @param {Object} state - The Redux state.
  72. * @private
  73. * @returns {Props}
  74. */
  75. function _mapStateToProps(state) {
  76. const { iAmSipGateway } = state['features/base/config'];
  77. return {
  78. ..._abstractMapStateToProps(state),
  79. _iAmSipGateway: Boolean(iAmSipGateway)
  80. };
  81. }
  82. export default connect(_mapStateToProps)(NotificationsContainer);