src/generic-components/notifications/NotificationModal.jsx

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