diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx')
| -rw-r--r-- | openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx | 116 |
1 files changed, 64 insertions, 52 deletions
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx index 0982c133e6..429985a902 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx @@ -16,64 +16,76 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; -import {default as SDCTabs} from 'sdc-ui/lib/react/Tabs.js'; +import { default as SDCTabs } from 'sdc-ui/lib/react/Tabs.js'; import Overlay from 'react-bootstrap/lib/Overlay.js'; import Tooltip from 'react-bootstrap/lib/Tooltip.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; -export default -class Tabs extends React.Component { +export default class Tabs extends React.Component { + static propTypes = { + children: PropTypes.node + }; - static propTypes = { - children: PropTypes.node - }; + cloneTab(element) { + const { invalidTabs } = this.props; + return React.cloneElement(element, { + key: element.props.tabId, + className: + invalidTabs.indexOf(element.props.tabId) > -1 + ? 'invalid-tab' + : 'valid-tab' + }); + } - cloneTab(element) { - const {invalidTabs} = this.props; - return React.cloneElement( - element, - { - key: element.props.tabId, - className: invalidTabs.indexOf(element.props.tabId) > -1 ? 'invalid-tab' : 'valid-tab' - } - ); - } + showTabsError() { + const { invalidTabs } = this.props; + const showError = + (invalidTabs.length === 1 && + invalidTabs[0] !== this.props.activeTab) || + invalidTabs.length > 1; + return showError; + } - showTabsError() { - const {invalidTabs} = this.props; - const showError = ((invalidTabs.length === 1 && invalidTabs[0] !== this.props.activeTab) || (invalidTabs.length > 1)); - return showError; - } - - render() { - // eslint-disable-next-line no-unused-vars - let {invalidTabs, ...tabProps} = this.props; - return ( - <div> - <SDCTabs {...tabProps} ref='tabsList' id='tabsList' > - {this.props.children.map(element => this.cloneTab(element))} - </SDCTabs> - <Overlay - animation={false} - show={this.showTabsError()} - placement='bottom' - target={() => { - let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)'); - return target && target.offsetParent ? target : undefined; - } - } - container={() => { - let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)'); - return target && target.offsetParent ? target.offsetParent : this; - }}> - <Tooltip - id='error-some-tabs-contain-errors' - className='validation-error-message'> - {i18n('One or more tabs are invalid')} - </Tooltip> - </Overlay> - </div> - ); - } + render() { + // eslint-disable-next-line no-unused-vars + let { invalidTabs, ...tabProps } = this.props; + return ( + <div> + <SDCTabs {...tabProps} ref="tabsList" id="tabsList"> + {this.props.children.map(element => this.cloneTab(element))} + </SDCTabs> + <Overlay + animation={false} + show={this.showTabsError()} + placement="bottom" + target={() => { + let target = ReactDOM.findDOMNode( + this.refs.tabsList + ).querySelector( + 'ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)' + ); + return target && target.offsetParent + ? target + : undefined; + }} + container={() => { + let target = ReactDOM.findDOMNode( + this.refs.tabsList + ).querySelector( + 'ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)' + ); + return target && target.offsetParent + ? target.offsetParent + : this; + }}> + <Tooltip + id="error-some-tabs-contain-errors" + className="validation-error-message"> + {i18n('One or more tabs are invalid')} + </Tooltip> + </Overlay> + </div> + ); + } } |