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 PropTypes from 'prop-types';
  18 import ReactDOM from 'react-dom';
  19 import {default as SDCTabs} from 'sdc-ui/lib/react/Tabs.js';
  20 import Overlay from 'react-bootstrap/lib/Overlay.js';
  21 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
  22
  23 import i18n from 'nfvo-utils/i18n/i18n.js';
  24
  25 export default
  26 class Tabs extends React.Component {
  27
  28         static propTypes = {
  29                 children: PropTypes.node
  30         };
  31
  32         cloneTab(element) {
  33                 const {invalidTabs} = this.props;
  34                 return React.cloneElement(
  35                         element,
  36                         {
  37                                 key: element.props.tabId,
  38                                 className: invalidTabs.indexOf(element.props.tabId) > -1 ? 'invalid-tab' : 'valid-tab'
  39                         }
  40                 );
  41         }
  42
  43         showTabsError() {
  44                 const {invalidTabs} = this.props;
  45                 const showError = ((invalidTabs.length === 1 && invalidTabs[0] !== this.props.activeTab) || (invalidTabs.length > 1));
  46                 return showError;
  47         }
  48
  49         render() {
  50                 // eslint-disable-next-line no-unused-vars
  51                 let {invalidTabs, ...tabProps} = this.props;
  52                 return (
  53                         <div>
  54                                 <SDCTabs {...tabProps} ref='tabsList' id='tabsList' >
  55                                         {this.props.children.map(element => this.cloneTab(element))}
  56                                 </SDCTabs>
  57                                 <Overlay
  58                                         animation={false}
  59                                         show={this.showTabsError()}
  60                                         placement='bottom'
  61                                         target={() => {
  62                                                 let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-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(.sdc-tab-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 }