diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx')
| -rw-r--r-- | openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx | 219 |
1 files changed, 131 insertions, 88 deletions
diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx index 2eda7e69bf..61121df335 100644 --- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx +++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx @@ -19,116 +19,159 @@ import classnames from 'classnames'; import Collapse from 'react-bootstrap/lib/Collapse.js'; class NavigationSideBar extends React.Component { - static PropTypes = { - activeItemId: PropTypes.string.isRequired, - onSelect: PropTypes.func, - onToggle: PropTypes.func, - groups: PropTypes.array, - disabled: PropTypes.bool - }; + static PropTypes = { + activeItemId: PropTypes.string.isRequired, + onSelect: PropTypes.func, + onToggle: PropTypes.func, + groups: PropTypes.array, + disabled: PropTypes.bool + }; - constructor(props) { - super(props); - this.state = { - activeItemId: null - }; - this.handleItemClicked = this.handleItemClicked.bind(this); - } + constructor(props) { + super(props); + this.state = { + activeItemId: null + }; + this.handleItemClicked = this.handleItemClicked.bind(this); + } - render() { - let {groups, activeItemId, disabled = false} = this.props; + render() { + let { groups, activeItemId, disabled = false } = this.props; - return ( - <div className={`navigation-side-content ${disabled ? 'disabled' : ''}`}> - {groups.map(group => ( - <NavigationMenu menu={group} activeItemId={activeItemId} onNavigationItemClick={this.handleItemClicked} key={'menu_' + group.id} /> - ))} - </div> - ); - } + return ( + <div + className={`navigation-side-content ${ + disabled ? 'disabled' : '' + }`}> + {groups.map(group => ( + <NavigationMenu + menu={group} + activeItemId={activeItemId} + onNavigationItemClick={this.handleItemClicked} + key={'menu_' + group.id} + /> + ))} + </div> + ); + } - handleItemClicked(event, item) { - event.stopPropagation(); - if(this.props.onToggle) { - this.props.onToggle(this.props.groups, item.id); - } - if(item.onSelect) { - item.onSelect(); - } - if(this.props.onSelect) { - this.props.onSelect(item); - } - } + handleItemClicked(event, item) { + event.stopPropagation(); + if (this.props.onToggle) { + this.props.onToggle(this.props.groups, item.id); + } + if (item.onSelect) { + item.onSelect(); + } + if (this.props.onSelect) { + this.props.onSelect(item); + } + } } class NavigationMenu extends React.Component { - static PropTypes = { - activeItemId: PropTypes.string.isRequired, - onNavigationItemClick: PropTypes.func, - menu: PropTypes.array - }; + static PropTypes = { + activeItemId: PropTypes.string.isRequired, + onNavigationItemClick: PropTypes.func, + menu: PropTypes.array + }; - render() { - const {menu, activeItemId, onNavigationItemClick} = this.props; - return ( - <div className='navigation-group' key={menu.id}> - <NavigationMenuHeader title={menu.name} /> - <NavigationMenuItems items={menu.items} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} /> - </div>); - } + render() { + const { menu, activeItemId, onNavigationItemClick } = this.props; + return ( + <div className="navigation-group" key={menu.id}> + <NavigationMenuHeader title={menu.name} /> + <NavigationMenuItems + items={menu.items} + activeItemId={activeItemId} + onNavigationItemClick={onNavigationItemClick} + /> + </div> + ); + } } function NavigationMenuHeader(props) { - return <div className='group-name' data-test-id='navbar-group-name'>{props.title}</div>; + return ( + <div className="group-name" data-test-id="navbar-group-name"> + {props.title} + </div> + ); } function getItemDataTestId(itemId) { - return itemId.split('|')[0]; + return itemId.split('|')[0]; } function NavigationMenuItems(props) { - const {items, activeItemId, onNavigationItemClick} = props; - return ( - <div className='navigation-group-items'> - { - items && items.map(item => (<NavigationMenuItem key={'menuItem_' + item.id} item={item} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />)) - } - </div> - ); + const { items, activeItemId, onNavigationItemClick } = props; + return ( + <div className="navigation-group-items"> + {items && + items.map(item => ( + <NavigationMenuItem + key={'menuItem_' + item.id} + item={item} + activeItemId={activeItemId} + onNavigationItemClick={onNavigationItemClick} + /> + ))} + </div> + ); } function NavigationMenuItem(props) { - const {onNavigationItemClick, item, activeItemId} = props; - const isGroup = item.items && item.items.length > 0; - return ( - <div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})} key={'item_' + item.id}> - <NavigationLink item={item} activeItemId={activeItemId} onClick={onNavigationItemClick} /> - {isGroup && <Collapse in={item.expanded} data-test-id={'navigation-group-' + getItemDataTestId(item.id)}> - <div> - {item.items.map(subItem => (<NavigationMenuItem key={'menuItem_' + subItem.id} item={subItem} onNavigationItemClick={onNavigationItemClick} activeItemId={activeItemId} />)) } - </div> - </Collapse> - } - </div> - ); + const { onNavigationItemClick, item, activeItemId } = props; + const isGroup = item.items && item.items.length > 0; + return ( + <div + className={classnames('navigation-group-item', { + 'selected-item': item.id === activeItemId + })} + key={'item_' + item.id}> + <NavigationLink + item={item} + activeItemId={activeItemId} + onClick={onNavigationItemClick} + /> + {isGroup && ( + <Collapse + in={item.expanded} + data-test-id={ + 'navigation-group-' + getItemDataTestId(item.id) + }> + <div> + {item.items.map(subItem => ( + <NavigationMenuItem + key={'menuItem_' + subItem.id} + item={subItem} + onNavigationItemClick={onNavigationItemClick} + activeItemId={activeItemId} + /> + ))} + </div> + </Collapse> + )} + </div> + ); } function NavigationLink(props) { - const {item, activeItemId, onClick} = props; - // todo should this be button - return ( - <div - key={'navAction_' + item.id} - className={classnames('navigation-group-item-name', { - 'selected': item.id === activeItemId, - 'disabled': item.disabled, - 'bold-name': item.expanded, - 'hidden': item.hidden - })} - onClick={(event) => onClick(event, item)} - data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}> - {item.name} - </div> - ); + const { item, activeItemId, onClick } = props; + // todo should this be button + return ( + <div + key={'navAction_' + item.id} + className={classnames('navigation-group-item-name', { + selected: item.id === activeItemId, + disabled: item.disabled, + 'bold-name': item.expanded, + hidden: item.hidden + })} + onClick={event => onClick(event, item)} + data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}> + {item.name} + </div> + ); } export default NavigationSideBar; |