openecomp-ui/src/nfvo-components/modal/GlobalModal.js

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16
  17 import React from 'react';
  18 import {connect} from 'react-redux';
  19
  20 import Modal from 'nfvo-components/modal/Modal.jsx';
  21 import Button from 'react-bootstrap/lib/Button.js';
  22 import i18n from 'nfvo-utils/i18n/i18n.js';
  23 import {modalContentComponents} from 'sdc-app/common/modal/ModalContentMapper.js';
  24 import {actionTypes, typeEnum} from './GlobalModalConstants.js';
  25
  26
  27 const typeClass = {
  28         'default': 'primary',
  29         error: 'danger',
  30         warning: 'warning',
  31         success: 'success'
  32 };
  33
  34
  35 const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) =>
  36                 <Modal.Footer>
  37                         <Button bsStyle={typeClass[type]} onClick={onDeclined ? () => {
  38                                 onDeclined();
  39                                 onClose();} : () => onClose()}>
  40                                 {cancelButtonText}
  41                                 </Button>
  42                         {onConfirmed && <Button bsStyle={typeClass[type]} onClick={() => {
  43                                 onConfirmed();
  44                                 onClose();
  45                         }}>{confirmationButtonText}</Button>}
  46                 </Modal.Footer>;
  47
  48 ModalFooter.defaultProps = {
  49         type: 'default',
  50         confirmationButtonText: i18n('OK'),
  51         cancelButtonText: i18n('Cancel')
  52 };
  53
  54 export const mapStateToProps = ({modal}) => {
  55         const show = !!modal;
  56         return {
  57                 show,
  58                 ...modal
  59         };
  60 };
  61
  62 export const mapActionToProps = (dispatch) => {
  63         return {
  64                 onClose:  () => dispatch({type: actionTypes.GLOBAL_MODAL_CLOSE})
  65         };
  66 };
  67
  68
  69 export class  GlobalModalView extends React.Component {
  70
  71         static propTypes = {
  72                 show: React.PropTypes.bool,
  73                 type: React.PropTypes.oneOf(['default', 'error', 'warning', 'success']),
  74                 title: React.PropTypes.string,
  75                 modalComponentProps: React.PropTypes.object,
  76                 modalComponentName: React.PropTypes.string,
  77                 onConfirmed: React.PropTypes.func,
  78                 onDeclined: React.PropTypes.func,
  79                 confirmationButtonText: React.PropTypes.string,
  80                 cancelButtonText: React.PropTypes.string
  81         };
  82
  83         static defaultProps = {
  84                 show: false,
  85                 type: 'default',
  86                 title: ''
  87         };
  88
  89         render() {
  90                 let {title, type, show, modalComponentName, modalComponentProps,
  91                 modalClassName, msg, onConfirmed, onDeclined, confirmationButtonText, cancelButtonText, onClose} = this.props;
  92                 const  ComponentToRender = modalContentComponents[modalComponentName];
  93                 return (
  94                         <Modal show={show} bsSize={modalComponentProps && modalComponentProps.size} className={`onborading-modal ${modalClassName || ''} ${typeClass[type]}`}>
  95                                 <Modal.Header>
  96                                         <Modal.Title>{title}</Modal.Title>
  97                                 </Modal.Header>
  98                                 <Modal.Body>
  99                                         {ComponentToRender ? <ComponentToRender {...modalComponentProps}/> :  msg}
 100                                 </Modal.Body>
 101                                 {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) &&
 102                                                 <ModalFooter
 103                                                         type={type}
 104                                                         onConfirmed={onConfirmed}
 105                                                         onDeclined={onDeclined}
 106                                                         onClose={onClose}
 107                                                         confirmationButtonText={confirmationButtonText}
 108                                                         cancelButtonText={cancelButtonText}/>}
 109                         </Modal>
 110                 );
 111         }
 112
 113         componentDidUpdate() {
 114                 if (this.props.timeout) {
 115                         setTimeout(this.props.onClose, this.props.timeout);
 116                 }
 117         }
 118 };
 119
 120 export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(GlobalModalView);