summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components/modal/GlobalModal.js')
-rw-r--r--openecomp-ui/src/nfvo-components/modal/GlobalModal.js118
1 files changed, 45 insertions, 73 deletions
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
index 3a80e734ea..0c924304cc 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
@@ -4,9 +4,9 @@
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
- *
+ *
* http://www.apache.org/licenses/LICENSE-2.0
- *
+ *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,81 +18,55 @@ import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
-import Modal from 'nfvo-components/modal/Modal.jsx';
-import Button from 'sdc-ui/lib/react/Button.js';
+import {
+ Modal,
+ ModalHeader,
+ ModalTitle,
+ ModalBody,
+ ModalFooter
+} from 'sdc-ui/lib/react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import { modalContentComponents } from 'sdc-app/common/modal/ModalContentMapper.js';
import { actionTypes, typeEnum } from './GlobalModalConstants.js';
-const typeClass = {
- default: 'primary',
- error: 'negative',
- warning: 'warning',
- success: 'positive'
-};
-
-const type2HeaderColor = {
- default: 'primary',
- error: 'danger',
- warning: 'warning',
- success: 'success'
-};
-
-const ModalFooter = ({
- type,
+const GlobalModalFooter = ({
onConfirmed,
onDeclined,
onClose,
confirmationButtonText,
cancelButtonText
}) => {
- let myPropsForNoConfirmed = {};
+ let actionButtonClick;
if (onConfirmed) {
- myPropsForNoConfirmed.btnType = 'outline';
+ actionButtonClick = () => {
+ onConfirmed();
+ onClose();
+ };
}
return (
- <Modal.Footer>
- <div className="sdc-modal-footer">
- {onConfirmed && (
- <Button
- data-test-id="sdc-modal-confirm-button"
- color={typeClass[type]}
- btnType="primary"
- onClick={() => {
- onConfirmed();
- onClose();
- }}>
- {confirmationButtonText}
- </Button>
- )}
- <Button
- {...myPropsForNoConfirmed}
- data-test-id="sdc-modal-cancel-button"
- btnType="secondary"
- color={typeClass[type]}
- onClick={
- onDeclined
- ? () => {
- onDeclined();
- onClose();
- }
- : () => onClose()
- }>
- {cancelButtonText}
- </Button>
- </div>
- </Modal.Footer>
+ <ModalFooter
+ actionButtonText={onConfirmed ? confirmationButtonText : undefined}
+ actionButtonClick={actionButtonClick}
+ closeButtonText={cancelButtonText}
+ onClose={
+ onDeclined
+ ? () => {
+ onDeclined();
+ onClose();
+ }
+ : () => onClose()
+ }
+ withButtons
+ />
);
};
-ModalFooter.defaultProps = {
- type: 'default',
+GlobalModalFooter.defaultProps = {
confirmationButtonText: i18n('OK'),
cancelButtonText: i18n('Cancel')
};
-ModalFooter.PropTypes = {
- type: PropTypes.string,
+GlobalModalFooter.propTypes = {
confirmationButtonText: PropTypes.string,
cancelButtonText: PropTypes.string
};
@@ -121,12 +95,13 @@ export class GlobalModalView extends React.Component {
onConfirmed: PropTypes.func,
onDeclined: PropTypes.func,
confirmationButtonText: PropTypes.string,
- cancelButtonText: PropTypes.string
+ cancelButtonText: PropTypes.string,
+ bodyClassName: PropTypes.string
};
static defaultProps = {
show: false,
- type: 'default',
+ type: 'custom',
title: ''
};
@@ -137,26 +112,24 @@ export class GlobalModalView extends React.Component {
show,
modalComponentName,
modalComponentProps,
- modalClassName,
msg,
onConfirmed,
onDeclined,
confirmationButtonText,
cancelButtonText,
- onClose
+ onClose,
+ bodyClassName
} = this.props;
const ComponentToRender = modalContentComponents[modalComponentName];
return (
<Modal
show={show}
- bsSize={modalComponentProps && modalComponentProps.size}
- className={`onborading-modal ${modalClassName || ''} ${
- type2HeaderColor[type]
- }`}>
- <Modal.Header>
- <Modal.Title>{title}</Modal.Title>
- </Modal.Header>
- <Modal.Body>
+ type={type}
+ size={modalComponentProps && modalComponentProps.size}>
+ <ModalHeader type={type} onClose={onClose}>
+ <ModalTitle>{title}</ModalTitle>
+ </ModalHeader>
+ <ModalBody className={bodyClassName}>
{ComponentToRender ? (
<ComponentToRender {...modalComponentProps} />
) : msg && typeof msg === 'string' ? (
@@ -172,10 +145,9 @@ export class GlobalModalView extends React.Component {
) : (
msg
)}
- </Modal.Body>
+ </ModalBody>
{(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) && (
- <ModalFooter
- type={type}
+ <GlobalModalFooter
onConfirmed={onConfirmed}
onDeclined={onDeclined}
onClose={onClose}
@@ -196,7 +168,7 @@ export class GlobalModalView extends React.Component {
GlobalModalView.propTypes = {
show: PropTypes.bool,
- type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
+ type: PropTypes.oneOf(['custom', 'error', 'alert', 'info']),
title: PropTypes.string,
modalComponentProps: PropTypes.object,
modalComponentName: PropTypes.string,