summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/input/validation/ValidationTabs.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components/input/validation/ValidationTabs.jsx')
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/ValidationTabs.jsx72
1 files changed, 72 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationTabs.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationTabs.jsx
new file mode 100644
index 0000000000..6eda4b9827
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationTabs.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Tabs from 'react-bootstrap/lib/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 ValidationTab extends React.Component {
+
+ static propTypes = {
+ children: React.PropTypes.node
+ };
+
+ state = {
+ invalidTabs: []
+ };
+
+ cloneTab(element) {
+ const {invalidTabs} = this.state;
+ return React.cloneElement(
+ element,
+ {
+ key: element.props.eventKey,
+ tabClassName: invalidTabs.indexOf(element.props.eventKey) > -1 ? 'invalid-tab' : 'valid-tab',
+ onValidationStateChange: (eventKey, isValid) => this.validTabStateChanged(eventKey, isValid)
+ }
+ );
+ }
+
+ validTabStateChanged(eventKey, isValid) {
+ let {invalidTabs} = this.state;
+ let invalidTabIndex = invalidTabs.indexOf(eventKey);
+ if (isValid && invalidTabIndex > -1) {
+ this.setState({invalidTabs: invalidTabs.filter(otherEventKey => eventKey !== otherEventKey)});
+ } else if (!isValid && invalidTabIndex === -1) {
+ this.setState({invalidTabs: [...invalidTabs, eventKey]});
+ }
+ }
+
+ showTabsError() {
+ const {invalidTabs} = this.state;
+ return invalidTabs.length > 0 && (invalidTabs.length > 1 || invalidTabs[0] !== this.props.activeKey);
+ }
+
+ render() {
+ return (
+ <div>
+ <Tabs {...this.props} ref='tabsList'>
+ {this.props.children.map(element => this.cloneTab(element))}
+ </Tabs>
+ <Overlay
+ animation={false}
+ show={this.showTabsError()}
+ placement='bottom'
+ target={() => {
+ let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.active):nth-of-type(n)');
+ return target && target.offsetParent ? target : undefined;
+ }
+ }
+ container={this}>
+ <Tooltip
+ id='error-some-tabs-contain-errors'
+ className='validation-error-message'>
+ {i18n('One or more tabs are invalid')}
+ </Tooltip>
+ </Overlay>
+ </div>
+ );
+ }
+}