src/generic-components/treeNode/TreeNode.jsx

   1 /*
   2  * ============LICENSE_START===================================================
   3  * SPARKY (AAI UI service)
   4  * ============================================================================
   5  * Copyright © 2017 AT&T Intellectual Property.
   6  * Copyright © 2017 Amdocs
   7  * All rights reserved.
   8  * ============================================================================
   9  * Licensed under the Apache License, Version 2.0 (the "License");
  10  * you may not use this file except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *      http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  * ============LICENSE_END=====================================================
  21  *
  22  * ECOMP and OpenECOMP are trademarks
  23  * and service marks of AT&T Intellectual Property.
  24  */
  25
  26 import React, {Component} from 'react';
  27 import classNames from 'classnames';
  28
  29
  30
  31
  32 class TreeNode extends Component {
  33
  34
  35   constructor(props) {
  36     super(props);
  37     this.state = {
  38       visible: false,
  39     };
  40   }
  41
  42   toggle = () => {
  43     this.setState({visible: !this.state.visible});
  44   };
  45
  46   render() {
  47     var childNodes;
  48     var classObj;
  49     if (this.props.node !== undefined && this.props.node.childNodes !== undefined) {
  50       childNodes = this.props.node.childNodes.map(function (node, index) {
  51         return <li key={index}><TreeNode node={node}/></li>;
  52       });
  53
  54       classObj = {
  55         togglable: true,
  56         'togglable-down': this.state.visible,
  57         'togglable-up': !this.state.visible
  58       };
  59     }
  60
  61     var style;
  62     if (!this.state.visible) {
  63       style = {display: 'none'};
  64     }
  65
  66     return (
  67                         <div>
  68                                 <h7 onClick={this.toggle} className={classNames(classObj)}>
  69                                         {this.props.node.title}
  70                                 </h7>
  71                                 <ul style={style} className='node-tree'>
  72                                         {childNodes}
  73                                 </ul>
  74                         </div>
  75     );
  76   }
  77 }
  78
  79 export default TreeNode;