openecomp-ui/src/nfvo-components/input/validation/ValidationTabs.jsx

   1 import React from 'react';
   2 import ReactDOM from 'react-dom';
   3 import Tabs from 'react-bootstrap/lib/Tabs.js';
   4 import Overlay from 'react-bootstrap/lib/Overlay.js';
   5 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
   6
   7 import i18n from 'nfvo-utils/i18n/i18n.js';
   8
   9 export default
  10 class ValidationTab extends React.Component {
  11
  12         static propTypes = {
  13                 children: React.PropTypes.node
  14         };
  15
  16         state = {
  17                 invalidTabs: []
  18         };
  19
  20         cloneTab(element) {
  21                 const {invalidTabs} = this.state;
  22                 return React.cloneElement(
  23                         element,
  24                         {
  25                                 key: element.props.eventKey,
  26                                 tabClassName: invalidTabs.indexOf(element.props.eventKey) > -1 ? 'invalid-tab' : 'valid-tab',
  27                                 onValidationStateChange: (eventKey, isValid) => this.validTabStateChanged(eventKey, isValid)
  28                         }
  29                 );
  30         }
  31
  32         validTabStateChanged(eventKey, isValid) {
  33                 let {invalidTabs} = this.state;
  34                 let invalidTabIndex = invalidTabs.indexOf(eventKey);
  35                 if (isValid && invalidTabIndex > -1) {
  36                         this.setState({invalidTabs: invalidTabs.filter(otherEventKey => eventKey !== otherEventKey)});
  37                 } else if (!isValid && invalidTabIndex === -1) {
  38                         this.setState({invalidTabs: [...invalidTabs, eventKey]});
  39                 }
  40         }
  41
  42         showTabsError() {
  43                 const {invalidTabs} = this.state;
  44                 return invalidTabs.length > 0 && (invalidTabs.length > 1 || invalidTabs[0] !== this.props.activeKey);
  45         }
  46
  47         render() {
  48                 return (
  49                         <div>
  50                                 <Tabs {...this.props} ref='tabsList'>
  51                                         {this.props.children.map(element => this.cloneTab(element))}
  52                                 </Tabs>
  53                                 <Overlay
  54                                         animation={false}
  55                                         show={this.showTabsError()}
  56                                         placement='bottom'
  57                                         target={() => {
  58                                                 let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.active):nth-of-type(n)');
  59                                                 return target && target.offsetParent ? target : undefined;
  60                                         }
  61                                         }
  62                                         container={this}>
  63                                         <Tooltip
  64                                                 id='error-some-tabs-contain-errors'
  65                                                 className='validation-error-message'>
  66                                                 {i18n('One or more tabs are invalid')}
  67                                         </Tooltip>
  68                                 </Overlay>
  69                         </div>
  70                 );
  71         }
  72 }