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

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   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
  13  * or implied. See the License for the specific language governing
  14  * permissions and 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
  20 let nextModalId = 0;
  21
  22 export default class Modal extends React.Component {
  23
  24         static Header = BootstrapModal.Header;
  25
  26         static Title = BootstrapModal.Title;
  27
  28         static Footer = BootstrapModal.Footer;
  29
  30         static Body = class ModalBody extends React.Component {
  31
  32                 render() {
  33                         let {children, ...props} = this.props;
  34                         return (
  35                                 <BootstrapModal.Body {...props}>
  36                                         {children}
  37                                 </BootstrapModal.Body>
  38                         );
  39                 }
  40
  41                 componentDidMount() {
  42                         let element = ReactDOM.findDOMNode(this);
  43                         element.addEventListener('click', event => {
  44                                 if (event.target.tagName === 'A') {
  45                                         event.preventDefault();
  46                                 }
  47                         });
  48                         ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
  49                                 element.addEventListener(eventType, event => event.stopPropagation())
  50                         );
  51                 }
  52         };
  53
  54         componentWillMount() {
  55                 this.modalId = `dox-ui-modal-${nextModalId++}`;
  56         }
  57
  58         componentDidMount() {
  59                 this.ensureRootClass();
  60         }
  61
  62         componentDidUpdate() {
  63                 this.ensureRootClass();
  64         }
  65
  66         ensureRootClass() {
  67                 let element = document.getElementById(this.modalId);
  68                 while(element && !element.hasAttribute('data-reactroot')) {
  69                         element = element.parentElement;
  70                 }
  71                 if (element && !element.classList.contains('dox-ui')) {
  72                         element.classList.add('dox-ui');
  73                 }
  74         }
  75
  76         render() {
  77                 let {children, ...props} = this.props;
  78                 return (
  79                         <BootstrapModal {...props} id={this.modalId}>
  80                                 {children}
  81                         </BootstrapModal>
  82                 );
  83         }
  84 }