summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx')
-rw-r--r--openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx219
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;