src/generic-components/treeNode/TreeNode.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017-2018 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 import React, {Component} from 'react';
  22 import classNames from 'classnames';
  23
  24
  25
  26
  27 class TreeNode extends Component {
  28
  29
  30   constructor(props) {
  31     super(props);
  32     this.state = {
  33       visible: false,
  34     };
  35   }
  36
  37   toggle = () => {
  38     this.setState({visible: !this.state.visible});
  39   };
  40
  41   render() {
  42     var childNodes;
  43     var classObj;
  44     if (this.props.node !== undefined && this.props.node.childNodes !== undefined) {
  45       childNodes = this.props.node.childNodes.map(function (node, index) {
  46         return <li key={index}><TreeNode node={node}/></li>;
  47       });
  48
  49       classObj = {
  50         togglable: true,
  51         'togglable-down': this.state.visible,
  52         'togglable-up': !this.state.visible
  53       };
  54     }
  55
  56     var style;
  57     if (!this.state.visible) {
  58       style = {display: 'none'};
  59     }
  60
  61     return (
  62                         <div>
  63                                 <h7 onClick={this.toggle} className={classNames(classObj)}>
  64                                         {this.props.node.title}
  65                                 </h7>
  66                                 <ul style={style} className='node-tree'>
  67                                         {childNodes}
  68                                 </ul>
  69                         </div>
  70     );
  71   }
  72 }
  73
  74 export default TreeNode;