summaryrefslogtreecommitdiffstats
path: root/src/generic-components/input/validation/ValidationTabs.jsx
diff options
context:
space:
mode:
authorARULNA <arul.nambi@amdocs.com>2017-06-02 16:27:25 -0400
committerARULNA <arul.nambi@amdocs.com>2017-06-02 16:33:14 -0400
commitca007e933bcd9f63aa77801656ed9dd4142c432c (patch)
treece97ed9df8c4fe48a524f0dc1365ad28acef7c46 /src/generic-components/input/validation/ValidationTabs.jsx
parent42b788b852f0604748828e9e325e4a0f01152c75 (diff)
Initial coomit for AAI-UI(sparky-fe)
Change-Id: I9f8482824a52bac431c100939899e760c0fa4fdb Signed-off-by: ARULNA <arul.nambi@amdocs.com>
Diffstat (limited to 'src/generic-components/input/validation/ValidationTabs.jsx')
-rw-r--r--src/generic-components/input/validation/ValidationTabs.jsx105
1 files changed, 105 insertions, 0 deletions
diff --git a/src/generic-components/input/validation/ValidationTabs.jsx b/src/generic-components/input/validation/ValidationTabs.jsx
new file mode 100644
index 0000000..ea22f89
--- /dev/null
+++ b/src/generic-components/input/validation/ValidationTabs.jsx
@@ -0,0 +1,105 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+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 '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>
+ );
+ }
+}