aboutsummaryrefslogtreecommitdiffstats
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.js280
-rw-r--r--openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js26
-rw-r--r--openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js58
-rw-r--r--openecomp-ui/src/nfvo-components/modal/Modal.jsx102
4 files changed, 256 insertions, 210 deletions
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
index 75b7983ac3..3f19bd76a3 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
@@ -16,145 +16,195 @@
import React from 'react';
import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import Modal from 'nfvo-components/modal/Modal.jsx';
import Button from 'sdc-ui/lib/react/Button.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {modalContentComponents} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes, typeEnum} from './GlobalModalConstants.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'
+ default: 'primary',
+ error: 'negative',
+ warning: 'warning',
+ success: 'positive'
};
const type2HeaderColor = {
- 'default': 'primary',
- error: 'danger',
- warning: 'warning',
- success: 'success'
+ default: 'primary',
+ error: 'danger',
+ warning: 'warning',
+ success: 'success'
};
-
-const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => {
- let myPropsForNoConfirmed = {};
- if (onConfirmed) {
- myPropsForNoConfirmed.btnType = 'outline';
- }
- return (
- <Modal.Footer>
- <div className='sdc-modal-footer'>
- {onConfirmed && <Button data-test-id='sdc-modal-confirm-button' color={typeClass[type]} onClick={() => {
- onConfirmed();
- onClose();
- }}>{confirmationButtonText}</Button>}
- <Button {...myPropsForNoConfirmed} data-test-id='sdc-modal-cancel-button' btnType='outline' color={typeClass[type]} onClick={onDeclined ? () => {
- onDeclined();
- onClose();} : () => onClose()}>
- {cancelButtonText}
- </Button>
- </div>
- </Modal.Footer>
- );
+const ModalFooter = ({
+ type,
+ onConfirmed,
+ onDeclined,
+ onClose,
+ confirmationButtonText,
+ cancelButtonText
+}) => {
+ let myPropsForNoConfirmed = {};
+ if (onConfirmed) {
+ myPropsForNoConfirmed.btnType = 'outline';
+ }
+ return (
+ <Modal.Footer>
+ <div className="sdc-modal-footer">
+ {onConfirmed && (
+ <Button
+ data-test-id="sdc-modal-confirm-button"
+ color={typeClass[type]}
+ onClick={() => {
+ onConfirmed();
+ onClose();
+ }}>
+ {confirmationButtonText}
+ </Button>
+ )}
+ <Button
+ {...myPropsForNoConfirmed}
+ data-test-id="sdc-modal-cancel-button"
+ btnType="outline"
+ color={typeClass[type]}
+ onClick={
+ onDeclined
+ ? () => {
+ onDeclined();
+ onClose();
+ }
+ : () => onClose()
+ }>
+ {cancelButtonText}
+ </Button>
+ </div>
+ </Modal.Footer>
+ );
};
ModalFooter.defaultProps = {
- type: 'default',
- confirmationButtonText: i18n('OK'),
- cancelButtonText: i18n('Cancel')
+ type: 'default',
+ confirmationButtonText: i18n('OK'),
+ cancelButtonText: i18n('Cancel')
};
ModalFooter.PropTypes = {
- type: PropTypes.string,
- confirmationButtonText: PropTypes.string,
- cancelButtonText: PropTypes.string
+ type: PropTypes.string,
+ confirmationButtonText: PropTypes.string,
+ cancelButtonText: PropTypes.string
};
-export const mapStateToProps = ({modal}) => {
- const show = !!modal;
- return {
- show,
- ...modal
- };
+export const mapStateToProps = ({ modal }) => {
+ const show = !!modal;
+ return {
+ show,
+ ...modal
+ };
};
-export const mapActionToProps = (dispatch) => {
- return {
- onClose: () => dispatch({type: actionTypes.GLOBAL_MODAL_CLOSE})
- };
+export const mapActionToProps = dispatch => {
+ return {
+ onClose: () => dispatch({ type: actionTypes.GLOBAL_MODAL_CLOSE })
+ };
};
-
-export class GlobalModalView extends React.Component {
-
- static propTypes = {
- show: PropTypes.bool,
- type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
- title: PropTypes.string,
- modalComponentProps: PropTypes.object,
- modalComponentName: PropTypes.string,
- onConfirmed: PropTypes.func,
- onDeclined: PropTypes.func,
- confirmationButtonText: PropTypes.string,
- cancelButtonText: PropTypes.string
- };
-
- static defaultProps = {
- show: false,
- type: 'default',
- title: ''
- };
-
- render() {
- let {title, type, show, modalComponentName, modalComponentProps,
- modalClassName, msg, onConfirmed, onDeclined, confirmationButtonText, cancelButtonText, onClose} = 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>
- {ComponentToRender ?
- <ComponentToRender {...modalComponentProps}/> :
- msg && typeof msg === 'string' ?
- <div> {msg.split('\n').map((txt, i) => <span key={i}> {txt} <br/> </span>)} </div> :
- msg
- }
- </Modal.Body>
- {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) &&
- <ModalFooter
- type={type}
- onConfirmed={onConfirmed}
- onDeclined={onDeclined}
- onClose={onClose}
- confirmationButtonText={confirmationButtonText}
- cancelButtonText={cancelButtonText}/>}
- </Modal>
- );
- }
-
- componentDidUpdate() {
- if (this.props.timeout) {
- setTimeout(this.props.onClose, this.props.timeout);
- }
- }
-};
+export class GlobalModalView extends React.Component {
+ static propTypes = {
+ show: PropTypes.bool,
+ type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
+ title: PropTypes.string,
+ modalComponentProps: PropTypes.object,
+ modalComponentName: PropTypes.string,
+ onConfirmed: PropTypes.func,
+ onDeclined: PropTypes.func,
+ confirmationButtonText: PropTypes.string,
+ cancelButtonText: PropTypes.string
+ };
+
+ static defaultProps = {
+ show: false,
+ type: 'default',
+ title: ''
+ };
+
+ render() {
+ let {
+ title,
+ type,
+ show,
+ modalComponentName,
+ modalComponentProps,
+ modalClassName,
+ msg,
+ onConfirmed,
+ onDeclined,
+ confirmationButtonText,
+ cancelButtonText,
+ onClose
+ } = 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>
+ {ComponentToRender ? (
+ <ComponentToRender {...modalComponentProps} />
+ ) : msg && typeof msg === 'string' ? (
+ <div>
+ {' '}
+ {msg.split('\n').map((txt, i) => (
+ <span key={i}>
+ {' '}
+ {txt} <br />{' '}
+ </span>
+ ))}{' '}
+ </div>
+ ) : (
+ msg
+ )}
+ </Modal.Body>
+ {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) && (
+ <ModalFooter
+ type={type}
+ onConfirmed={onConfirmed}
+ onDeclined={onDeclined}
+ onClose={onClose}
+ confirmationButtonText={confirmationButtonText}
+ cancelButtonText={cancelButtonText}
+ />
+ )}
+ </Modal>
+ );
+ }
+
+ componentDidUpdate() {
+ if (this.props.timeout) {
+ setTimeout(this.props.onClose, this.props.timeout);
+ }
+ }
+}
GlobalModalView.propTypes = {
- show: PropTypes.bool,
- type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
- title: PropTypes.string,
- modalComponentProps: PropTypes.object,
- modalComponentName: PropTypes.string,
- onConfirmed: PropTypes.func,
- onDeclined: PropTypes.func,
- confirmationButtonText: PropTypes.string,
- cancelButtonText: PropTypes.string
+ show: PropTypes.bool,
+ type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
+ title: PropTypes.string,
+ modalComponentProps: PropTypes.object,
+ modalComponentName: PropTypes.string,
+ onConfirmed: PropTypes.func,
+ onDeclined: PropTypes.func,
+ confirmationButtonText: PropTypes.string,
+ cancelButtonText: PropTypes.string
};
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(GlobalModalView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+ withRef: true
+})(GlobalModalView);
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
index 3e5545371a..e9c1853c97 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
@@ -16,23 +16,21 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- GLOBAL_MODAL_SHOW: null,
- GLOBAL_MODAL_CLOSE: null,
- GLOBAL_MODAL_ERROR: null,
- GLOBAL_MODAL_WARNING: null,
- GLOBAL_MODAL_SUCCESS: null,
-
+ GLOBAL_MODAL_SHOW: null,
+ GLOBAL_MODAL_CLOSE: null,
+ GLOBAL_MODAL_ERROR: null,
+ GLOBAL_MODAL_WARNING: null,
+ GLOBAL_MODAL_SUCCESS: null
});
-
export const typeEnum = {
- DEFAULT: 'default',
- ERROR: 'error',
- WARNING: 'warning',
- SUCCESS: 'success'
+ DEFAULT: 'default',
+ ERROR: 'error',
+ WARNING: 'warning',
+ SUCCESS: 'success'
};
-export const modalSizes = {
- LARGE: 'large',
- SMALL: 'small'
+export const modalSizes = {
+ LARGE: 'large',
+ SMALL: 'small'
};
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
index 28674ea569..b2273fa7a7 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
@@ -14,37 +14,37 @@
* permissions and limitations under the License.
*/
-import {actionTypes, typeEnum} from './GlobalModalConstants.js';
+import { actionTypes, typeEnum } from './GlobalModalConstants.js';
export default (state = null, action) => {
- switch (action.type) {
- case actionTypes.GLOBAL_MODAL_SHOW:
- return {
- ...action.data
- };
- 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
- };
+ switch (action.type) {
+ case actionTypes.GLOBAL_MODAL_SHOW:
+ return {
+ ...action.data
+ };
+ 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
- };
+ case actionTypes.GLOBAL_MODAL_SUCCESS:
+ return {
+ type: typeEnum.SUCCESS,
+ modalClassName: 'notification-modal',
+ ...action.data
+ };
- case actionTypes.GLOBAL_MODAL_CLOSE:
- return null;
- default:
- return state;
- }
+ case actionTypes.GLOBAL_MODAL_CLOSE:
+ return null;
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/nfvo-components/modal/Modal.jsx b/openecomp-ui/src/nfvo-components/modal/Modal.jsx
index b0f704dba9..cfd757501f 100644
--- a/openecomp-ui/src/nfvo-components/modal/Modal.jsx
+++ b/openecomp-ui/src/nfvo-components/modal/Modal.jsx
@@ -20,65 +20,63 @@ import BootstrapModal from 'react-bootstrap/lib/Modal.js';
let nextModalId = 0;
export default class Modal extends React.Component {
+ static Header = BootstrapModal.Header;
- static Header = BootstrapModal.Header;
+ static Title = BootstrapModal.Title;
- static Title = BootstrapModal.Title;
+ static Footer = BootstrapModal.Footer;
- static Footer = BootstrapModal.Footer;
+ static Body = class ModalBody extends React.Component {
+ render() {
+ let { children, ...props } = this.props;
+ return (
+ <BootstrapModal.Body {...props}>{children}</BootstrapModal.Body>
+ );
+ }
- static Body = class ModalBody extends React.Component {
+ 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()
+ )
+ );
+ }
+ };
- render() {
- let {children, ...props} = this.props;
- return (
- <BootstrapModal.Body {...props}>
- {children}
- </BootstrapModal.Body>
- );
- }
+ componentWillMount() {
+ this.modalId = `dox-ui-modal-${nextModalId++}`;
+ }
- 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())
- );
- }
- };
+ componentDidMount() {
+ this.ensureRootClass();
+ }
- componentWillMount() {
- this.modalId = `dox-ui-modal-${nextModalId++}`;
- }
+ componentDidUpdate() {
+ this.ensureRootClass();
+ }
- componentDidMount() {
- 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');
+ }
+ }
- 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>
- );
- }
+ render() {
+ let { children, ...props } = this.props;
+ return (
+ <BootstrapModal {...props} id={this.modalId}>
+ {children}
+ </BootstrapModal>
+ );
+ }
}