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;