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