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

   1 /*
   2  * Copyright © 2016-2017 European Support Limited
   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 or implied.
  13  * See the License for the specific language governing permissions and
  14  * 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 {
  22     Modal,
  23     ModalHeader,
  24     ModalTitle,
  25     ModalBody,
  26     ModalFooter
  27 } from 'sdc-ui/lib/react';
  28 import i18n from 'nfvo-utils/i18n/i18n.js';
  29 import { modalContentComponents } from 'sdc-app/common/modal/ModalContentMapper.js';
  30 import { actionTypes, typeEnum } from './GlobalModalConstants.js';
  31
  32 const GlobalModalFooter = ({
  33     onConfirmed,
  34     onDeclined,
  35     onClose,
  36     confirmationButtonText,
  37     cancelButtonText
  38 }) => {
  39     let actionButtonClick;
  40     if (onConfirmed) {
  41         actionButtonClick = () => {
  42             onConfirmed();
  43             onClose();
  44         };
  45     }
  46     return (
  47         <ModalFooter
  48             actionButtonText={onConfirmed ? confirmationButtonText : undefined}
  49             actionButtonClick={actionButtonClick}
  50             closeButtonText={cancelButtonText}
  51             onClose={
  52                 onDeclined
  53                     ? () => {
  54                           onDeclined();
  55                           onClose();
  56                       }
  57                     : () => onClose()
  58             }
  59             withButtons
  60         />
  61     );
  62 };
  63
  64 GlobalModalFooter.defaultProps = {
  65     confirmationButtonText: i18n('OK'),
  66     cancelButtonText: i18n('Cancel')
  67 };
  68
  69 GlobalModalFooter.propTypes = {
  70     confirmationButtonText: PropTypes.string,
  71     cancelButtonText: PropTypes.string
  72 };
  73
  74 export const mapStateToProps = ({ modal }) => {
  75     const show = !!modal;
  76     return {
  77         show,
  78         ...modal
  79     };
  80 };
  81
  82 export const mapActionToProps = dispatch => {
  83     return {
  84         onClose: () => dispatch({ type: actionTypes.GLOBAL_MODAL_CLOSE })
  85     };
  86 };
  87
  88 export class GlobalModalView extends React.Component {
  89     static propTypes = {
  90         show: PropTypes.bool,
  91         type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
  92         title: PropTypes.string,
  93         modalComponentProps: PropTypes.object,
  94         modalComponentName: PropTypes.string,
  95         onConfirmed: PropTypes.func,
  96         onDeclined: PropTypes.func,
  97         confirmationButtonText: PropTypes.string,
  98         cancelButtonText: PropTypes.string,
  99         bodyClassName: PropTypes.string
 100     };
 101
 102     static defaultProps = {
 103         show: false,
 104         type: 'custom',
 105         title: ''
 106     };
 107
 108     render() {
 109         let {
 110             title,
 111             type,
 112             show,
 113             modalComponentName,
 114             modalComponentProps,
 115             msg,
 116             onConfirmed,
 117             onDeclined,
 118             confirmationButtonText,
 119             cancelButtonText,
 120             onClose,
 121             bodyClassName
 122         } = this.props;
 123         const ComponentToRender = modalContentComponents[modalComponentName];
 124         return (
 125             <Modal
 126                 show={show}
 127                 type={type}
 128                 size={modalComponentProps && modalComponentProps.size}>
 129                 <ModalHeader type={type} onClose={onClose}>
 130                     <ModalTitle>{title}</ModalTitle>
 131                 </ModalHeader>
 132                 <ModalBody className={bodyClassName}>
 133                     {ComponentToRender ? (
 134                         <ComponentToRender {...modalComponentProps} />
 135                     ) : msg && typeof msg === 'string' ? (
 136                         <div>
 137                             {' '}
 138                             {msg.split('\n').map((txt, i) => (
 139                                 <span key={i}>
 140                                     {' '}
 141                                     {txt} <br />{' '}
 142                                 </span>
 143                             ))}{' '}
 144                         </div>
 145                     ) : (
 146                         msg
 147                     )}
 148                 </ModalBody>
 149                 {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) && (
 150                     <GlobalModalFooter
 151                         onConfirmed={onConfirmed}
 152                         onDeclined={onDeclined}
 153                         onClose={onClose}
 154                         confirmationButtonText={confirmationButtonText}
 155                         cancelButtonText={cancelButtonText}
 156                     />
 157                 )}
 158             </Modal>
 159         );
 160     }
 161
 162     componentDidUpdate() {
 163         if (this.props.timeout) {
 164             setTimeout(this.props.onClose, this.props.timeout);
 165         }
 166     }
 167 }
 168
 169 GlobalModalView.propTypes = {
 170     show: PropTypes.bool,
 171     type: PropTypes.oneOf(['custom', 'error', 'alert', 'info']),
 172     title: PropTypes.string,
 173     modalComponentProps: PropTypes.object,
 174     modalComponentName: PropTypes.string,
 175     onConfirmed: PropTypes.func,
 176     onDeclined: PropTypes.func,
 177     confirmationButtonText: PropTypes.string,
 178     cancelButtonText: PropTypes.string
 179 };
 180
 181 export default connect(mapStateToProps, mapActionToProps, null, {
 182     withRef: true
 183 })(GlobalModalView);