openecomp-ui/src/nfvo-components/notifications/NotificationModal.jsx

   1 /**
   2  * NotificationModal options:
   3  *
   4  * show: whether to show notification or not,
   5  * type: the type of the notification. valid values are: 'default', 'error', 'warning', 'success'
   6  * msg: the notification content. could be a string or node (React component)
   7  * title: the notification title
   8  * timeout: timeout for the notification to fade out. if timeout == 0 then the notification is rendered until the user closes it
   9  *
  10  */
  11 import React, {Component, PropTypes} from 'react';
  12 import {connect} from 'react-redux';
  13 import Button from 'react-bootstrap/lib/Button.js';
  14
  15 import i18n from 'nfvo-utils/i18n/i18n.js';
  16 import Modal from 'nfvo-components/modal/Modal.jsx';
  17 import SubmitErrorResponse from 'nfvo-components/SubmitErrorResponse.jsx';
  18 import NotificationConstants from './NotificationConstants.js';
  19
  20 let typeClass = {
  21         'default': 'primary',
  22         error: 'danger',
  23         warning: 'warning',
  24         success: 'success'
  25 };
  26
  27 const mapActionsToProps = (dispatch) => {
  28         return {onCloseClick: () => dispatch({type: NotificationConstants.NOTIFY_CLOSE})};
  29 };
  30
  31 const mapStateToProps = ({notification}) => {
  32
  33         let show = notification !== null && notification.title !== 'Conflict';
  34         let mapResult = {show};
  35         if (show) {
  36                 mapResult = {show, ...notification};
  37         }
  38
  39         return mapResult;
  40 };
  41
  42 export class NotificationModal extends Component {
  43
  44         static propTypes = {
  45                 show: PropTypes.bool,
  46                 type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
  47                 title: PropTypes.string,
  48                 msg: PropTypes.node,
  49                 validationResponse: PropTypes.object,
  50                 timeout: PropTypes.number
  51         };
  52
  53         static defaultProps = {
  54                 show: false,
  55                 type: 'default',
  56                 title: '',
  57                 msg: '',
  58                 timeout: 0
  59         };
  60
  61         state = {type: undefined};
  62
  63         componentWillReceiveProps(nextProps) {
  64                 if (this.props.show !== nextProps.show && nextProps.show === false) {
  65                         this.setState({type: this.props.type});
  66                 }
  67                 else {
  68                         this.setState({type: undefined});
  69                 }
  70         }
  71
  72         componentDidUpdate() {
  73                 if (this.props.timeout) {
  74                         setTimeout(this.props.onCloseClick, this.props.timeout);
  75                 }
  76         }
  77
  78         render() {
  79                 let {title, type, msg, show, validationResponse, onCloseClick} = this.props;
  80                 if (!show) {
  81                         type = this.state.type;
  82                 }
  83                 if (validationResponse) {
  84                         msg = (<SubmitErrorResponse validationResponse={validationResponse}/>);
  85                 }
  86                 return (
  87                         <Modal show={show} className={`notification-modal ${typeClass[type]}`}>
  88                                 <Modal.Header>
  89                                         <Modal.Title>{title}</Modal.Title>
  90                                 </Modal.Header>
  91                                 <Modal.Body>{msg}</Modal.Body>
  92                                 <Modal.Footer>
  93                                         <Button bsStyle={typeClass[type]} onClick={onCloseClick}>{i18n('OK')}</Button>
  94                                 </Modal.Footer>
  95                         </Modal>
  96                 );
  97         }
  98 }
  99
 100 export default connect(mapStateToProps, mapActionsToProps)(NotificationModal);