src/generic-components/input/validation/ValidationTabs.jsx

   1 /*
   2  * ============LICENSE_START===================================================
   3  * SPARKY (AAI UI service)
   4  * ============================================================================
   5  * Copyright © 2017 AT&T Intellectual Property.
   6  * Copyright © 2017 Amdocs
   7  * All rights reserved.
   8  * ============================================================================
   9  * Licensed under the Apache License, Version 2.0 (the "License");
  10  * you may not use this file except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *      http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  * ============LICENSE_END=====================================================
  21  *
  22  * ECOMP and OpenECOMP are trademarks
  23  * and service marks of AT&T Intellectual Property.
  24  */
  25
  26 import React from 'react';
  27 import ReactDOM from 'react-dom';
  28 import Tabs from 'react-bootstrap/lib/Tabs.js';
  29 import Overlay from 'react-bootstrap/lib/Overlay.js';
  30 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
  31
  32 import i18n from 'utils/i18n/i18n.js';
  33
  34 export default
  35 class ValidationTab extends React.Component {
  36
  37                 static propTypes = {
  38                                 children: React.PropTypes.node
  39                 };
  40
  41                 state = {
  42                                 invalidTabs: []
  43                 };
  44
  45                 cloneTab(element) {
  46                                 const {invalidTabs} = this.state;
  47                                 return React.cloneElement(
  48                                                 element,
  49                                                 {
  50                                                                 key: element.props.eventKey,
  51                                                                 tabClassName: invalidTabs.indexOf(element.props.eventKey) > -1
  52                                                                                 ? 'invalid-tab'
  53                                                                                 : 'valid-tab',
  54                                                                 onValidationStateChange: (
  55                                                                                 eventKey, isValid) => this.validTabStateChanged(eventKey, isValid)
  56                                                 }
  57                                 );
  58                 }
  59
  60                 validTabStateChanged(eventKey, isValid) {
  61                                 let {invalidTabs} = this.state;
  62                                 let invalidTabIndex = invalidTabs.indexOf(eventKey);
  63                                 if (isValid && invalidTabIndex > -1) {
  64                                                 this.setState({
  65                                                                 invalidTabs: invalidTabs.filter(
  66                                                                                 otherEventKey => eventKey !== otherEventKey)
  67                                                 });
  68                                 } else if (!isValid && invalidTabIndex === -1) {
  69                                                 this.setState({invalidTabs: [...invalidTabs, eventKey]});
  70                                 }
  71                 }
  72
  73                 showTabsError() {
  74                                 const {invalidTabs} = this.state;
  75                                 return invalidTabs.length >
  76                                                 0 &&
  77                                                 (invalidTabs.length > 1 || invalidTabs[0] !== this.props.activeKey);
  78                 }
  79
  80                 render() {
  81                                 return (
  82                                                 <div>
  83                                                                 <Tabs {...this.props} ref='tabsList'>
  84                                                                                 {this.props.children.map(element => this.cloneTab(element))}
  85                                                                 </Tabs>
  86                                                                 <Overlay
  87                                                                                 animation={false}
  88                                                                                 show={this.showTabsError()}
  89                                                                                 placement='bottom'
  90                                                                                 target={() => {
  91                                                 let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.active):nth-of-type(n)');
  92                                                 return target && target.offsetParent ? target : undefined;
  93                                         }
  94                                         }
  95                                                                                 container={this}>
  96                                                                                 <Tooltip
  97                                                                                                 id='error-some-tabs-contain-errors'
  98                                                                                                 className='validation-error-message'>
  99                                                                                                 {i18n('One or more tabs are invalid')}
 100                                                                                 </Tooltip>
 101                                                                 </Overlay>
 102                                                 </div>
 103                                 );
 104                 }
 105 }