openecomp-ui/src/nfvo-components/input/validation/Tabs.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 {default as BTabs} from 'react-bootstrap/lib/Tabs.js';
  19 import Overlay from 'react-bootstrap/lib/Overlay.js';
  20 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
  21
  22 import i18n from 'nfvo-utils/i18n/i18n.js';
  23
  24 export default
  25 class Tabs extends React.Component {
  26
  27         static propTypes = {
  28                 children: React.PropTypes.node
  29         };
  30
  31         cloneTab(element) {
  32                 const {invalidTabs} = this.props;
  33                 return React.cloneElement(
  34                         element,
  35                         {
  36                                 key: element.props.eventKey,
  37                                 tabClassName: invalidTabs.indexOf(element.props.eventKey) > -1 ? 'invalid-tab' : 'valid-tab'
  38                         }
  39                 );
  40         }
  41
  42         showTabsError() {
  43                 const {invalidTabs} = this.props;
  44                 const showError = ((invalidTabs.length === 1 && invalidTabs[0] !== this.props.activeKey) || (invalidTabs.length > 1));
  45                 return showError;
  46         }
  47
  48         render() {
  49                 // eslint-disable-next-line no-unused-vars
  50                 let {invalidTabs, ...tabProps} = this.props;
  51                 return (
  52                         <div>
  53                                 <BTabs {...tabProps} ref='tabsList' id='tabsList' >
  54                                         {this.props.children.map(element => this.cloneTab(element))}
  55                                 </BTabs>
  56                                 <Overlay
  57                                         animation={false}
  58                                         show={this.showTabsError()}
  59                                         placement='bottom'
  60                                         containerPadding={50}
  61                                         target={() => {
  62                                                 let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.active):nth-of-type(n)');
  63                                                 return target && target.offsetParent ? target : undefined;
  64                                         }
  65                                         }
  66                                         container={() => {
  67                                                 let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.active):nth-of-type(n)');
  68                                                 return target && target.offsetParent ? target.offsetParent : this;
  69                                         }}>
  70                                         <Tooltip
  71                                                 id='error-some-tabs-contain-errors'
  72                                                 className='validation-error-message'>
  73                                                 {i18n('One or more tabs are invalid')}
  74                                         </Tooltip>
  75                                 </Overlay>
  76                         </div>
  77                 );
  78         }
  79 }