From 1801b24389baa8e3f7298ff2c41e2512b19c1290 Mon Sep 17 00:00:00 2001 From: Einav Weiss Keidar Date: Mon, 13 Aug 2018 16:19:46 +0300 Subject: react 16 upgrade Issue-ID: SDC-1762 Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab Signed-off-by: Einav Keidar --- .../src/nfvo-components/modal/GlobalModal.js | 118 ++++++++------------- .../nfvo-components/modal/GlobalModalConstants.js | 18 ++-- .../nfvo-components/modal/GlobalModalReducer.js | 15 ++- openecomp-ui/src/nfvo-components/modal/Modal.jsx | 94 ---------------- 4 files changed, 61 insertions(+), 184 deletions(-) delete mode 100644 openecomp-ui/src/nfvo-components/modal/Modal.jsx (limited to 'openecomp-ui/src/nfvo-components/modal') 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 ( - -
- {onConfirmed && ( - - )} - -
- + { + 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 ( - - {title} - - + type={type} + size={modalComponentProps && modalComponentProps.size}> + + {title} + + {ComponentToRender ? ( ) : msg && typeof msg === 'string' ? ( @@ -172,10 +145,9 @@ export class GlobalModalView extends React.Component { ) : ( msg )} - + {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) && ( - { 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 ( - {children} - ); - } - - 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 ( - - {children} - - ); - } -} -- cgit 1.2.3-korg