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

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