summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/modal
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components/modal')
-rw-r--r--openecomp-ui/src/nfvo-components/modal/GlobalModal.js118
-rw-r--r--openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js18
-rw-r--r--openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js15
-rw-r--r--openecomp-ui/src/nfvo-components/modal/Modal.jsx94
4 files changed, 61 insertions, 184 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,
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
index 8bac377e08..434b41f931 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
@@ -5,13 +5,13 @@
* 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
+ * 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. See the License for the specific language governing
- * permissions and limitations under the License.
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
*/
import keyMirror from 'nfvo-utils/KeyMirror.js';
@@ -27,13 +27,15 @@ export const actionTypes = keyMirror(
);
export const typeEnum = {
- DEFAULT: 'default',
+ DEFAULT: 'custom',
ERROR: 'error',
- WARNING: 'warning',
- SUCCESS: 'success'
+ WARNING: 'alert',
+ SUCCESS: 'info'
};
export const modalSizes = {
LARGE: 'large',
- SMALL: 'small'
+ SMALL: 'small',
+ XLARGE: 'extraLarge',
+ MEDIUM: 'medium'
};
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
index b2273fa7a7..a3383aba43 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
@@ -1,17 +1,17 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2018 European Support Limited
*
* 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
+ * 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. See the License for the specific language governing
- * permissions and limitations under the License.
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
*/
import { actionTypes, typeEnum } from './GlobalModalConstants.js';
@@ -25,20 +25,17 @@ export default (state = null, action) => {
case actionTypes.GLOBAL_MODAL_ERROR:
return {
type: typeEnum.ERROR,
- modalClassName: 'notification-modal',
...action.data
};
case actionTypes.GLOBAL_MODAL_WARNING:
return {
type: typeEnum.WARNING,
- modalClassName: 'notification-modal',
...action.data
};
case actionTypes.GLOBAL_MODAL_SUCCESS:
return {
type: typeEnum.SUCCESS,
- modalClassName: 'notification-modal',
...action.data
};
diff --git a/openecomp-ui/src/nfvo-components/modal/Modal.jsx b/openecomp-ui/src/nfvo-components/modal/Modal.jsx
deleted file mode 100644
index 2f70a6ac1b..0000000000
--- a/openecomp-ui/src/nfvo-components/modal/Modal.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * Copyright © 2016-2018 European Support Limited
- *
- * 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.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import BootstrapModal from 'react-bootstrap/lib/Modal.js';
-import { isEqual } from 'lodash';
-let nextModalId = 0;
-
-export default class Modal extends React.Component {
- static Header = BootstrapModal.Header;
-
- static Title = BootstrapModal.Title;
-
- static Footer = BootstrapModal.Footer;
-
- static Body = class ModalBody extends React.Component {
- render() {
- let { children, ...props } = this.props;
- return (
- <BootstrapModal.Body {...props}>{children}</BootstrapModal.Body>
- );
- }
-
- componentDidMount() {
- let element = ReactDOM.findDOMNode(this);
- element.addEventListener('click', event => {
- if (event.target.tagName === 'A') {
- event.preventDefault();
- }
- });
- ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
- element.addEventListener(eventType, event =>
- event.stopPropagation()
- )
- );
- }
-
- componentWillUnmount() {
- let element = ReactDOM.findDOMNode(this);
-
- ['wheel', 'mousewheel', 'DOMMouseScroll', 'click'].forEach(
- eventType => element.removeEventListener(eventType)
- );
- }
-
- shouldComponentUpdate(nextProps) {
- return !isEqual(this.props, nextProps);
- }
- };
-
- componentWillMount() {
- this.modalId = `dox-ui-modal-${nextModalId++}`;
- }
-
- componentDidMount() {
- this.ensureRootClass();
- }
-
- componentDidUpdate() {
- this.ensureRootClass();
- }
-
- ensureRootClass() {
- let element = document.getElementById(this.modalId);
- while (element && !element.hasAttribute('data-reactroot')) {
- element = element.parentElement;
- }
- if (element && !element.classList.contains('dox-ui')) {
- element.classList.add('dox-ui');
- }
- }
-
- render() {
- let { children, ...props } = this.props;
- return (
- <BootstrapModal {...props} id={this.modalId}>
- {children}
- </BootstrapModal>
- );
- }
-}