2ca24adcb47f24a71d4c5f4fb06bdb3f4dd4ca5b
[aai/sparky-fe.git] / src / generic-components / notifications / NotificationModal.jsx
1 /*
2  * ============LICENSE_START=======================================================
3  * org.onap.aai
4  * ================================================================================
5  * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
6  * Copyright © 2017 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  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
22  */
23 /**
24         * NotificationModal options:
25         *
26         * show: whether to show notification or not,
27         * type: the type of the notification. valid values are: 'default', 'error',
28         * 'warning', 'success' msg: the notification content. could be a string or
29         * node (React component) title: the notification title timeout: timeout for
30         * the notification to fade out. if timeout == 0 then the notification is
31         * rendered until the user closes it
32         *
33         */
34 import React, {Component, PropTypes} from 'react';
35 import {connect} from 'react-redux';
36 import Button from 'react-bootstrap/lib/Button.js';
37
38 import i18n from 'utils/i18n/i18n.js';
39 import Modal from 'generic-components/modal/Modal.jsx';
40 import NotificationConstants from './NotificationConstants.js';
41
42 let typeClass = {
43                 'default': 'primary',
44                 error: 'danger',
45                 warning: 'warning',
46                 success: 'success'
47 };
48
49 const mapActionsToProps = (dispatch) => {
50                 return {
51                                 onCloseClick: () => dispatch({type: NotificationConstants.NOTIFY_CLOSE})
52                 };
53 };
54
55 const mapStateToProps = ({notification}) => {
56                 
57                 let show = notification !== null && notification.title !== 'Conflict';
58                 let mapResult = {show};
59                 if (show) {
60                                 mapResult = {show, ...notification};
61                 }
62                 
63                 return mapResult;
64 };
65
66 class NotificationModal extends Component {
67                 
68                 static propTypes = {
69                                 show: PropTypes.bool,
70                                 type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
71                                 msg: PropTypes.node,
72                                 title: PropTypes.string,
73                                 timeout: PropTypes.number
74                 };
75                 
76                 static defaultProps = {
77                                 show: false,
78                                 type: 'default',
79                                 title: '',
80                                 msg: '',
81                                 timeout: 0
82                 };
83                 
84                 state = {type: undefined};
85                 
86                 componentWillReceiveProps(nextProps) {
87                                 if (this.props.show !== nextProps.show && nextProps.show === false) {
88                                                 this.setState({type: this.props.type});
89                                 }
90                                 else {
91                                                 this.setState({type: undefined});
92                                 }
93                 }
94                 
95                 componentDidUpdate() {
96                                 if (this.props.timeout) {
97                                                 setTimeout(this.props.onCloseClick, this.props.timeout);
98                                 }
99                 }
100                 
101                 render() {
102                                 let {title, type, msg, show} = this.props;
103                                 if (!show) {
104                                                 type = this.state.type;
105                                 }
106                                 return (
107                                                 <Modal show={this.props.show}
108                                                        className={`notification-modal ${typeClass[type]}`}>
109                                                                 <Modal.Header>
110                                                                                 <Modal.Title>{title}</Modal.Title>
111                                                                 </Modal.Header>
112                                                                 <Modal.Body>{msg}</Modal.Body>
113                                                                 <Modal.Footer>
114                                                                                 <Button bsStyle={typeClass[type]}
115                                                                                         onClick={this.props.onCloseClick}>{i18n('OK')}</Button>
116                                                                 </Modal.Footer>
117                                                 </Modal>
118                                 );
119                 }
120 }
121
122 export default connect(mapStateToProps, mapActionsToProps)(NotificationModal);