diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/modal')
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> + ); + } } |