openecomp-ui/src/nfvo-components/modal/Modal.jsx

   1 /*
   2  * Copyright © 2016-2018 European Support Limited
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 import React from 'react';
  17 import ReactDOM from 'react-dom';
  18 import BootstrapModal from 'react-bootstrap/lib/Modal.js';
  19 import { isEqual } from 'lodash';
  20 let nextModalId = 0;
  21
  22 export default class Modal extends React.Component {
  23     static Header = BootstrapModal.Header;
  24
  25     static Title = BootstrapModal.Title;
  26
  27     static Footer = BootstrapModal.Footer;
  28
  29     static Body = class ModalBody extends React.Component {
  30         render() {
  31             let { children, ...props } = this.props;
  32             return (
  33                 <BootstrapModal.Body {...props}>{children}</BootstrapModal.Body>
  34             );
  35         }
  36
  37         componentDidMount() {
  38             let element = ReactDOM.findDOMNode(this);
  39             element.addEventListener('click', event => {
  40                 if (event.target.tagName === 'A') {
  41                     event.preventDefault();
  42                 }
  43             });
  44             ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
  45                 element.addEventListener(eventType, event =>
  46                     event.stopPropagation()
  47                 )
  48             );
  49         }
  50
  51         componentWillUnmount() {
  52             let element = ReactDOM.findDOMNode(this);
  53
  54             ['wheel', 'mousewheel', 'DOMMouseScroll', 'click'].forEach(
  55                 eventType => element.removeEventListener(eventType)
  56             );
  57         }
  58
  59         shouldComponentUpdate(nextProps) {
  60             return !isEqual(this.props, nextProps);
  61         }
  62     };
  63
  64     componentWillMount() {
  65         this.modalId = `dox-ui-modal-${nextModalId++}`;
  66     }
  67
  68     componentDidMount() {
  69         this.ensureRootClass();
  70     }
  71
  72     componentDidUpdate() {
  73         this.ensureRootClass();
  74     }
  75
  76     ensureRootClass() {
  77         let element = document.getElementById(this.modalId);
  78         while (element && !element.hasAttribute('data-reactroot')) {
  79             element = element.parentElement;
  80         }
  81         if (element && !element.classList.contains('dox-ui')) {
  82             element.classList.add('dox-ui');
  83         }
  84     }
  85
  86     render() {
  87         let { children, ...props } = this.props;
  88         return (
  89             <BootstrapModal {...props} id={this.modalId}>
  90                 {children}
  91             </BootstrapModal>
  92         );
  93     }
  94 }