blob: 71793097fb158a613d296751e4c1775e6e0f6a78 [file] [log] [blame]
Michael Landoefa037d2017-02-19 12:57:33 +02001/**
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 */
11import React, {Component, PropTypes} from 'react';
12import {connect} from 'react-redux';
13import Button from 'react-bootstrap/lib/Button.js';
14
15import i18n from 'nfvo-utils/i18n/i18n.js';
16import Modal from 'nfvo-components/modal/Modal.jsx';
17import SubmitErrorResponse from 'nfvo-components/SubmitErrorResponse.jsx';
18import NotificationConstants from './NotificationConstants.js';
19
20let typeClass = {
21 'default': 'primary',
22 error: 'danger',
23 warning: 'warning',
24 success: 'success'
25};
26
27const mapActionsToProps = (dispatch) => {
28 return {onCloseClick: () => dispatch({type: NotificationConstants.NOTIFY_CLOSE})};
29};
30
31const 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
42export 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
100export default connect(mapStateToProps, mapActionsToProps)(NotificationModal);