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

   1 /*!
   2  * Copyright © 2016-2018 European Support Limited
   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         disabled: PropTypes.bool
  28     };
  29
  30     constructor(props) {
  31         super(props);
  32         this.state = {
  33             activeItemId: null
  34         };
  35         this.handleItemClicked = this.handleItemClicked.bind(this);
  36     }
  37
  38     render() {
  39         let { groups, activeItemId, disabled = false } = this.props;
  40
  41         return (
  42             <div
  43                 className={`navigation-side-content ${
  44                     disabled ? 'disabled' : ''
  45                 }`}>
  46                 {groups.map(group => (
  47                     <NavigationMenu
  48                         menu={group}
  49                         activeItemId={activeItemId}
  50                         onNavigationItemClick={this.handleItemClicked}
  51                         key={'menu_' + group.id}
  52                     />
  53                 ))}
  54             </div>
  55         );
  56     }
  57
  58     handleItemClicked(event, item) {
  59         event.stopPropagation();
  60         if (this.props.onToggle) {
  61             this.props.onToggle(this.props.groups, item.id);
  62         }
  63         if (item.onSelect) {
  64             item.onSelect();
  65         }
  66         if (this.props.onSelect) {
  67             this.props.onSelect(item);
  68         }
  69     }
  70 }
  71
  72 class NavigationMenu extends React.Component {
  73     static propTypes = {
  74         activeItemId: PropTypes.string.isRequired,
  75         onNavigationItemClick: PropTypes.func,
  76         menu: PropTypes.object
  77     };
  78
  79     render() {
  80         const { menu, activeItemId, onNavigationItemClick } = this.props;
  81         return (
  82             <div className="navigation-group" key={menu.id}>
  83                 <NavigationMenuHeader title={menu.name} />
  84                 <NavigationMenuItems
  85                     items={menu.items}
  86                     activeItemId={activeItemId}
  87                     onNavigationItemClick={onNavigationItemClick}
  88                 />
  89             </div>
  90         );
  91     }
  92 }
  93
  94 function NavigationMenuHeader(props) {
  95     return (
  96         <div className="group-name" data-test-id="navbar-group-name">
  97             {props.title}
  98         </div>
  99     );
 100 }
 101
 102 function getItemDataTestId(itemId) {
 103     return itemId.split('|')[0];
 104 }
 105 function NavigationMenuItems(props) {
 106     const { items, activeItemId, onNavigationItemClick } = props;
 107     return (
 108         <div className="navigation-group-items">
 109             {items &&
 110                 items.map(item => (
 111                     <NavigationMenuItem
 112                         key={'menuItem_' + item.id}
 113                         item={item}
 114                         activeItemId={activeItemId}
 115                         onNavigationItemClick={onNavigationItemClick}
 116                     />
 117                 ))}
 118         </div>
 119     );
 120 }
 121
 122 function NavigationMenuItem(props) {
 123     const { onNavigationItemClick, item, activeItemId } = props;
 124     const isGroup = item.items && item.items.length > 0;
 125     return (
 126         <div
 127             className={classnames('navigation-group-item', {
 128                 'selected-item': item.id === activeItemId
 129             })}
 130             key={'item_' + item.id}>
 131             <NavigationLink
 132                 item={item}
 133                 activeItemId={activeItemId}
 134                 onClick={onNavigationItemClick}
 135             />
 136             {isGroup && (
 137                 <Collapse
 138                     in={item.expanded}
 139                     data-test-id={
 140                         'navigation-group-' + getItemDataTestId(item.id)
 141                     }>
 142                     <div>
 143                         {item.items.map(subItem => (
 144                             <NavigationMenuItem
 145                                 key={'menuItem_' + subItem.id}
 146                                 item={subItem}
 147                                 onNavigationItemClick={onNavigationItemClick}
 148                                 activeItemId={activeItemId}
 149                             />
 150                         ))}
 151                     </div>
 152                 </Collapse>
 153             )}
 154         </div>
 155     );
 156 }
 157
 158 function NavigationLink(props) {
 159     const { item, activeItemId, onClick } = props;
 160     // todo should this be button
 161     return (
 162         <div
 163             key={'navAction_' + item.id}
 164             className={classnames('navigation-group-item-name', {
 165                 selected: item.id === activeItemId,
 166                 disabled: item.disabled,
 167                 'bold-name': item.expanded,
 168                 hidden: item.hidden
 169             })}
 170             onClick={event => onClick(event, item)}
 171             data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}>
 172             {item.name}
 173         </div>
 174     );
 175 }
 176
 177 export default NavigationSideBar;