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 PropTypes from 'prop-types';
  18 import classnames from 'classnames';
  19 import Collapse from 'react-bootstrap/lib/Collapse.js';
  20
  21 class NavigationSideBar extends React.Component {
  22         static PropTypes = {
  23                 activeItemId: PropTypes.string.isRequired,
  24                 onSelect: PropTypes.func,
  25                 onToggle: PropTypes.func,
  26                 groups: PropTypes.array
  27         };
  28
  29         constructor(props) {
  30                 super(props);
  31                 this.state = {
  32                         activeItemId: null
  33                 };
  34                 this.handleItemClicked = this.handleItemClicked.bind(this);
  35         }
  36
  37         render() {
  38                 let {groups, activeItemId} = this.props;
  39
  40                 return (
  41                         <div className='navigation-side-content'>
  42                                 {groups.map(group => (
  43                                         <NavigationMenu menu={group} activeItemId={activeItemId} onNavigationItemClick={this.handleItemClicked} key={'menu_' + group.id} />
  44                                 ))}
  45                         </div>
  46                 );
  47         }
  48
  49         handleItemClicked(event, item) {
  50                 event.stopPropagation();
  51                 if(this.props.onToggle) {
  52                         this.props.onToggle(this.props.groups, item.id);
  53                 }
  54                 if(item.onSelect) {
  55                         item.onSelect();
  56                 }
  57                 if(this.props.onSelect) {
  58                         this.props.onSelect(item);
  59                 }
  60         }
  61 }
  62
  63 class NavigationMenu extends React.Component {
  64         static PropTypes = {
  65                 activeItemId: PropTypes.string.isRequired,
  66                 onNavigationItemClick: PropTypes.func,
  67                 menu: PropTypes.array
  68         };
  69
  70         render() {
  71                 const {menu, activeItemId, onNavigationItemClick} = this.props;
  72                 return (
  73                         <div className='navigation-group'  key={menu.id}>
  74                                 <NavigationMenuHeader title={menu.name} />
  75                                 <NavigationMenuItems items={menu.items} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />
  76                         </div>);
  77         }
  78 }
  79
  80 function NavigationMenuHeader(props) {
  81         return <div className='group-name' data-test-id='navbar-group-name'>{props.title}</div>;
  82 }
  83
  84 function getItemDataTestId(itemId) {
  85         return itemId.split('|')[0];
  86 }
  87 function NavigationMenuItems(props) {
  88         const {items, activeItemId, onNavigationItemClick} = props;
  89         return (
  90                 <div className='navigation-group-items'>
  91                         {
  92                                 items && items.map(item => (<NavigationMenuItem key={'menuItem_' + item.id} item={item} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />))
  93                         }
  94                 </div>
  95         );
  96 }
  97
  98 function NavigationMenuItem(props) {
  99         const {onNavigationItemClick, item, activeItemId} = props;
 100         const isGroup = item.items && item.items.length > 0;
 101         return (
 102                 <div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})} key={'item_' + item.id}>
 103                         <NavigationLink item={item} activeItemId={activeItemId} onClick={onNavigationItemClick} />
 104                         {isGroup && <Collapse in={item.expanded} data-test-id={'navigation-group-' + getItemDataTestId(item.id)}>
 105                                 <div>
 106                                                 {item.items.map(subItem => (<NavigationMenuItem key={'menuItem_' + subItem.id} item={subItem} onNavigationItemClick={onNavigationItemClick} activeItemId={activeItemId}  />)) }
 107                                 </div>
 108                         </Collapse>
 109                         }
 110                 </div>
 111         );
 112 }
 113
 114 function NavigationLink(props) {
 115         const {item, activeItemId, onClick} = props;
 116         // todo should this be button
 117         return (
 118                 <div
 119                         key={'navAction_' + item.id}
 120                         className={classnames('navigation-group-item-name', {
 121                                 'selected': item.id === activeItemId,
 122                                 'disabled': item.disabled,
 123                                 'bold-name': item.expanded,
 124                                 'hidden': item.hidden
 125                         })}
 126                         onClick={(event) => onClick(event, item)}
 127                         data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}>
 128                         {item.name}
 129                 </div>
 130         );
 131 }
 132
 133 export default NavigationSideBar;