openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import classnames from 'classnames';
  18 import Collapse from 'react-bootstrap/lib/Collapse.js';
  19
  20 class NavigationSideBar extends React.Component {
  21         static PropTypes = {
  22                 activeItemId: React.PropTypes.string.isRequired,
  23                 onSelect: React.PropTypes.func,
  24                 onToggle: React.PropTypes.func,
  25                 groups: React.PropTypes.array
  26         };
  27
  28         constructor(props) {
  29                 super(props);
  30                 this.state = {
  31                         activeItemId: null
  32                 };
  33                 this.handleItemClicked = this.handleItemClicked.bind(this);
  34         }
  35
  36         render() {
  37                 let {groups, activeItemId} = this.props;
  38
  39                 return (
  40                         <div className='navigation-side-content'>
  41                                 {groups.map(group => (
  42                                         <NavigationMenu menu={group} activeItemId={activeItemId} onNavigationItemClick={this.handleItemClicked} key={'menu_' + group.id} />
  43                                 ))}
  44                         </div>
  45                 );
  46         }
  47
  48         handleItemClicked(event, item) {
  49                 event.stopPropagation();
  50                 if(this.props.onToggle) {
  51                         this.props.onToggle(this.props.groups, item.id);
  52                 }
  53                 if(item.onSelect) {
  54                         item.onSelect();
  55                 }
  56                 if(this.props.onSelect) {
  57                         this.props.onSelect(item);
  58                 }
  59         }
  60 }
  61
  62 class NavigationMenu extends React.Component {
  63         static PropTypes = {
  64                 activeItemId: React.PropTypes.string.isRequired,
  65                 onNavigationItemClick: React.PropTypes.func,
  66                 menu: React.PropTypes.array
  67         };
  68
  69         render() {
  70                 const {menu, activeItemId, onNavigationItemClick} = this.props;
  71                 return (
  72                         <div className='navigation-group'  key={menu.id}>
  73                                 <NavigationMenuHeader title={menu.name} />
  74                                 <NavigationMenuItems items={menu.items} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />
  75                         </div>);
  76         }
  77 }
  78
  79 function NavigationMenuHeader(props) {
  80         return <div className='group-name' data-test-id='navbar-group-name'>{props.title}</div>;
  81 }
  82
  83 function NavigationMenuItems(props) {
  84         const {items, activeItemId, onNavigationItemClick} = props;
  85         return (
  86                 <div className='navigation-group-items'>
  87                         {
  88                                 items && items.map(item => (<NavigationMenuItem key={'menuItem_' + item.id} item={item} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />))
  89                         }
  90                 </div>
  91         );
  92 }
  93
  94 function NavigationMenuItem(props) {
  95         const {onNavigationItemClick, item, activeItemId} = props;
  96         const isGroup = item.items && item.items.length > 0;
  97         return (
  98                 <div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})} key={'item_' + item.id}>
  99                         <NavigationLink item={item} activeItemId={activeItemId} onClick={onNavigationItemClick} />
 100                         {isGroup && <Collapse in={item.expanded} data-test-id={'navigation-group-' + item.id}>
 101                                 <div>
 102                                                 {item.items.map(subItem => (<NavigationMenuItem key={'menuItem_' + subItem.id} item={subItem} onNavigationItemClick={onNavigationItemClick} activeItemId={activeItemId}  />)) }
 103                                 </div>
 104                         </Collapse>
 105                         }
 106                 </div>
 107         );
 108 }
 109
 110 function NavigationLink(props) {
 111         const {item, activeItemId, onClick} = props;
 112         return (
 113                 <div
 114                         key={'navAction_' + item.id}
 115                         className={classnames('navigation-group-item-name', {
 116                                 'selected': item.id === activeItemId,
 117                                 'disabled': item.disabled,
 118                                 'bold-name': item.expanded,
 119                                 'hidden': item.hidden
 120                         })}
 121                         onClick={(event) => onClick(event, item)}
 122                         data-test-id={'navbar-group-item-' + item.id}>
 123                         {item.name}
 124                 </div>
 125         );
 126 }
 127
 128 export default NavigationSideBar;