Adding filter bar
[aai/sparky-fe.git] / src / generic-components / treeNode / TreeNode.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, {Component} from 'react';
24 import classNames from 'classnames';
25
26
27
28
29 class TreeNode extends Component {
30
31
32   constructor(props) {
33     super(props);
34     this.state = {
35       visible: false,
36     };
37   }
38
39   toggle = () => {
40     this.setState({visible: !this.state.visible});
41   };
42
43   render() {
44     var childNodes;
45     var classObj;
46     if (this.props.node !== undefined && this.props.node.childNodes !== undefined) {
47       childNodes = this.props.node.childNodes.map(function (node, index) {
48         return <li key={index}><TreeNode node={node}/></li>;
49       });
50
51       classObj = {
52         togglable: true,
53         'togglable-down': this.state.visible,
54         'togglable-up': !this.state.visible
55       };
56     }
57
58     var style;
59     if (!this.state.visible) {
60       style = {display: 'none'};
61     }
62
63     return (
64                         <div>
65                                 <h7 onClick={this.toggle} className={classNames(classObj)}>
66                                         {this.props.node.title}
67                                 </h7>
68                                 <ul style={style} className='node-tree'>
69                                         {childNodes}
70                                 </ul>
71                         </div>
72     );
73   }
74 }
75
76 export default TreeNode;

© 2017 ONAP. Copyright © The Linux Foundation ®. All Rights Reserved.
The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our Trademark Usage page.
Linux is a registered trademark of Linus Torvalds.
Privacy Policy and Terms of Use