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

   1 import React from 'react';
   2 import classnames from 'classnames';
   3 import Collapse from 'react-bootstrap/lib/Collapse.js';
   4
   5 class NavigationSideBar extends React.Component {
   6
   7         static PropTypes = {
   8                 activeItemId: React.PropTypes.string.isRequired,
   9                 onSelect: React.PropTypes.func,
  10                 onToggle: React.PropTypes.func,
  11                 groups: React.PropTypes.array
  12         };
  13
  14         render() {
  15                 let {groups, activeItemId} = this.props;
  16
  17                 return (
  18                         <div className='navigation-side-content'>
  19                                 {groups.map(group => (
  20                                         <div className='navigation-group'  key={group.id}>
  21                                                 <div className='group-name'>{group.name}</div>
  22                                                 <div className='navigation-group-items'>
  23                                                         {
  24                                                                 group.items && group.items.map(item => this.renderGroupItem(item, activeItemId))
  25                                                         }
  26                                                 </div>
  27                                         </div>
  28                                 ))}
  29                         </div>
  30                 );
  31         }
  32
  33         renderGroupItem(item, activeItemId) {
  34                 let isGroup = item.items && item.items.length > 0;
  35                 return (
  36                         <div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})}>
  37                                 <div
  38                                         key={item.id}
  39                                         className={classnames('navigation-group-item-name', {
  40                                                 'selected': item.id === activeItemId,
  41                                                 'disabled': item.disabled,
  42                                                 'bold-name': item.expanded,
  43                                                 'hidden': item.hidden
  44                                         })}
  45                                         onClick={(event) => this.handleItemClicked(event, item)}>
  46                                         {item.name}
  47                                 </div>
  48                                 {isGroup &&
  49                                         <Collapse in={item.expanded}>
  50                                                 <div>
  51                                                         {item.items.map(item => this.renderGroupItem(item, activeItemId))}
  52                                                 </div>
  53                                         </Collapse>
  54                                 }
  55                         </div>
  56                 );
  57         }
  58
  59         handleItemClicked(event, item) {
  60                 event.stopPropagation();
  61                 if(this.props.onToggle) {
  62                         this.props.onToggle(this.props.groups, item.id);
  63                 }
  64                 if(item.onSelect) {
  65                         item.onSelect();
  66                 }
  67                 if(this.props.onSelect) {
  68                         this.props.onSelect(item);
  69                 }
  70         }
  71 }
  72
  73 export default NavigationSideBar;