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 'sdc-ui/lib/react/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': 'default',
  29         error: 'negative',
  30         warning: 'warning',
  31         success: 'positive'
  32 };
  33
  34 const type2HeaderColor = {
  35         'default': 'primary',
  36         error: 'danger',
  37         warning: 'warning',
  38         success: 'success'
  39 };
  40
  41
  42 const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => {
  43         let myPropsForNoConfirmed = {};
  44         if (onConfirmed) {
  45                 myPropsForNoConfirmed.btnType = 'outline';
  46         }
  47         return (
  48                 <Modal.Footer>
  49                         <div className='sdc-modal-footer'>
  50                                 {onConfirmed && <Button color={typeClass[type]} onClick={() => {
  51                                         onConfirmed();
  52                                         onClose();
  53                                 }}>{confirmationButtonText}</Button>}
  54                                 <Button {...myPropsForNoConfirmed} color={typeClass[type]} onClick={onDeclined ? () => {
  55                                         onDeclined();
  56                                         onClose();} : () => onClose()}>
  57                                         {cancelButtonText}
  58                                 </Button>
  59                         </div>
  60                 </Modal.Footer>
  61         );
  62 };
  63
  64 ModalFooter.defaultProps = {
  65         type: 'default',
  66         confirmationButtonText: i18n('OK'),
  67         cancelButtonText: i18n('Cancel')
  68 };
  69
  70 export const mapStateToProps = ({modal}) => {
  71         const show = !!modal;
  72         return {
  73                 show,
  74                 ...modal
  75         };
  76 };
  77
  78 export const mapActionToProps = (dispatch) => {
  79         return {
  80                 onClose:  () => dispatch({type: actionTypes.GLOBAL_MODAL_CLOSE})
  81         };
  82 };
  83
  84
  85 export class  GlobalModalView extends React.Component {
  86
  87         static propTypes = {
  88                 show: React.PropTypes.bool,
  89                 type: React.PropTypes.oneOf(['default', 'error', 'warning', 'success']),
  90                 title: React.PropTypes.string,
  91                 modalComponentProps: React.PropTypes.object,
  92                 modalComponentName: React.PropTypes.string,
  93                 onConfirmed: React.PropTypes.func,
  94                 onDeclined: React.PropTypes.func,
  95                 confirmationButtonText: React.PropTypes.string,
  96                 cancelButtonText: React.PropTypes.string
  97         };
  98
  99         static defaultProps = {
 100                 show: false,
 101                 type: 'default',
 102                 title: ''
 103         };
 104
 105         render() {
 106                 let {title, type, show, modalComponentName, modalComponentProps,
 107                 modalClassName, msg, onConfirmed, onDeclined, confirmationButtonText, cancelButtonText, onClose} = this.props;
 108                 const  ComponentToRender = modalContentComponents[modalComponentName];
 109                 return (
 110                         <Modal show={show} bsSize={modalComponentProps && modalComponentProps.size} className={`onborading-modal ${modalClassName || ''} ${type2HeaderColor[type]}`}>
 111                                 <Modal.Header>
 112                                         <Modal.Title>{title}</Modal.Title>
 113                                 </Modal.Header>
 114                                 <Modal.Body>
 115                                         {ComponentToRender ?
 116                                                 <ComponentToRender {...modalComponentProps}/> :
 117                                                 <div> {msg && msg.split('\n').map(txt => <span> {txt} <br/> </span>)} </div>
 118                                         }
 119                                 </Modal.Body>
 120                                 {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) &&
 121                                                 <ModalFooter
 122                                                         type={type}
 123                                                         onConfirmed={onConfirmed}
 124                                                         onDeclined={onDeclined}
 125                                                         onClose={onClose}
 126                                                         confirmationButtonText={confirmationButtonText}
 127                                                         cancelButtonText={cancelButtonText}/>}
 128                         </Modal>
 129                 );
 130         }
 131
 132         componentDidUpdate() {
 133                 if (this.props.timeout) {
 134                         setTimeout(this.props.onClose, this.props.timeout);
 135                 }
 136         }
 137 };
 138
 139 export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(GlobalModalView);