src/generic-components/notifications/NotificationModal.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017-2018 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  */
  21 /**
  22  * NotificationModal options:
  23  *
  24  * show: whether to show notification or not,
  25  * type: the type of the notification. valid values are: 'default', 'error',
  26  * 'warning', 'success' msg: the notification content. could be a string or
  27  * node (React component) title: the notification title timeout: timeout for
  28  * the notification to fade out. if timeout == 0 then the notification is
  29  * rendered until the user closes it
  30  *
  31  */
  32 import React, {Component} from 'react';
  33 import { PropTypes } from 'prop-types';
  34 import {connect} from 'react-redux';
  35 import Button from 'react-bootstrap/lib/Button.js';
  36
  37 import i18n from 'utils/i18n/i18n.js';
  38 import Modal from 'generic-components/modal/Modal.jsx';
  39 import NotificationConstants from './NotificationConstants.js';
  40
  41 let typeClass = {
  42   'default': 'primary',
  43   error: 'danger',
  44   warning: 'warning',
  45   success: 'success'
  46 };
  47
  48 const mapActionsToProps = (dispatch) => {
  49   return {
  50     onCloseClick: () => dispatch({type: NotificationConstants.NOTIFY_CLOSE})
  51   };
  52 };
  53
  54 const mapStateToProps = ({notification}) => {
  55
  56   let show = notification !== null && notification.title !== 'Conflict';
  57   let mapResult = {show};
  58   if (show) {
  59     mapResult = {show, ...notification};
  60   }
  61
  62   return mapResult;
  63 };
  64
  65 class NotificationModal extends Component {
  66
  67   static propTypes = {
  68     show: PropTypes.bool,
  69     type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
  70     msg: PropTypes.node,
  71     title: PropTypes.string,
  72     timeout: PropTypes.number
  73   };
  74
  75   static defaultProps = {
  76     show: false,
  77     type: 'default',
  78     title: '',
  79     msg: '',
  80     timeout: 0
  81   };
  82
  83   state = {type: undefined};
  84
  85   componentWillReceiveProps(nextProps) {
  86     if (this.props.show !== nextProps.show && nextProps.show === false) {
  87       this.setState({type: this.props.type});
  88     }
  89     else {
  90       this.setState({type: undefined});
  91     }
  92   }
  93
  94   componentDidUpdate() {
  95     if (this.props.timeout) {
  96       setTimeout(this.props.onCloseClick, this.props.timeout);
  97     }
  98   }
  99
 100   render() {
 101     let {title, type, msg, show} = this.props;
 102     if (!show) {
 103       type = this.state.type;
 104     }
 105     return (
 106       <Modal show={this.props.show}
 107              className={`notification-modal ${typeClass[type]}`}>
 108         <Modal.Header>
 109           <Modal.Title>{title}</Modal.Title>
 110         </Modal.Header>
 111         <Modal.Body>{msg}</Modal.Body>
 112         <Modal.Footer>
 113           <Button bsStyle={typeClass[type]}
 114                   onClick={this.props.onCloseClick}>{i18n('OK')}</Button>
 115         </Modal.Footer>
 116       </Modal>
 117     );
 118   }
 119 }
 120
 121 export default connect(mapStateToProps, mapActionsToProps)(NotificationModal);