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